[CSS] 박스모델

2020. 11. 25. 20:58· 프로그래밍언어/CSS

각 태그들의 부피감

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS 박스모델</title>
  <style>
    /* 
    block level element
    */
    h1{
      border-width: 5px;
      border-color: red;
      border-style: solid;
    }
    /*
    inline element
    */
    a{
      border-width: 5px;
      border-color: red;
      border-style: solid;
    }
  </style>
</head>
<body>
  <h1>CSS 박스모델</h1>
모든 HTML 요소는 상자로 간주 할 수 있습니다. CSS에서 
<a href="https://www.w3schools.com/css/css_boxmodel.asp">박스모델</a>이란 
디자인과 레이아웃을 말할 때 사용합니다. CSS 상자 모델은 기본적으로 모든 HTML 요소를 감싸는 상자입니다. 
여백, 테두리, 패딩 및 실제 콘텐츠로 구성됩니다.
</body>
</html>

태그라는 같은 문법이지만 웹페이지에서 차지하는 자리가 다른 이유

- block level element (화면 전체를 쓴다.)

<h1> 제목 태그는 다른 콘텐츠와 같은 라인을 사용하지 않고 줄 바꿈이 된다.

 

- inline element (화면 부분을 쓴다.)

<a> 링크태그는 본인 콘텐츠의 크기만큼만 자리를 차지하고 다른 콘텐츠와 같은 라인에 존재한다.

 

- 각 태그의 종류에 따라 특성에 맞게 기본값이 설정 돼있다. 하지만 기본 설정은 'display' 속성을 통해 바꿀 수 있다.

  * 줄 전체 사용 display:block; 

  * 콘텐츠 값만큼 사용 display:inline; 

  * 화면에서 보이지 않음 display:none;

​

각 태그가 차지하는 자리의 부피감 알아보기 

- 테두리를 만드는 속성인 'border'를 사용해서 테두리를 만들어 본다. 이때 테두리의 두께, 색, 선을 다 선택해 줘야 한다.

  * 테두리 두께 border-width: 5px; 

  * 테두리 색 border-color: red; 

  * 테두리 선 스타일 border-style: solid; | dotted; | dashed; | double; | groove; | ridge; | inset; | outset;

 

중복되는 코드 지우는 법

  <style>
    h1, a{
      border:5px solid red;
    }
  </style>

- 중복되는 코드는 쉼표를 통해 지우자(선택자, 선택자{ } ) 

- 중복되는 속성도 쉼표를 통해 지우자(속성:속성값, 속성값, 속성값;) 

- border 속성값은 보통 width, style, color순으로사용한다.

 

박스모델

h1{
  border:5px solid red;
  padding:20px;
  margin:20px;
  width:200px;
}

- 박스모델을 통해서 여백, 테두리, 패딩, 및 실제 콘텐츠가 차지하고 있는 부피를 조절 할 수 있다.

- 'width'속성을 통해 태그의 콘텐츠가 차지하고는 있는 기본 설정 값을 조절 할 수 있다.

  (h1은 block level element인데 200px만큼으로 줄였다.)

 

웹페이지 검사

- 웹페이지 검사 창 : 웹페이지 우클릭 - 검사(Ctrl + Shift + i)

- 웹페이지에서 각 태그가 가지고 있는 element(실제 콘텐츠), padding(테두리 안 쪽 여백), border(테두리), margin(테두리 바깥 쪽 여백)을 눈으로 확인 할 수 있다.

 

박스모델 활용

<head>
  <meta charset="utf-8">
  <title>CSS 박스모델</title>
  <style>
  body{
    margin: 0;
  }
    h1{
      text-align: center;
      border-bottom:1px solid gray;
      margin:0;
      padding:20px;
    }
    ul{
      border-right: 1px solid gray;
      width: 230px;
      margin:0;
      padding:20px;
    }
  </style>
</head>
<body>
  <h1>CSS 박스모델</h1>
  <ul>
    <li style="color:red">CSS 박스모델</li>
    <li>element(실체 콘텐츠)</li>
    <li>padding(테두리 안 쪽 여백)</li>
    <li>boder(테두리)</li>
    <li>margin(테두리 바깥 쪽 여백)</li>
  </ul>
  <p>모든 HTML 요소는 상자로 간주 할 수 있습니다. CSS에서
<a href="https://www.w3schools.com/css/css_boxmodel.asp">박스모델</a>이란
디자인과 레이아웃을 말할 때 사용합니다. CSS 상자 모델은 기본적으로 모든 HTML 요소를 감싸는 상자입니다.
여백, 테두리, 패딩 및 실제 콘텐츠로 구성됩니다.</p>
</body>

-'border' 속성은 테두리의 특정 방향만 따로 설정할 수도 있다.

  * 테두리 위 border-top

  * 테두리 아래 border-bottom

  * 테두리 왼쪽 border-left

  * 테두리 오른쪽 border-right

 

- 테두리와 박스모델의 각 크기들을 조절해서 웹페이지를 디자인 할 수 있다.

'프로그래밍언어 > CSS' 카테고리의 다른 글

[CSS] Media query(미디어 쿼리)  (0) 2020.12.02
[CSS] Grid(그리드)  (0) 2020.12.01
[CSS] 선택자들  (0) 2020.11.21
[CSS] Property(속성) 검색 하는 법(+폰트 크기 속성, 글 정렬 속성)  (0) 2020.11.20
[CSS] CSS의 기본 문법  (0) 2020.11.20
'프로그래밍언어/CSS' 카테고리의 다른 글
  • [CSS] Media query(미디어 쿼리)
  • [CSS] Grid(그리드)
  • [CSS] 선택자들
  • [CSS] Property(속성) 검색 하는 법(+폰트 크기 속성, 글 정렬 속성)
개발원슝이
개발원슝이
꾸준히 개발공부를 합니다.
개발원슝이
꾸준히 개발슝이
개발원슝이
전체
오늘
어제
  • ALL (236)
    • 프로젝트 (34)
      • clone coding (19)
      • mini project (5)
      • Team project(with KIC) (10)
    • 문제 (37)
      • 백준 (7)
      • 프로그래머스 (14)
      • 정보처리기사실기 (16)
    • 설치 (9)
    • 개발 기초 (13)
    • 프로그래밍언어 (119)
      • HTML (16)
      • CSS (17)
      • JavaScript (17)
      • JAVA (13)
      • JSP (10)
      • Python (22)
      • C언어 (24)
    • 프레임워크 (6)
      • Spring (3)
      • Django (3)
    • DB (2)
      • MySQL (2)
    • AWS (1)
    • 오류 (2)
    • 이것저것 (6)
    • 전공자 개발 (2)
    • 비전공자 개발 (5)

블로그 메뉴

  • 네이버블로그(강의노트)
  • GitHub
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 따배씨
  • 홍정모교수님
  • javascript
  • 코딩테스트
  • 홍정모의 따라하며 배우는 C언어
  • 백준
  • 인프런
  • 생활코딩
  • 점프 투 파이썬
  • 파이썬공부

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
개발원슝이
[CSS] 박스모델
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.