div 요소
CSS 작성 방법
선택자 {
속성 : 속성값;
}
ex )
color 가 속성이고 red 가 속성 값이란걸 알수 있다.
[color 속성값으로 들어올 수 있는 종류]
1. 색깔 이름
2. rgba()
rgba(레드, 그린, 블루, 투명도)
투명도는 0~ 1 0~100퍼센트 값
0.2 => 20%
1 => 100%
3. hax
color : #000000
rgb수치가 바뀌는 대로 hax 수치도 바뀐다.
body 는 화면 전체를 칭한다.
높이 속성 , 너비 속성
height (높이) width (너비) , 높이는 요소의 상하 길이를 설정해주고 너비는 좌우 길이를 설정해준다.
div 를 생성하고 나서 css 에서 height 와 배경색과 만을 설정 해주면 아래있는 그림처럼 화면에 나타나진다.
근데 width 값을 설정 안해도 왜 나타나게 되는걸까?
바로
width : auto ; (설정 안하면 디폴트 값, 화면에 따로 쓰지 않으면 보이지는 않지만 이렇게 설정된다.)
div는 display 의 디폴트 값이 block 이다. block은 width 의 auto 값을 100%로 설정해준다. (inline 이면 width의 auto 값이 0으로 된다.) 100%는 부모 엘리먼트 속성인 body의 너비를 그대로 이어받음 , body 는 화면 전체를 나타내고 있는 상태니까 div 의 너비가 화면 전체를 채우게 된다.
ex)
요약
1.block 대표 태그 div
2. display : block은 너비가 아주아주 작아도 한줄에 하나씩 나온다.
왜? 한줄에 하나씩 배치되어야 하는 레이아웃도 있기 때문이다.
3. block 은 너비를 설정하지 않아도 자동으로 auto 값 100%를 가진다.
'웹1' 카테고리의 다른 글
| 2023-05-18 앵커 태그, 하이퍼 링크 이어서, padding, 브라우저에서 도형 취급 당하는 요소 가로정렬 (0) | 2023.05.18 |
|---|---|
| 2023-05-17 CLASS 와 ID, inline-block 여백 제거 , 젠코딩, 힘이 강한 css ,앵커 태그, 하이퍼 링크 (0) | 2023.05.17 |
| 2023.05.16 자식 엘리먼트가 부모엘리먼트 보다 작을 때,같을때,inline-block 줄바꿈 조건,font-size (0) | 2023.05.16 |
| 2023-05-15 inline, inline-block , 상위 엘리먼트와 하위 엘리먼트를 부르는 명칭 (0) | 2023.05.15 |
| 2023.05.11 웹1 수업 , 단축키 연습,주석 (3) | 2023.05.11 |