본문 바로가기
LEARN/HTML | CSS

[부스트코스] 7 CSS 레이아웃

by 아이엠제니 2022. 3. 21.

 

 

7. 레이아웃

1) 속성-display

DISPLAY

display: none;
display: inline;
display: block;
display: inline-block;
display: list-item;
display: flex;
display: inline-flex;
display: table;
display: table-cell;
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .inline {
        width: 100px; /* 적용 안 됨 */
        height: 100px; /* 적용 안 됨 */
        margin: 10px; /* 좌우만 적용 */
        padding: 10px; /* 좌우만 적용 */
        border: 10px solid red; /* 좌우만 적용 */
        background: pink;
      }
      .block {
        width: 100px;
        height: 100px;
        margin: 10px;
        padding: 10px;
        border: 10px solid red;
        background: pink;
      }
      .inlineblock {
        width: 100px;
        height: 100px;
        margin: 10px;
        padding: 10px;
        border: 10px solid red;
        background: pink;
      }
    </style>
  </head>
  <body>
    <div>
      <div style="display: inline" class="inline">box</div>
      <div style="display: block" class="block">box</div>
      <div style="display: inline-block" class="inlineblock">box</div>
    </div>
  </body>
</html>

inline-box는 배치는 인라인처럼 되고, 속성은 box 속성

 

 

 

 

2) 속성-visibility

요소를 어떻게 숨길 것인지 결정

visibility: visible|hidden|collapse|initial|inherit;

visibility: visible; /* 보임 기본값 */
visibility: hidden; /* 숨김, 자신의 박스 영역은 유지 / 공간 차지(margin까지 모두 포함) */
visibility: collapse; /* 셀간의 경계를 무시하고 숨김 (박스 영역 없음, 테이블의 행과 열 요소) */
https://www.w3schools.com/cssref/playit.asp?filename=playcss_visibility_collapse

 

 

 

3) 속성-float

float: none|left|right|initial|inherit;

float: none; /* 기본값 */
float: left;
float: right;
  • 요소를 보통의 흐름에서 벗어나 띄어지게 함
  • 주변 텍스트나 인라인요소가 주위를 감싸는 특징 있음
  • 대부분 요소의 display 값을 block으로 변경함 (display 값 변경 예외 값 inline-table, flex 등)
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .container {
        width: 400px;
        padding: 15px;
        border: 1px dashed #aaa;
      }
      .container .box {
        width: 100px;
        height: 100px;
      }
      .container div:nth-child(1) {
        background-color: green;
      }
      .container div:nth-child(2) {
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <h2>요소를 보통의 흐름에서 벗어나 띄어지게 함</h2>
    <div class="container">
      <div style="float: left">box1</div>
      <div style="float: left">box2</div>
    </div>

    <h2>주변 텍스트나 인라인요소가 주위를 감싸는 특징이 있음</h2>
    <div class="container">
      <div style="float: left">box1</div>
      <div style="float: right">box2</div>
      <p>
        CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS
        CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS
      </p>
    </div>

    <h2>대부분의 요소에 display 값을 block으로 변경함</h2>
    <div class="container">
      <div style="" class="box">box1</div>
      <span style="float: left; background: skyblue" class="box">box2</span>
    </div>
  </body>
</html>

float:left / float:left
float:left / float:right
float: left

 

 

 

4) 속성-clear

floating 된 요소의 영향에서 벗어나 다음 행으로 이동

clear: none; /* 기본값 */
clear: left; /* 왼쪽 요소 float의 영향에서 벗어남 */
clear: right; /* 오른쪽 요소 float의 영향에서 벗어남 */
clear: both; /* 양쪽 다 벗어남 */

block-level 요소만 적용 가능

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .container {
        width: 400px;
        padding: 15px;
        border: 1px dashed #aaa;
      }
      .container div {
        width: 100px;
        height: 100px;
      }
      .box {
        width: 100px;
        height: 100px;
      }
      .container div:nth-child(1) {
        background-color: green;
      }
      .container div:nth-child(2) {
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <h2>요소를 보통의 흐름에서 벗어나 띄어지게 함</h2>
    <div class="container">
      <div style="float: left">box1</div>
      <div style="float: left">box2</div>
      <span class="" style="display: block; clear: both"></span>
    </div>

    <h2 style="">주변 텍스트나 인라인요소가 주위를 감싸는 특징이 있음</h2>
    <div class="container">
      <div style="float: left">box1</div>
      <div style="float: right">box2</div>
      <p>
        CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS
        CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS
      </p>
    </div>

    <h2>대부분의 요소에 display 값을 block으로 변경함</h2>
    <div class="container">
      <div style="" class="box">box1</div>
      <span style="float: left; background: skyblue" class="box">box2</span>
    </div>
  </body>
</html>

 

clear 적용 전/후

 

https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_clear

 

 

 

5) 속성-position

POSITION & OFFSET

요소의 위치를 원하는 곳으로 이동시킬 때 사용

position: static|relative|absolute|fixed|sticky|initial|inherit;

position: static; /* 기본값, 정상흐름 대로 배열, 좌표설정 안됨 */
position: relative; /* 상대위치, 정상흐름대로 배열, 주변요소들에 영향을 주지 않으면서 offset 이동*/
position: absolute; /* 절대위치, 정상흐름에서 벗어나 offset 이동, 부모가 상대, 절대위치를 가지면 offset 값의 시작점이 됨 */ */
position: fixed; /* 고정위치, 뷰포트 상에서 offset 이동, 부모위치에 영향 안받음 */


top/bottom/left/right: auto|length|initial|inherit;
top: 50%;
left: 10px;
bottom: -10px;
right: auto;
https://developer.mozilla.org/en-US/docs/Web/CSS/position

 

 

 

6) 속성-z-index

박스가 겹치는 순서를 지정

z-index: auto | number | initial | inherit

z-index: 1;
  • position 값이 static이 아닌 경우 지정 가능
  • 순서 값이 없을 경우 생성순서(코드상 순서)에 따라 쌓임
  • 부모가 z-index 값이 있을 경우 부모 안에서만 의미있음
  • 큰 값이 가장 위쪽. 음수 사용 가능
https://codepen.io/yongwon/pen/dXwyQq

 

 

 

 7) HTMl/CSS 유효성 검사

HTML/CSS 코드를 작성한 후에는 항상 유효성 테스트를 해야 한다.

유효성 검사를 통해 마크업 문법상 에러가 없는지, 표준에 맞게 작성되었는지 알 수 있다.

그리고 사용성과 접근성, SEO(검색엔진) 최적화 개선에도 도움이 된다.

유효성 검사 할 수 있는 곳
https://validator.w3.org/

 

 

 

 

 

 

부스트코스 [비전공자를 위한 HTML/CSS] 강의 공부 기록
300x250

'LEARN > HTML | CSS' 카테고리의 다른 글

[HTML] tag 태그  (0) 2022.12.25
[부스트코스] 8 미디어 쿼리  (0) 2022.03.22
[부스트코스] 6-2 CSS 폰트, 텍스트  (0) 2022.03.20
[부스트코스] 6-1 CSS 폰트, 텍스트  (0) 2022.03.19
[부스트코스] 5-2 CSS 단위, 배경, 박스모델  (0) 2022.03.18

관련글

티스토리툴바