Layout의 모든 것

June·2021년 12월 29일

CSS layout 위코드

wecode TIL

목록 보기

5/20

1. display

1.1 block

기본 설정이 width:100%이며, 항상 새로운 라인에서 시작한다.
width, height, margin, padding 설정이 가능하다.

dt, dd, ul, li, ol, dl, div, p, form, h1, h2, h3, h4, h5, h6

1.2 inline

content의 폭만큼 너비를 차지한다.
상,하 여백은 line-height로 지정한다.
width, height, margin, margin-top,margin-bottom 속성을 사용할수가 없다.

span, a, img, button, br, input, script, textarea, select

inline 레벨 안에 block 레벨을 넣을 수 없지만, block 안에 inline은 포함할 수 있다. (inline의 폭이 content의 폭만큼 차지하기 때문에)

1.3 inline-block 레벨 요소

inline 요소와 마찬가지로 줄을 바꾸지 않고 content 너비만큼 가로폭을 차지한다.
width, height, margin, padding이 모두 사용 가능하다.

2.position

position 프로퍼티는 요소의 위치를 정해주며 top, bottom, left, right 로 위치를 설정해줄수 있다.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="outer">
        <div class="box">
            <div class="inner inner1">inner1</div>
            <div class="inner inner2">inner2</div>
        </div>
    </div>
</body>

CSS

.outer {
    width: 500px;
    height: 500px;
    background-color: blanchedalmond;
}

.box {
    width: 400px;
    height: 400px;
    background-color:rgb(255, 251, 240);
}

.box .inner1{
    color: white;
    width: 200px;
    height: 200px;
    background-color: cadetblue;
}

.box .inner2{
    color: white;
    width: 200px;
    height: 200px;
    background-color: coral;
}

결과물

2.1 static(기본위치)

static 사용 시 top, right, bottom, left 속성값에 영향을 받지 않는다.
단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식이다.
static은 기본 값으로 차례대로 왼쪽에서 오른쪽, 위에서 아래로 요소가 그려진다.

#### CSS ``` .box .inner1{ color: white; width: 200px; height: 200px; background-color: cadetblue; position: static; top: 30px; left: 100px; } ``` #### 결과물

이전과 비교했을 때, 변화가 없는 걸 확인할 수 있다.

2.2 relative(상대위치)

~~이름과 달리~~ relative는 자기의 원래 위치를 기준으로 움직인다. 즉, 항상 static을 기준으로 top,right,bottom,left의 속성 값에 따라 오프셋(원래 위치에서 이동한 거리)을 적용한다.
'top,bottom,left,right' 사용이 가능하다.
여기서 오프셋(원래 위치에서 이동한 거리)은 다른 요소에는 영향을 주지 않는다.

CSS

.box .inner1{
    color: white;
    width: 200px;
    height: 200px;
    background-color: cadetblue;
    position: relative;
    top: 30px;
    left: 100px;
}

결과물

이전과 비교했을 때, inner1은 기본 위치를 기준으로 위로 30px, 왼쪽으로 100px 간격을 두고 있다. inner2의 위치는 변함이 없다.

2.3 absolute(절대위치)

~~이름과 달리~~ 가까운 곳에 위치한 조상 요소에 상대적으로 위치가 지정된다.
relative,absolute,fixed 로 지정된 가장 가까운 조상요소를 기준으로한다.
조상이 없거나 static 인 경우 body를 기준으로 한다.
원래 있던 자리를 유지하지 않는다. inner2가 inner1의 자리로 올라온다.
기존 요소가 존재할 경우 덮어 씌운다.

CSS

.box .inner1{
    color: white;
    width: 200px;
    height: 200px;
    background-color: cadetblue;
    position: absolute;
    top: 30px;
    left: 100px;
}

결과물

inner1이 box를 기준으로 왼쪽으로 100px, 위로 30px 간격을 두게 되면서, inner2가 자기 자리를 유지하지 않고 위로 올라간 걸 볼 수 있다.

2.4 fixed(고정위치)

부모,조상 상관없이 viewport 기준으로 좌표를 이동한다. 스크롤을 하더라도 항상 같은 자리에 위치한다.
fixed 는 늘 같은 곳에 위치하기 때문에, 스크롤을 내려도 항상 그 자리에 위치한다.
relative, absolute 와 마찬가지로 top,right,bottom,left의 속성들이 사용된다.

CSS

// 스크롤할 때 변화를 보기 위해 outer의 height를 1000px로 변경해주었습니다. 

.box .inner1{
    color: white;
    width: 200px;
    height: 200px;
    background-color: cadetblue;
    position: fixed;
    top: 30px;
    left: 100px;
}