HTML 코드 작성 시, 작성 순서대로 웹페이지에 나타나게 된다.
HTML 코드 작성 순서와 관계없이 원하는 위치에 요소를 나타내기 위해서는Position
이라는 CSS property를 이용하면 된다.
Position: static
, position: relative
, position: absolute
, position: fixed
(static은 거의 사용하지 않는다고 하여, 나머지 3개에 대해서 정리합니다)
relative
자체는 위치를 이동하는 역할을 하지 않으며, top
, right
, bottom
, left
property를 이용하여 위치를 이동시킬 수 있다. 이 4가지 property는 position 속성이 있을 때에만 적용 가능!.relative {
position: relative;
}
.top-20 {
top: -20px; // 위로 20px 이동(마이너스 값을 주면 위로 올라감)
left: 30px; // 왼쪽에서 30px만큼 떨어짐
}
absolute
값을 갖게 되면 내용의 크기만큼만 가로크기가 되고 부모를 기준으로 움직인다.<p>
태그는 block 요소이지만 absolute 값을 가짐으로써 노란색 배경이 내용의 크기만큼만 적용된 것을 확인할 수 있다. 또한 부모의 위치를 기준으로 위치가 지정됨을 알 수 있다.p {
margin: 0;
background-color: yellow;
}
.absolute {
position: absolute;
}
.right-0 {
right: 0; // 오른쪽으로부터 0만킄 떨어짐
bottom: 0; // 하단으로부터 0만큼 떨어짐
}
fixed
는 말그대로 고정됐다는 의미. absolute
는 relative
를 가진 부모를 필요로 하지만, fixed
는 필요로 하지 않는다..coupon {
position: fixed; // 스크롤을 내려도 지정된 위치에 고정됨
right: 0; // 브라우저의 오른쪽에서 0만큼 떨어짐
bottom: 0; // 브라우저의 하단에서 0만큼 떨어짐
background-color: red;
color: white;
font-size: 20px;
}
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;
}
웹페이지에서 레이아웃은 어떤 정보를 페이지의 어떤 영역에 넣느냐에 관한 문제이다.
<div>
태그
CSS에서 정보 배치 단위의 정의를 위해 널리 사용되는 태그로, 요소를 하나의 그룹으로 묶거나 페이지 구획 정의를 목적으로 이용됨.
<div>
생성 후 class나 id를 부여하여 스타일을 적용하게 되는데, id의 우선순위가 높아 id 대신 class를 자주 쓰는 것이 좋다.
영역구분 태그
<div>
태그 외에도 <span>
, <article>
, <details>
등 영역을 구분하는 다양한 태그 존재.
참고 링크: 영역구분 태그
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% 추가해야 함
레이아웃 설계에는 공식이나 정답이 없으며, 좋은 웹사이트의 개발자 도구를 참고하고 경험을 통해 습득해야 한다.
PC, 스마트폰 등 접속하는 디스플레이 종류에 따라 화면의 크기가 유동적으로 반응하여 디스플레이 크기에 맞게 자동으로 변하는 웹페이지
반응형 웹을 구현하는 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 스타일을 적용할 지 작성
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;
}
}