1. Position
HTML 코드 작성 시, 작성 순서대로 웹페이지에 나타나게 된다.
HTML 코드 작성 순서와 관계없이 원하는 위치에 요소를 나타내기 위해서는Position이라는 CSS property를 이용하면 된다.
1) 복잡한 레이아웃을 만들어주는 Position property
Position: static, position: relative, position: absolute, position: fixed
(static은 거의 사용하지 않는다고 하여, 나머지 3개에 대해서 정리합니다)
- Position: relative
relative자체는 위치를 이동하는 역할을 하지 않으며,top,right,bottom,leftproperty를 이용하여 위치를 이동시킬 수 있다. 이 4가지 property는 position 속성이 있을 때에만 적용 가능!
.relative {
position: relative;
}
.top-20 {
top: -20px; // 위로 20px 이동(마이너스 값을 주면 위로 올라감)
left: 30px; // 왼쪽에서 30px만큼 떨어짐
}
- Position: absolute
block 요소는 가로크기가 부모 너비 전부를 차지하는데,absolute값을 갖게 되면 내용의 크기만큼만 가로크기가 되고 부모를 기준으로 움직인다.
위에서<p>태그는 block 요소이지만 absolute 값을 가짐으로써 노란색 배경이 내용의 크기만큼만 적용된 것을 확인할 수 있다. 또한 부모의 위치를 기준으로 위치가 지정됨을 알 수 있다.
p {
margin: 0;
background-color: yellow;
}
.absolute {
position: absolute;
}
.right-0 {
right: 0; // 오른쪽으로부터 0만킄 떨어짐
bottom: 0; // 하단으로부터 0만큼 떨어짐
}- Position: fixed
fixed는 말그대로 고정됐다는 의미.absolute는relative를 가진 부모를 필요로 하지만,fixed는 필요로 하지 않는다.
.coupon {
position: fixed; // 스크롤을 내려도 지정된 위치에 고정됨
right: 0; // 브라우저의 오른쪽에서 0만큼 떨어짐
bottom: 0; // 브라우저의 하단에서 0만큼 떨어짐
background-color: red;
color: white;
font-size: 20px;
}2) 예시: position property를 이용해 이미지가 삽입된 header 만들기
header {
position: fixed; // header의 위치 고정
left: 0;
right: 0;
top: 0;
height: 48px;
background-color: rgba(45,45,45,0.95); // rgba는 투명도(opacity) 적용 시 사용
}
img{
position: absolute;
left: 50%; // 부모의 왼쪽에서 50%만큼 이동. 이미지의 왼쪽시작선이 부모의 50% 위치에서 시작되기 때문에 이미지의 중심점이 한가운데가 아님
margin-left:-10px; // 따라서 중심점을 맞추기 위한 margin-left:-10px 추가
}
body{
padding-top: 48px;
}2. CSS 레이아웃
웹페이지에서 레이아웃은 어떤 정보를 페이지의 어떤 영역에 넣느냐에 관한 문제이다.
1) 태그
-
<div>태그
CSS에서 정보 배치 단위의 정의를 위해 널리 사용되는 태그로, 요소를 하나의 그룹으로 묶거나 페이지 구획 정의를 목적으로 이용됨.
<div>생성 후 class나 id를 부여하여 스타일을 적용하게 되는데, id의 우선순위가 높아 id 대신 class를 자주 쓰는 것이 좋다. -
영역구분 태그
<div>태그 외에도<span>,<article>,<details>등 영역을 구분하는 다양한 태그 존재.
참고 링크: 영역구분 태그
2) float 기반 레이아웃
CSS property인 float은 이미지 주변에 텍스트를 감싸기 위한 속성이며, 웹페이지 전체의 레이아웃을 잡을 때에도 중요한 도구
위에서 '사이드바'를 고정시키고 싶은 경우 float: left를 지정하면 main contents에 영향을 받지 않는 사이드바 구현이 가능하다.
-
float의 속성 값 :
left,right,none
float 속성을 가진 요소는 부모가 높이를 인지하지 못해 부모를 벗어나게 된다. -
float 문제 해결 방법
(1) 바깥<div>마지막에 아무 태그나 넣고 clear 속성 적용
-clear: float 요소 옆에 채워지는 요소들이게 적용하는 속성
- clear 속성 적용 시 HTML 코드를 더 입력해야 하는 단점이 있음.(2) 바깥
<div>에overflow: hidden;을 줌
- 주로 많이 사용되는 방법(3) 바깥
<div>를 float 시킴
- 자식의 float 높이를 인지하여 그만큼 높이를 차지하게 된다.
- float이 되어 block 요소의 성질이 없어지게 되고, width를 100% 추가해야 함
3) 레이아웃 전략
레이아웃 설계에는 공식이나 정답이 없으며, 좋은 웹사이트의 개발자 도구를 참고하고 경험을 통해 습득해야 한다.
3. Responsive Web (반응형 웹)
1) 반응형 웹이란?
PC, 스마트폰 등 접속하는 디스플레이 종류에 따라 화면의 크기가 유동적으로 반응하여 디스플레이 크기에 맞게 자동으로 변하는 웹페이지
2) Media Query
반응형 웹을 구현하는 CSS technique으로 특정 조건에서는 어떤 CSS를 적용하라는 규칙을 줄 수 있다.
@media only screen and (max-width: 480px) {
Body {
Font-size: 12px;
}
}
/** 480px보다 작은 화면에서 body 태그 내의 font 크기를 전부 12px로 바꿔라! 라는 규칙 **/
@media 'media 쿼리를 시작하겠다’라는 의미
Only screen 어떤 디바이스에서 적용하는지 나타냄
And (max-width: 480px) media feature. 어느 조건에 아래의 CSS 스타일을 적용할 지 작성
3) SCSS에서 쉽게 관리하기
mediaQuery.scss
$phone: “only screen and (max-width: 768px)”;
$desktop: “screen and (min-width: 769)”;box.css
@import ‘./mediaQuery.scss’;
@ media #{$phone} {
.big-box {
display: none;
}
}
@media #{$phone} {
.big-box {
display: block;
}
}
