[HTML & CSS] 너비 / 높이 / display

[너비 속성]

[px과 %]

• 웹 상에서는 px(비트맵) 이미지 기반이다.
• 비트맵은 색상정보를 가진 px들이 모여서 이미지를 이루는 것을 이야기한다.
• 비트맵이미지는 사이즈 조절이 들어가면 해상도가 깨진다. (전달된 이미지를 그대로 옮겨야함) 
• 사이즈 조절이라는 말은 원본 파일을 이러저리 옮기면 해상도가 깨진다는 뜻이다.
• 웹에서 수치 단위가 들어갈 때 px단위 또는 %단위를 주로 사용한다.
• px(픽셀)은 고정형에서 사용한다. (100px = 1px * 100개)
• %(퍼센트)는 반응형에서 사용한다.
• px단위를 사용하여 수치를 고정시키면 반응형으로 사용할 수 없다.
• %단위를 사용하여 수치를 고정시키면 반응형으로 사용할 수 있다.
• 반응형이라는 것은 웹 페이지의 칸을 줄이거나 늘렸을 때 해당 페이지 넓이에 맞게 조절된다.
• 너비(width)의 속성이 기본값일 때 100%으로 작동한다.
• css에 width를 작성하지 않는다면 기본값(auto)은 100%로 적용된다.

See the Pen 너비속성 by psm817 (@psm817) on CodePen.

 

 

[높이 속성]

• 모든 태그는 height라는 속성이 기본값일 때 0으로 작동한다.
• css에 height를 작성하지 않으면 기본값(auto)은 0으로 적용된다.
• 모든 사물은 너비, 높이, 색상이 있어야 눈에 보일 수 있다.

See the Pen 높이속성 by psm817 (@psm817) on CodePen.

 

 

[display 속성]

• display는 반드시 있어야하는 속성이다.
• display의 속성값에 따라서 태그들의 위치가 달라질 수 있다.

 

[block]

• 너비(width) 속성이 기본값일 때, 100%로 작동한다. 높이(height)는 기본값이 0으로 작동한다.
• 너비(width)가 아무리 작아도(1px이여도) 한 줄에 하나씩 배치된다.
• inline 요소와 inline-block 요소를 제외하고는 display가 전부 block이다. (여기서 말하는 요소는 태그로 생각됨, div태그를 inline-block으로 주면 가로로 이어지긴 함)
• 기본 display가 block 요소인 것들은 a, span, img, ::before, ::after, button을 제외한 전부이다.

 

• display: block : 태그가 한 줄에 하나씩 밑으로 내려간다. (width, height 커스텀 가능)
• display: inline : 태그가 한 줄에 세로로 여러개씩 블럭이 이어진다. (width, height 커스텀 불가능)
• display: inline-block : block과 inline를 모두 이용하고 싶을 때 (한 줄에 여러개씩 이어지고, width, height 커스텀이 가능)

See the Pen block by psm817 (@psm817) on CodePen.

 

 

[inline]

• 너비(width) 와 높이(height) 속성은 기본값일 때 0으로 작동한다.
• inline 요소는 너비(width), 높이(height) 속성값을 커스텀할 수 없다.
• inline 요소에 width, height의 고정값을 넣어도 작동하지 않는다.
• inline 요소를 눈으로 확인하는 방법은 텍스트를 작성하는 방법으로 확인해야한다.
• display가 inline인 요소는 a, span, img, ::before, ::after가 있다.
• span은 html 구조 최하위에 사용되는 텍스트 태그이다.
• div 태그 아래 트리구조로 여러 태그들이 붙을 수 있는데, span 밑에는 div가 붙지 못한다. 그 이유는 span이 최하위의 태그이기 때문이다.
• span 아래 구조에는 span 태그만 들어올 수 있다. 이 이상 큰 덩어리(태그)는 사용하지 않는다.

See the Pen inline by psm817 (@psm817) on CodePen.

 

 

[inline-block]

• 너비(width) 와 높이(height) 속성은 기본값일 때 0으로 작동한다.
• inline-block 요소는 너비(width), 높이(height) 속성값을 커스텀할 수 있다.
• inline-block 요소에 width, height의 고정값을 넣으면 작동한다.
• block 처럼 width와 height를 커스텀할 수 있고, inline 처럼 한줄에 세로로 이어서 쓰고 싶다면 display 속성을 inline-block으로 적용하면 된다.
• 기본 display 속성이 inline-block인 것은 "button" 하나뿐이다.

See the Pen inline-block by psm817 (@psm817) on CodePen.

 

 

[복습]

• width가 기본값일 때, 100%으로 작동한다.
• height가 기본값일 때, 0으로 작동한다.
• display가 block일 경우 한 줄에 하나씩 생성한다. (기본값 : width는 100%, height는 0 / 커스텀가능)
• display가 inline일 경우 기본값은 모두 0이고, 커스텀이 불가능하다. inline 요소 중 span은 태그 중 최하위 요소이며, 텍스트를 작성해야만 화면에 보인다.
• display: inline 요소에 포함되는 태그는 a, span, img, ::before, ::after이다.
• display가 inline-block일 한 줄에 행 옆에 줄줄이 생성, 기본값은 모두 0이고, 커스텀이 가능하다.

See the Pen 2일차 복습 by psm817 (@psm817) on CodePen.