div는 표준 블록 레벨 엘리먼트입니다. 블록 레벨 엘리먼트는 새 줄에서 시작해 좌우로 최대한 늘어납니다. 자주 볼 수 있는 다른 불록 레벨 엘리먼트로 p와 form이 있으며 HTML5에 새로 추가된 엘리먼트로는 header, footer, section 등이 있습니다.
div가 하나가 추가되면 이것은 위에 설명한대로 새로운 줄에 추가 되어 등록되어진다. 이것이 블록의 개념이니 오늘부터 확실하게 인지하자.
Inline
span은 표준 인라인 엘리먼트이다. 인라인 엘리먼트는 단락안에서 이처럼 해당 단락의 흐름을 방해받지 않은체로 텍스트를 감쌀수 있다. a태그도 그러하다.
none
non은 엘리먼트를 실제적으로 감추는데 사용된다. DomTree에는 존재하지만, 랜더트리에서는 빠지기에 화면에보이지 않게된다. visibilty와의 차이는 visibility는 랜더트리에 속한채로 보여지지 않는 것이기때문에 공간을 차지한다는게 큰 차이이다.
다른 display 값
list-item과 table과 같은 다른 좀 더 특이한 display값도 있다.
margin: auto;
블록 레벨 엘리먼트의 width를 설정하면 좌우로 가장자리로 늘어나지 않게 할 수 있다. 그런다음 좌우 마진을 auto로 준다면 나머지 공간에 균등하게 공간이 나눠질것,. 브라우저 창이 엘리먼트 너비보다 좁을 떄 유일하게 문제가 살방하는데, 브라우저에서는 페이지에 가로 스크롤바를 만들어 이문제를 해결한다.
다음은 다시 블록으로
max-width
브라우저 창이 설정한 width 값보다 작을 경우를 대비하여 width 대신 max-width를 사용하면 브라우저가 작은 창을 처리하는 방식을 개선할 수 있다. 이것은 사이트를 모바일 환경에서도 사용할수 있게 만드는데도 유용하다. 한번 적용해보자.
박스 모델
같은 width 값이지만 나는 작고
같은 width 값이지만 나는 큽니다. margin padding 값이 다 다르기 떄문ㅇ.
static은 기본값이다. position: static; 이 설정된 엘리먼트는 그다지 특별한 방식으로 위치가 지정된것이 아니다. 정적 엘리먼트는 위치가 지정된 것이 아니라 표현하며, static이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정되었다고 표현한다.
relative
이것은 상대 위치가 지정된 엘리먼트에 top, left 값을 지정한것이다. 그럼 기본위치에 맞춰 위치가 조정되서 들어간다.
fixed
fixed 엘리먼트는 뷰포트에 상대적으로 위치가 지정되는데, 이는 페이지가 스크럴 되더라도 늘 같은 곳에 위치한다는 뜻이다. relative와 마찬가지로 top이나 right, bottom, left 프로퍼티가 사용된다.
이것은 조상 엘리먼트 static이 아닌 relative로 지정되어있다.
absolute 는 다루기가 까다로운 위치 지정 값이다. absolute는 뷰포트에 상대적으로 위치가 지정되는게 아니라 가장 가까운곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다는 점을 제외하면 fixed랑 비슷하다. 절대 위치가 지정된 엘리먼트가 기준으로 삼는 조상엘리먼트가 없으면 문서 본문(document body)를 기준으로 삼고, 페이지 스크롤에 따라 움직인다. "위치가 지정된" 엘리먼트는 position이 static이 아닌 엘리먼트를 가리킨다는 사실이 제일 중요하고 반드시 기억해야한다.