Basic CSS: Units, box-sizing, position, float, display

지난 이틀간 웹페이지 클론코딩을 했습니다. 이번 과제는 페이지의 기능적인 부분은 전혀 다루지 않고 화면을 구성해 내는 작업이었습니다. Pre코스에서 가볍게 CSS를 다뤄본 경험은 있지만 화면에 요소들이 많아지니 쉽지 않더군요. 현재 버전의 airbnb사이트의 코드들을 참고하며 작업하면서 중요했던 CSS들을 정리해봅니다.

---

 

Summary of CSS Units

폰트, 마진 등을 설정할때 친숙한 px이나 %외에도  em, rem, px등이 함께 섞여 나오는데요, 각각의 유닛 개념을 알아야 활용할 수 있겠죠. 아래 설명에서 뷰포트는 웹페이지가 사용자에게 보여지는 영역입니다.

 

CSS의 표준권고안에 따르면 크기 단위는 절대단위와 상대단위로 구분됩니다.
- 절대단위 : in, cm, mm, pt, pc가 있으며 출력장치(모니터)의 물리적 속성을 아는 경우 효율적.
- 상대단위 : em, ex, px, %가 있으며 플랫폼 간의 호환성을 유지하기에 좋음

Unit	Relative to	설명
px	pixel unit	픽셀 단위입니다.
em	font size of the element	em은 현재의 font-size를 정의합니다. 일례로, body 태그에 em값을 이용해 폰트 사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받습니다.
rem	font size of the root element	rem의 "r"은 바로 "root(최상위)"를 뜻합니다. 최상위 태그(요소)에 지정한 것을 기준으로 삼으며, 보통 최상위 태그는 html태그입니다.
ex	x-height of the element’s font	부모 요소의 높이를 기준으로 상대적인 값을 갖습니다.
ch	width of the "0" (ZERO, U+0030) glyph in the element’s font	폰트의 숫자 "0"의 가로값에 대한 비율을 말합니다.
vw (Viewport Width)	1% of viewport’s width	vw 요소는 너비값의 100분의 1의 단위입니다.  ex.) 브라우저 너비값이 900px일때 1vw는 9px
vh (Viewport Height)	1% of viewport’s height	vh 요소는 높이값의 100분의 1의 단위입니다. ex.) 브라우저 높이값이 900px일때 1vh는 9px
vmin (Viewport Minimum)	1% of viewport’s smaller dimension	뷰포트 너비값과 높이값의 최소값
vmax (Viewport Maximum)	1% of viewport’s larger dimension	뷰포트 너비값과 높이값의 최대값

 

CSS 기본 박스 모델

문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현합니다. CSS는 박스의 크기, 위치, 속성을 결정합니다. 하나의 박스는 콘텐츠영역 < 패딩영역 < 테두리영역 < 마진영역 으로 이루어집니다.

출처 : MDN - CSS 기본 박스 모델 입문

 

 

박스사이즈 설정하기

box-sizing 속성

요소의 너비와 높이를 계산사는 방법을 지정합니다.

• content-box : 콘텐트 영역을 기준으로 크기를 설정한다(기본값)
• border-box : 테두리를 기준으로 크기를 설정한다.
• initial : 기본값으로 설정한다.
• inherit : 부모 요소의 속성값을 상속 받는다. 

정렬하기

position 속성

문서 상에 요소를 배치하는 방법을 지정합니다. top, right, bottom,  left 속성이 요소를 배치할 최종 위치를 결정합니다.

• static : 아무것도 지정하지 않으면 사용되는 기본값입니다. HTML문서에 따라 위치가 정해짐. 잘 쓰이지 않음.
• fixed : 브라우저를 기준으로 요소의 위치를 설정할 수 있습니다.
  ex.) 스크롤을 내려도 같은곳에 뒤치하는 상하단 메뉴바, 광고 등이 이 속성을 이용합니다.
• relative : 자신의 static의 위치를 기준으로 위치를 지정합니다.
• absolute : 원하는 값을 지정해서 배치합니다.

#static {
  width:100px;
  height:100px;
  background-color: lawngreen;
  position: static;
}

#relative2 {
  width:100px;
  height:100px;
  background-color:yellow;
  position:relative;
  top:0px;
  left:100px;
}

#relative3 {
  width:100px;
  height:100px;
  background-color: coral;
  position:relative;
  top:0px;
  left:200px;
}

 

콘텐츠 나란히 배열하기

float 속성

콘텐츠가 좌우측을 따라 나란히 배치되도록 지정합니다.

• left / right : 요소가 자신을 포함하는 블록의 좌측/우측에 위치해야 함을 나타냅니다.
• none : 요소가 부동하지 않음을 말합니다.
• inline-start : 요소가 자신을 포함하는 블록의 시작점에서 위치해야 함을 나타냅니다.
• inline-end: 요소가 자신을 포함하는 블록의 끝쪽에 위치해야 함을 나타냅니다.

출처 : MDN - float

 

요소들의 표시방법 설정하기

display속성

페이지상에서 요소들이 어떻게 보여지고 다른 요소들과 어떻게 배치되는지를 결정합니다.

• none : 태그를 사라지게 합니다.
• block : div처럼 블록 지정으로 자동 줄바꿈과 크기를 지정할 수 있습니다.
• inline : span처럼 줄바꿈이 되지 않고 크기를 지정할 수 없습니다.
• inline-block : 혼합된 형태로 크기는 지정할 수 있으나 줄바꿈은 되지 않습니다.

/* style */
p {color: red;}
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}

/* HTML */
<h2>display: none:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex1">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: inline:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex2">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex3">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: inline-block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex4">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

 

 

레퍼런스

MDN CSS 참고서

https://zinee-world.tistory.com/131 [zineeworld]

https://valuefactory.tistory.com/129

https://mainia.tistory.com/3295