가독성 좋은 웹사이트 위한 CSS 레이아웃 알아가기(position, display)

화려하고 가독성 좋은 웹사이트를 만들려면??

 

최근 웹사이트들을 보면 화려하고 가독성이 좋다. HTML, CSS, 자바스크립트를 활용해서 만들어야 한다. 웹사이트의 뼈대가 되는 HTML, 동적인 웹사이트를 위한 자바스크립트도 중요하지만 화려하고 가독성 좋은 웹사이트의 기본이 되는 건 CSS 레이아웃이다! 레이아웃이 잘 잡혀 있어야 글, 도형, 여러 가지 기능이 자기 자리에서 빛을 낼 수 있다. CSS 레이아웃에는 잘 짜기 위해서는 position과 display을 이해하고 넘어가야 한다. 

 

 

먼저 position은 웹에서 element가 배치되는 방식을 결정한다. Value에는 static, relative, absolute, fixed가 있다.

 

1. stactic - 브라우저에 기본으로 설정되어 있는 값이다.

2. relative - 원래 있어야 되는 자리에서 설정해 놓은 값만큼 이동한다. I'm Box에 relative를 주고 left : 20px, top : 20px로 설정.

 

3. absolute - 가장 가까운 부모 태그를 기준으로 위치를 이동한다.  I'm Box에 absolute를 주고 left : 20px, top : 20px로 설정.

이때, 중요한 점은 부모태그에 postition이 relative로 설정되어 있어야 한다.

4. fixed - 페이지(브라우저)를 기준으로 위치를 이동한다. I'm Box에 fixed를 주고 left : 20px, top : 20px로 설정.

 

 

이를 통해, position은 value에 따라 움직이는 기준이 다르다는 것을 알 수 있었다. 

 

다음으로 display이다. display에 여러 가지 value들이 있지만 여기서는 block, inline, inline-block를 살펴보려고 한다. html 태그들 마다 display의 value 설정 값이 다르다. 

 

1. block - width, height를 가질 수 있고 옆에 아무것도 올 수 없다.

 

1.inline - width, height를 가질 수 없고 옆에 올 수 있다.

 

3. inline-block -  inline은 width, height를 가질 수 있고 block은 옆에 상자가 올 수 있다. width : 20px, height : 30px로 값 설정.

 

html 태그들 마다 display의 value 설정 값이 다르다

block - level element

inline - level element