FRONT/CSS

[Front] CSS Layout

권택현 2020. 6. 12. 17:42

지금까지 html로 Layout을 잡았다. 하지만 CSS로 Layout을 잡을 수 있다.

Display

CSS로 Layout을 수정할 수 있는 속성 중 하나로 사용하는 요소(태그)가 block단위인지 inline단위인지 잘 알고 사용해야 한다.

1.block : 블럭 단위로 영역이 형성되는 레이아웃으로 대표적인 요소로 div와 p가 있다.

2.inline : line혹은 작성한 문자열 단위로 영역이 형성된다.

예를 들어보자

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Layout</title>
</head>
<body>
<div style="color:red">
  이곳은 div영역입니다.
  block단위 요소 입니다.
</div>
<p style="color:blue">
  이곳은 p영역입니다.
  block단위 요소 입니다.
</p>
<span style="color:purple">이곳은 span영역입니다. inline단위 요소입니다.</span>
이곳은 body 영역입니다.
</body>
</html>

이처럼 div와 p는 block 단위의 요소인것을 볼 수 있다. 여백이 남았음에도 불구하고 해당 블럭 밖에 다음 요소가 위치하는것을 볼 수 있다. span은 inline요소이므로 문자열 단위로 영역이 형성되어 다음 문자열이 바로 옆에 위치함을 볼 수 있다.

이러한 속성을 가진 요소들을 수정 해 보면

이러한 block요소들을 제거 해 보자

* {
  border:1px solid blue;
}
div,p{
 display: inline; 
}

span{
  display: block;
}

위 css파일만 적용 시키면 span과 div의 display가 바뀐것을 볼 수 있다.

position

CSS로 영역 말고 위치를 지정해 줄 수 있다.

  1. static : 기본, 쓰지 않아도 자동으로 지정 되어있다.
  2. relative : 가장 상위에 있는 static을 기준으로 위치를 지정할 수 있다.
  3. absolute : static을 제외한 상위 영역을 기준으로 위치를 지정할 수 있다. 상위 영역이 없다면 body를 기준으로 한다.
  4. fixed : 현재 화면의 왼쪽 상단을 기준으로 한다.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Layout</title>
</head>
<body>
<div class="pos1">span1</div>
<div class="pos2">span2</div>
<div style="position:relative">
  <span style="background-color:gray">dfdssdfsjsovist nsovisniostisld</span>
  <div class="pos3">span3</div>
</div>
</body>
</html>
* {
  border:1px solid blue;
}

.pos1{
  position:static;
}

.pos2{
  position:relative;
  top:2px;
  bottom:5px;
  left:5px;
  z-index:1;
}

.pos3{
  position:absolute;
  background-color:red;
  left:2px;
  top:5px;
}

.pos4{
  position:fixed;
  color:blue;
}

이처럼 span2는 span1을 기준으로 마진을 둔 것이고 span3는 상위div를 기준으로 마진을 둔 것인데 그 div가 없다면 body를 기준으로 마진을 두었을 것이다.