😀26챕터 display로 해보기
😀테이블 정의서 만들어보기
어쩔때는 자식 안거치고 ??? ==> 상관없음
왜 이미지는 인라인으로 주는거임?
==> 바로 주는게 좋음 뒷배경같은걸 css에 주고 사진, 오디오, 비디오 이런건 바로 줘도됨
창이름 줘야 ==> 새 창이 뜸
./ ==> 자기 파일위치
relative : 본인이 걸리는거다 그래서 자연스럽게 이동
line-height: 40px; /* 행간 설정 */
letter-spacing: -3px; /* 자간 설정 */
word-spacing: 5px; /* 단어 사이(띄어쓰기) 간격 설정 */
<!--
border 속성
- 요소의 테두리 선을 지정할 때 사용하는 속성
- 형식) border: 선의두께 선의종류 선의색상;
- 개별적으로 사용하는 방법
* border-width : 테두리 선의 두께
* border-style : 테두리 선의 종류
* border-color : 테두리 선의 색상
- 사용법
* border-style(테두리 선의 종류)
- none : 테두리 선 없음
- hidden : 테두리 선 없음
- solid : 실선, 단선(일반적인 선)
- dotted : 점선(....)
- dashed : 파선(----)
- double : 두줄선(이중선)
- groove : 홈이 파여 있는 선
- ridge : 솟은 모양의 선(groove의 반대)
- inset : 요소 전체가 들어간 선
- outset : 요소 전체가 나온 선
-->
border: 5px solid blue;
border: 5px solid; (색상 설정 안할 시 defalut: 검정색)
<!--
text-shadow 속성
- 텍스트에 그림자를 지정하는 속성
- 형식) text-shadow: <가로거리> <세로거리> <번짐정도> <색상>
* 가로거리
- 텍스트로부터 그림자까지의 가로거리
- 양수 값은 글자 오른쪽으로 그림자를 만들어 주고,
음수 값은 글자 왼쪽으로 그림자를 만들어 줌
필수적으로 들어가야 하는 값
* 세로거리
- 텍스트로부터 그림자까지의 세로거리
- 양수 값은 글자 아래쪽으로 그림자를 만들어 주고,
음수 값은 글자 위쪽으로 그림자를 만들어 줌
필수적으로 들어가야 하는 값
* 번짐정도
- 그림자가 번지는 정도를 말함
- 양수 값을 사용하면 그림자가 모든 방향으로 퍼져 나감
그림자가 크게 나타남
음수 값을 사용하면 그림자가 모든 방향으로 축소가 되어 보여짐
기본값은 0임
-->
<style type="text/css">
#title {
text-shadow: 3px 3px 3px gray;
}
<h3 id="title>제목</title>
<!--
float 속성
- 웹 문서의 요소를 떠 있게 하는 속성
- 수직적인 요소를 수평적인 요소로 바꾸어 주는 속성
- 왼쪽 구석이나 오른쪽 구석에 배치한다는 의미
- 문서의 레이아웃을 구성하기 위해서 많이 사용되는 속성
- float 속성의 종류
* right : 오른쪽부터 차례로 왼쪽 방향으로 떠 있게 하는 속성
* left : 왼쪽부터 차례로 오른쪽 방향으로 떠 있게 하는 속성
* both : 양쪽 어느 쪽으로도 떠 있지 않게 하는 속성
==> 해제하는 속성
- float 속성을 사용한 후에는 반드시 해제(clear: both;)를 해주어야 함
-->
<style type="text/css>
#first {
float: left;
}
#second {
float: left;
margin: 150px;
}
.foot {
both: clear;
}
font-family: 궁서체, 돋움체; /* 글자체 */ /* 궁서체가 있으면 궁서체를 쓰고 없으면 돋움체를 써라 */
margin: 16px auto;
/* CSS3에 추가된 기능 */
/* 모서리가 둥근 4각형 */
border-radius: 0 20px 0 20px; (왼쪽상단부터 시계방향으로 모서리가 둥그래짐)
<!--
box-shadow 속성
- 그림자를 만드는 속성
- 형식) box-shadow <수평거리> <수직거리> <흐림정도> <번짐정도> <쌕상>
* 수평거리
- 그림자의 수평 거리(얼마나 떨어져 있는지)
- 양수값은 오른쪽, 음수값은 왼쪽으로 그림자를 만듦
* 수직거리
- 그림자의 수직 거리(얼마나 떨어져 있는지)
- 양수값은 아래쪽, 음수값은 윗쪽에 그림자를 만듦
* 흐림정도
- 그림자의 흐림 정도를 표현함
- 기본값은 해가 진 그림자를 표시
값이 커질수록 부드러운 그림자를 표시함.
음수값은 사용 불가
* 번짐정도
- 긂자가 번지는 정도를 나타냄
- 양수값은 그림자가 모든 방향으로 퍼짐
음수값은 그림자가 모든 방향으로 축소되어 보임
-->
.shadow {
position: absolute;
top: 10%
left: 10%
box-shadow: 20px 20px 10px 10px orange;
}
opacity: 0.5; /* 0~1사이의 값 */
😀
<a href="#">위로</a> ==> 페이지 맨 위로 이동
<a href="#a">첫번째단락</a>
<a id="a">여기가 첫번째 단락입니다</a>
<!--
overflow 속성
요소의 크기 이상으로 내용(자식요소)이 넘쳐을 때 내용의 보여짐을 제어하는 것
* visible : 넘친 부분을 자르지 않고 그대로 보여줌
* hidden : 넘친 부분을 잘라내고, 보이지 않도록 함
* scroll : 넘친 부분을 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함.
* auto : 넘친 부분이 있는 경우만 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함.
-->
부모,자식 박스 만들어서 css의 속성으로 overflow 설정
'CSS' 카테고리의 다른 글
23.02.09(head, .css, 선택자(태그/id/class), (블록/인라인)레벨, em, display, margin-padding) (0) | 2023.02.09 |
---|
댓글