[CSS] CSS 위치, z-index, float, 다단 레이아웃, 미디어쿼리, HTML 시멘틱구조

CSS

위치 (position)

: 요소의 위치를 결정하는 방식을 설정합니다.

 

1.정적 위치(static position) 지정방식

HTML 요소의 위치를 결정하는 기본적인 방식입니다. position 속성값이 static으로 설정된 요소는 top, left, right, bottom 속성값에 영향을 받지 않습니다. 정적 위치 지정방식은 단순히 웹 페이지의 흐름에 따라 차례대로 요소들의 위치를 결정하는 방식입니다.

 

2.상대 위치(relative postion) 지정방식

HTML 요소의 기본 위치를 기준으로 위치를 재설정하는 방식입니다. HTML 요소의 기본 위치란 정적위치 지정방식일 때 결정되는 위치를 의미합니다.

자신이 원래 놓여야하는 위치로부터 얼마나 떨어지게 할 것인지 지정할 수 있다.( static postion을 기준으로 옮길 수 있다.)

ex) left : 300px ;   top : 100px ;

3.고정 위치(fixed postion) 지정방식

뷰포트(가상의 렌더링 된 화면)를 기준으로 위치를 설정하는 방식입니다. 웹 페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치하게 됩니다.

 

*뷰포트

브라우저들은 viewport로 알려진 가상의 화면을 가지고 있습니다. 즉 화면 display 상의 표시 영역을 말합니다. 데스크탑의 viewport는 브라우저 창의 viewport와 같고, 사용자가 브라우저 창의 크기를 조절하면 viewport의 크기도 조절됩니다. 반면 모바일 viewport는 상하좌우로 스크롤을 움직이거나 줌인, 줌아웃을 통해 viewport를 변경하여 사용합니다.

position: fixed; /* 고정위치 지정*/
top: 10px;
rigth: 10px

 

4.절대 위치(absolute position) 지정방식

뷰포트를 기준으로 위치를 결정하는 고정 위치 지정방식과 비슷하게 동작합니다. 단지 뷰포트만을 기준으로 하는 것이 아닌 조상요소를 기준으로도 위치를 결정할 수 있습니다. 만약 위치가 설정된 조상요소를 가지지 않으면 body 요소를 기준으로 위치를 결정하게 됩니다.

*조상요소라는 것은 정적 위치(static position) 지정방식을 제외한 방식(relative, fixed, absolute)로 위치가 설정된 조상요소를 의미합니다.

*조상요소가 정적 위치 지정방식일 경우, 위치는 뷰포트를 기준으로 결정하게 됩니다.

 

relative postion의 속성을 가지고있는 박스를 만들고, 그 안에서 각 각의(또는 하나로 묶은)클래스를 absolute postion으로 설정한 후 개별적으로 위치지정을 할 수 있다.

요즘 웹페이지들을 보면 대부분 박스를 만들고 그안에 absolute position을 사용하여 메뉴들의 아이콘들이나 혹은 게시글의 사진들을 위치 조정해준다

 

z-index

HTML 요소의 위치를 설정하게 되면 설정된 위치 및 방식에 따라 겹칠 수 있습니다. 겹쳐지는 요소들이 쌓이는 스택의 순서를 설정합니다. 스택의 순서는 양수나 음수 모두 사용할 수 있으며, 크기가 클수록 위에 위치하고 작을수록 아래에 위치하게 됩니다.

z-index: 숫자; <== 숫자의 크기에 따라 우선순위가 달라진다.

 

float

HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어줍니다. 이 속성은 본래 다른 요소들과 어울리도록 위치하는 기능이 목적이지만, 현재는 웹 페이지 레이아웃을 작성할 때 오히려 더 자주 사용됩니다.

 

예를 한번 해보자 ! <img src="apple.png" alt="사과">blah blah blah

float: left; 를 적용하면 글자가 그림 오른쪽으로 간다

 

 

1. float를 적용한 요소

