1. Block vs Inline Block
HTML Element들은 크게 두 가지로 분류할 수 있다.
- Block Elements : 화면전체를 사용하는 태그
- Inline level Elements : 화면일부를 차지하는 태그
1.1 Block Elements
Block 요소들은 화면상에서 항상 새로운 줄에서 시작하고, 위 아래에서 서로 쌓이는 형식으로 나타난다. 또한 사용 가능한 최대치의 폭을 차지하게 된다.
p태그는 Block 요소이기 때문에 두 개의 p태그가 모두 화면 전체를 쓰는 것을 볼 수 있다.
Block Element들은 또 다른 Block Element를 자식으로 가질 수 도 있고, Inline Element를 자식으로 가질 수 있다.
div또한 Block Element이다. divElement 내부에는 p태그가 2개 들어있으며 p태그는 Block Element이기 때문에 자신들이 차지할 수 있는 가장 최대치의 폭을 차지하게 된다.
1.2 Inline Elements
Inline Element들은 일반적인 문서에서의 텍스트 흐름과 동일하게 동작하며 요소 내부 컨텐츠의 크기만큼만 폭을 차지한다. Inline Element들은 또 다른 Inline Element들은 자식으로 포함할 수 있지만 Block Element는 자식으로 품을 수 없다.
span태그는 대표적인 Inline Element 중의 하나이다. 자신의 크기만큼 차지하여 적용된다.
2. Content 위치 조정하는 방법
CSS를 이용하여 Content의 위치를 원하는대로 조정할 수 있다.
2.1 Float 속성 사용하기
float속성은 기존 Element들의 흐름에서 벗어나 부모 Element를 기준으로 왼쪽이나 오른쪽으로 위치를 잡도록 도와준다.
section과 aside모두 Block Element이기 대문에 기본적으로 위,아래 형식으로 배치가 되지만 float속성을 줌으로써 기존 HTML Element들의 배치 흐름에서 벗어나게 된다
특정 Element에게 float를 적용하게 되면, 해당 Element는 부모 Element를 기준으로 끝에 배치되게 된다. 부모가 없을 경우 페이지를 기준으로 배치가 된다.
float를 적용한 Element와 그 이후에 나타나는 Element들의 배치 흐름이 망가졌을 경우, float를 적용한 Element의 바로 다음에 나타나는 Element에게 clear : both를 적용시키면 된다.
2.2 Inline Block 속성 사용하기
display 속성에 해당하는 값 중 하나인 inline-block을 이용한다. inline-block을 이용하면 여러개의 Block Element들을 Inline Element처럼 한 줄에 이어서 배치할 수 있다.
2.3 Position 속성 사용하기
조금 더 정밀하게 배치가 필요할 경우 사용되는 방법이다. 웹페이지의 기본 속성은 position: static;이다.
a. Relative Position
position: relative;, 부모를 기준으로 해서 상대적인 위치가 정해진다. top,left,right,bottom등의 값을 지정하게 되면 위치가 조정된다. (적용하지 않으면 별다른 특이점 X)
b. Absolute Position
가장 가까운 부모중에 position: relative;가 적용된 부모를 기준으로 해서 위치가 지정이 된다. (없을 경우 페이지 전체를 기준) 부모와 어떤 관계성이 끊기기 때문에 크기는 자신의 Content만해진다.
c. Fixed Position
특정한 Element를 화면의 그 위치에 고정시켜서 Scroll로부터 완전히 독립되게 만드는 것
(width, height 크기를 지정해야 한다.)
참고사이트
