오늘은 저번 시간과 다르게 CSS의 고급 활용에 더 밀접한 것들을 해보려 합니다.

배치

HTML tag는 웹 페이지에 작성된 순서대로만 출력되는 것이 아니고, css를 이용할 수도 있습니다.

브라우저의 특정 위치에 고정 시킬 수도 있으며 숨길 수도 있습닏자.

css로 태그가 출력되는 위치를 지정하는 것을 배치라고 합니다.

HTML tag는 Inline tag와 block tag로 나뉩니다.

Inline tag는 Inline box, block tag는 block box로 출력됩니다.

inline

Inline box는 블록안에 배치되어 딱 글자가 차지한 영역만 차지합니다.

block

block tag는 새로운 라인에서 시작되어 라인 끝까지 차지합니다.

박스 제어

display property를 이용하여, default box 유형을 무시하고 HTML tag의 box 유형을 달리 지정할 수 있는 행위를 할 수 있습니다.

span {
    display : block; 
    width : 100px; 
    height : 60px; 
    }

위와 같이 inline 태그임에도 display 속성으로 바꿔버리면 한 줄을 독점적으로 차지하는 태그로 바뀝니다.

div { 
    display : inline; 
    }

반대로 block 태그인 div를 inline으로 display 속성을 이용하여 바꿔버리면 라인안에 다른 요소와 같이 배치됩니다.

inline-block

inline-block은 라인 안에서 다른 요소들과 함께 배치될 수 있으면서 동시에 css로 크기와 여백을 조절할 수 있습니다.

div { 
    display : inline-block; 
    border : 1px dotted blue ; 
    margin : 10px; 
    width : 10px; 
    height : 10px; 

position

일반적으로 웹페이지는 태그를 쓴 순서대로 배치되지만 position 속성을 이용하면 이를 무시할 수 있습니다.

• 정적 배치

• 상대 배치

• 절대 배치

• 고정 배치

• 유동 배치

배치하는 방법은 위와 같이 다양합니다.

정적 배치

static이며 웹 페이지가 작성된 순서대로 HTML tag의 출력위치를 정하는 방식입니다.

상대 배치

relative이며 일반적인 태그의 기본 위치에서 left, top, bottom, right 속성 값 만큼 이동한 상대 위치에 배치되는 방식입니다.

절대 배치

:absolute이며 절대위치는 left, top, bottom, right 속성 값으로 정하며 상대적인 위치입니다.

고정 배치

fixed이며, 브라우저의 크기가 변경될 때 HTML tag가 viewport의 일정 장소에서 항상 보이도록 배치되는 방식입니다.

숨기기

visibility 속성을 이용하여 HTML tag를 출력할 것인지 숨길 것인지를 지정할 수 있습니다.

img { visibility : hidden; }

위와 같이하면 숨겨집니다.

자르기

overflow는 HTML 내용이 태그에 부여된 width와 height 속성 크기를 넘어가는 경우, 내용을 자를 것인지 말 것인지 여부를 지정하는 속성입니다.

지정할 수 있는 속성은 잘리지않고 넘기는 visible과 태그 크기로 자르는 hidden과 스크롤바를 부착해주는 scroll, 그리고 내용이 넘치면 자동으로 스크롤 바를 만들어주는 auto가 존재합니다.