• 방향을 설정(left, right)
• 컨텐츠 크기만큼만 영역이 설정(포함된 내용이나 padding값으로 인한 영역 크기)
• 다른 요소보다 위쪽에 위치. ( float의 사전적 정의처럼 떠있다. 뒤 box의 배경색이 있다면 그위로 올라간다.)

박스 1, 2에만 float 값을 설정해주었을 때,  박스 3이 바닥에 깔리고 그 위에 박스 1과 박스 2가 떠있는걸 확인해 볼 수 있다.

 

2. float를 적용받은 요소

: 설정한 방향 반대쪽으로 끌어올려집니다.

 

clear

float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해줍니다. 컨테이너 요소(감싸고있는 요소)에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 쉽지 않습니다. 따라서 float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 사용하여 이후에 등장하는 요소들이 더이상 float 속성에 영향을 받지 않도록 설정합니다.

float를 설정하고 width값이 100%가 안되면 그 다음 오는 컨텐츠들이 딸려올라온다..

3번째 박스의 css 값을 clear: both; 로 설정해주었다.

 

• both : 좌측, 우측의 float 속성을 무효화시킵니다.(주로 이것만 쓰인다)
• left : 좌측 float 속성을 무효화시킵니다.
• right : 우측 float 속성을 무효화시킵니다.

 

다단 레이아웃

텍스트 단을 column 속성으로 다단을 만들 수 있습니다. 다단으로 만든다는 의미는 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 것을 의미합니다. ( 예 : 신문사설 )

• column-count : 가로로 나열될 텍스트의 단의 개수를 설정합니다. ex)1, 2, 3 ...
• column-gap : 단과 단 사이의 여백을 설정합니다.
• column-rule : 단과 단 사이의 구분선, 구분의 모양, 두께, 색상을 설정합니다.
• column-span : 단과 안의 포함된 요소를 다단편집에서 해체시킵니다. 아래의 '다단편집' 이라는 문구처럼 위치하고싶다면  '다단 편집' 태그에 column-span: all; 속성적용을 해주면 된다.

 

미디어 쿼리

width, height, color .. 등 속성과 같은 미디어 관련 표현식을 통해 스타일이 적용되는 범위를 조절할 수 있습니다. 미디어 쿼리를 사용하면 컨텐츠를 별도로 변경하지 않아도 웹 페이지에 접속하고 있는 기기에 알맞은 형태로 스타일을 조절합니다.

 

@media 매체유형 and (표현식) { css 스타일 코드 ; }

매체유형

• all : 모든 매체
• print : 프린터 기기
• screen : 컴퓨터나 태블릿, 스마트폰 ...
• speech : 스크린 리더

 

@media screen and (min-width: 1024px) {background-color: yellow;}

 

 

HTML5 시멘틱 태그

시멘틱은 "의미, 의미론적인" 이라는 뜻으로 HTML5에 도입된 개발자와 브라우저에게 의미있는 태그로 제공되는 태그입니다.

 

• <header> : 주로 머릿말, 제목 등을 표현하기 위해 내용을 적는 영역입니다.
• <nav> : 컨텐츠를 담고 있는 문서를 사이트간에 서로 연결하는 링크를 넣는 영역입니다.
• <section> : 컨텐츠의 분류를 넣는 영역입니다.
• <aside> : 사이드바라고 부르며, 본문 이외의 내용을 넣는 영역입니다.
• <summary> : 세부 정보를 담는 태그의 제목을 넣는 영역입니다.
• <details> : 세부 정보를 담는 영역입니다. -- 내용이 엄청 많을 때
• <article> : 컨텐츠의 실질적인 내용을 담는 영역입니다. -- 내용이 짧막 짧막 할 때
• <footer> : 회사소개, 저작권, 약관 등의 정보를 담는 영역입니다.

<div>
    <div id="header">
    </div>
    <div>
        <div id="left-content">
        </div>
    </div>
</div> //HTML4 에서 까지 사용했던 div 구조