# CSS를 활용하는데 가장 중요한 부분은 display와 position 입니다.
# content와 box들을 어떻게 배치하고, 보여주는지에 따라 웹 페이지의 가독성이 달라지기 때문입니다.
# 같은 content라도 가독성이 좋은 사이트가 더 많은 선택을 받는 것은 당연한 일입니다.
# 이번에 배울 내용은 display와 position을 이해해 웹페이지의 가독성을 높이는 방법입니다.
# 비전공자가 이해한 CSS
1. Display
display 속성에는 inline, inline-block, block 이 세가지 속성값이 존재합니다.
각각 어떻게 다른지 살펴보겠습니다.
1) inline
inline은 이미 선헌한 width와 height을 무시하고 content 자체만을 꾸며주는 것을 말합니다.
content의 크기에 맞춰서 변경됩니다. content의 정렬 방향은 가로입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>1234567</div>
<div>A</div>
<div>X</div>
</body>
</html>CSS
div, span {
width: 80px;
height: 80px;
margin:20px;
}
div {
background: green;
display: inline;
color: white;
}
2) inline-block
inline block은 말 그대로 한 줄에 inline처럼 여러 박스를 넣고, block처럼 content의 사이즈와 상관없이 정의한 내용대로 크기를 설정하는 것을 말합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>div, span {
width: 80px;
height: 80px;
margin:20px;
}
div {
background: red;
display: inline-block;
}
3) block
block은 정의한 내용대로 크기를 설정하고 한 줄에 하나의 content가 들어가도록 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>div, span {
width: 80px;
height: 80px;
margin:20px;
}
div {
background: green;
display: block;
}
2. Position
position은 relative, absolute 등의 속성값을 이용해 원하는 위치에 박스를 이동시킬 수 있습니다.
아래의 html 을 기준으로 relative, absolute, fixed, stickey 등을 확인해보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<article class="box">
<div>1</div>
<div>2</div>
<div class="unique">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</article>
</body>
</html>
1) relative
relative 속성값은 원래 있어야 하는 위치에서 top, left, right, bottom 속성으로 위치를 이동시킬 수 있습니다.
top: 20px; left: 20px은 각각 위에서 아래로 20px 이동, 왼쪽에서 오른쪽으로 20px 이동하라는 의미입니다.
article {
background: yellow;
}
div, span {
width: 80px;
height: 80px;
margin:20px;
}
div {
background: green;
display: block;
color: white;
font-weight: bold;
text-align: center;
}
.unique {
background: red;
top: 20px;
left: 20px;
position: relative;
}
2) absolute
absolute는 아이템이 담겨있는 상자 안에서 옮겨가는 것을 의미합니다. 제일 위에 있는 박스가 "box"이기 때문에 그것을 기준으로 이동합니다.
article {
background: yellow;
top: 20px;
left: 20px;
position: relative;
}
div, span {
width: 80px;
height: 80px;
margin:20px;
}
div {
background: green;
display: block;
color: white;
font-weight: bold;
text-align: center;
}
.unique {
background: red;
top: 20px;
left: 20px;
position: absolute;
}
3) fixed
fixed는 상자 안에서 완전히 벗어나 윈도우 안에서 움직이는 것을 말합니다.
4) sticky
sticky는 원래 있던 자리를 유지하지만 scrolling을 해도 그 자리를 고정값으로 붙어있는 것을 말합니다.
# 위의 내용은 Youtube 드림코딩 by 엘리 를 참고해서 작성
- 위 유투브는 도움이 되는 내용의 영상이 많습니다. 구독하시고 유용한 정보를 많이 얻는 것도 좋습니다.
# CSS reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
# CSS reference: https://www.w3schools.com/cssref/
# CSS 작성 연습 사이트: Jsbin.com
# CSS 브라우저 호환성 검토: caniuse.com
'FrontEnd > CSS' 카테고리의 다른 글
| #6. CSS Reset 사용방법 (0) | 2021.11.02 |
|---|---|
| #5. CSS에서 색깔을 변수로 사용하는 방법 (0) | 2021.07.27 |
| #4. CSS FlexBox(Flexible Box module) 사용법 (0) | 2021.07.23 |
| #3. CSS "100%" vs "100vh" 의 차이점 (0) | 2021.07.22 |
| #1. CSS 정의 및 selector 사용법 (0) | 2021.07.19 |
