[span의 특성 (vs div)]
div는 상위속성의 크기를 물려받는다.
span은 속성 display의 기본값이 inline이며 자기 영역의 크기만
차지하고 줄넘김이 없다. (=빈공간이 없다. )
태그는 우리 눈에 보이기위해 3가지 요소가 필요하다.
1. 너비
2. 높이
3. 배경색
[공통]
- 분리되어 있는 상자
- 원할때마다 display 속성값을 바꿔서 사용할 수 있다.
[block 특징]
- 너비가 부모 속성의 100%
- 한 줄을 다 차지하는
1. 상위 엘리먼트만큼 크기를 가진다.
2. 크기가 아무리 작아도 한 줄에 한 개씩 배치된다.
3. inline이나 inline-block요소를 제외하곤 전부 block태그이다.
4. 레이아웃을 구분할 때 사용되는 요소이다. (박스)
5. width가 auto(기본값)일때 100%로 작동한다.
[inline 특징]
- 너비는 내용만큼만
- 한 줄 안에 여러개가 들어가는
- inline끼리는 여백이 들어가는
1. 상위 엘리먼트 공간이 부족하지 않는 한 한 줄에 같이 나온다.
2. 하단과 양 옆에 알 수 없는 여백이 생긴다.
3. inline 대표 태그: a(링크), span(텍스트), img(이미지), ::before
, ::after(가상요소)
ㄴ inline요소와 inline-block요소는 특징이 있는 태그들이 대부분이다.
4. 너비, 높이 속성을 사용할 수 없다.
5. width가 auto(기본값)일때 0으로 작동한다.
[inline-block 특징]
- block과 inline의 장점을 합친
- 크기 조절 가능, 한 줄에 배치
- 서로 여백 들어가는
1. 한 줄에 같이 배치 된다.
2. 너비 높이 속성을 사용할 수 있다.
3. 대표 태그는 button이 있다.
4. 하단과 양 옆에 알 수 없는 여백이 생긴다.
[px단위]
- 웹에서는 기본적으로 비트맵 이미지를기반으로 쓴다.
- 비트맵 이미지란? 각각의 색상정보를 가진 px들이 모여서 한장에
이미지를 구성하는 이미지를 이야기한다.
- 비트맵 이미지는 해상도 저하가 일어날수 있다.
- 웹에서 사용하는 이미지를 제작할때는 해상도를 72로 설정해야 한다.
[height 특성]
- height: auto;
ㄴ auto: 태그가 기본적으로 가지고 있는 성격대로 적용하겠다.
ㄴ 높이는 모든 태그가 auto일때 0으로 작동한다.
ㄴ height: auto;=0 이랑 hegiht: 0;인 상태랑 다르다.
ㄴ height: auto;=0(하위요소크기만큼 크기를 가지겠다.
물풍선 안에 물을 300L넣으면 물풍선이 300L만큼 크기를가지는원리와
같다고 생각하면 된다.)
ㄴ height: 0;(px이 0이다. 무엇이 들어있든 높이 0의 크기를 가지겠다.)
[width의 특성]
ㄴ auto: 태그가 기본적으로 가지고 있는 성격대로 적용하겠다.
ㄴ : 0;(px이 0이다. 무엇이 들어있든 높이 0의 크기를 가지겠다.
텍스트가 안에 있는 경우 줄바꿈이 자동이다. )
