1.position(CSS)
1-1. position속성
CSS에서 position속성은 HTML문서 상에서 요소가 배치되는 방식을 결정한다.
position속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right속성과 함께 사용.
1-2. position : static(기본값)
- position속성을 별도로 지정해지 않으면 기보값인 static이 적용된다.
- body기준으로 HTML상에서 원래 있어야하는 위치에 배치된다.
- top, left, bottom, right속성값이 적용이 안된다.
1-3. position : relative(자기자신을 기준으로)
- position속성을 relative로 설정하면 요소를 원래 위치를 기준으로 상대적으로 배치해준다.
- top, bottom, left, right 속성을 이용해서, 요소가 원래 위치에 있을 때의 상하좌우로 부터 지정해준 값만큼 이동시켜 배치할 수 있다.
1-4. position : absolute(부모 요소를 기준으로)
- position속성을 absolute로 지정하면 가장 가까운 특정 부모 요소를 기준으로 위치를 배치한다.
- 부모에 부여진 속성이 없을 경우, body를 기준으로 정렬된다.
- absolute속을 사용하려면 부모 요소에 특정한 position속성이 적용되어 있어야 한다.
1-5. position : fixed(뷰포트를 기준으로)
- 요소의 위치를 뷰포트(브라우저 화면)을 기준으로 고정할 수 있다.
- position : fixed를 적용한 요소는 다른 요소보다 떠(부유)있는 상태가된다.
2. 미디어 쿼리(MEdia Query)
미디어 쿼리는 CSS에서 어떤 스타일을 선태적으로 적용하고 싶을 때 사용한다.(if조건문과 유사)
@media 키워드로 시작
@media(조건){
스타일
}- 뷰포트 너비에 따라 다른 스타일을 적용하기 위해 자주 사용된다.
- 크게 screen과 print로 나누어진다.
screen: 일반적으로 모니터를 의미. PC,태블릿,스마트폰까지 의미한다.
print: 만들어진 웹사이트를 프린트 기기를 이용해 프린트 하는 것이다.
3. 반응형(レスポンシブデザイン)
반응형 웹이란...
하나의 웹사이트에서 PC, 스마트폰, 태블릿 등 접속하는 디스플레이 종류에따라 화면 크기와 디자인이 바뀌게 만드는 기법.
