차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:css:css_note:css와_박스모델 [2021/03/02 13:28]
emblim98 만듦
+++ wiki:css:css_note:css와_박스모델 [2023/01/13 18:44] (현재)
@@ 줄 1: / 줄 1: @@
-====== Document ======
+====== CSS Box Model ======
 <WRAP left notice 80%>
   * description : CSS와 박스 모델
@@ 줄 9: / 줄 9: @@
 \\
 ====Source of the article====
-  * "Do it! HTML5 + CSS3 웹표준의 정석" / 이지스 퍼블리싱 / 고경희 지음 /
+  * "Do it! HTML5 + CSS3 웹표준의 정석" / 이지스 퍼블리싱 / 고경희 지음 / 개정1판 9쇄 발행 2019년 6월 3일 /
+  * [[https://www.w3schools.com/css/css_boxmodel.asp|CSS Box Model]]
 \\
+  * 모든 HTML요소들은 박스로 여겨질 수 있다.
+  * CSS에서, 디자인과 레이아웃을 언급할 때 **"박스모델 (box model)"**이라는 용어가 사용된다.
+  * CSS 박스모델은 기본적으로 모든 HTML요소들을 감싸는 박스이다. CSS 박스모델은 마진 (margins), 보더 (borders), 패딩 (padding), 그리고 실제 콘텐츠로 구성된다.
 \\
-====HTML이란?====
+====박스모델(box model)-박스 형태의 콘텐츠====
-   * HTML은 Hyper Text Markup Language, 하이퍼 텍스트 마크업 언어이다.
+{{:wiki:css:css_note:css_box_model.png?400|}}
-   * HTML은 웹 페이지를 만들기 위한 표준 마크업 언어이다.
+  * 콘텐츠 (Content) : 박스모델의 콘텐츠로서 텍스트와 이미지가 나타나는 영역
-   * HTML은 웹 페이지의 구조를 나타낸다.
+  * 패딩 (Padding) : 콘텐츠 주변 영역을 나타내고, 기본속성은 투명 (transparent), 테두리와 내용 사이의 여백.
-   * HTML은 일련의 요소들로 구성된다.
+  * 보더 (Border) : 콘텐츠와 패딩의 주변 영역
-   * HTML요소들은 브라우저에게 내용을 보여주는 방법을 알려준다.
+  * 마진 (margin) : 여러 박스 모델 사이의 여백, 요소들 사이의 여백.
-   * HTML요소들은 제목, 문장, 링크와 같은 내용 부분들을 구별하여 나타낸다.
-====A Simple HTML Document====
-<code>
-<!DOCTYPE html>                  // <!DOCTYPE html> 선언은 문서가 HTML5 문서라는 것을 정의한다
-<html>                           // <html>요소는 HTML 페이지의 루트 요소 (root element)이다
-<head>                           // <head>요소는 HTML 페이지에 관한 메타 (meta) 정보를 가진다.
-  <title>Page Title</title>      // 브라우저의 타이틀 바 도는 페이지의 탭에서 보여지는 HTML 페이지의 제목을 명시한다.
-</head>
-<body>                           // <body>요소는 문서의 body를 정의하고, 제목, 문장, 이미지, 하이퍼링크, 테이블, 목록 등과 같은 모든 시각적 내용에 대한 container이다.
-  <h1>My First Heading</h1>      // <h1>요소는 대제목을 정의한다.
-  <p>My first paragraph.</P>     // <p>요소는 문장을 정의한다.
-</body>
-</html>
-</code>
-====HTML Element====
-HTML요소는 시작태그 (start tag), 내용 (some content), 종료태그 (end tag)로 정의된다.\\
-===<태그 명>내용</태그 명>===
-HTML요소는 시작태그에서부터 종료태그까지의 모든 것을 의미한다.\\
-===<h1>My First Heading</h1>===
-===<p>My first paragraph</p>===
-^  Start tag  ^  Element content  ^  End tag  ^
-|  <h1>      |  My First Heading   |  </h1>   |
-|  <p>       |  My first paragraph  |  </p>   |
-|  <br>      |  none                |  none   |
 \\
-☝일부 HTML요소들은 <br>요소처럼 내용이 없다. 이러한 요소들은 **비어있는 요소들 (empty elements)**라고 불리고, 종료태그가 없다.
+====콘텐츠 영역의 크기====
+박스모델에서 콘텐츠 영역의 크기를 지정할 때는 너비를 지정하는 width속성과 높이를 지정하는 height속성을 사용한다.
+^  속성 값  ^ 설명                                              |
+^  <크기>  | 너비나 높이 값을 px(픽셀)이나 cm(센티미터) 같은 단위와 함께 수치로 지정한다  |
+^  <백분율>  | 박스 모델을 포함하는 부모 요소를 기준으로 너비나 높이 값을 백분율(%)로 지정한다  |
+^  auto  | 박스 모델의 너비와 높이 값이 콘텐츠 양에 따라 자동으로 결정된다. 기본 값이다.   |
+=====CSS Layout - The display Property=====
+**''display''**속성은 레이아웃을 조절하는 것에서 가장 중요한 CSS 속성이다.
+\\
+====The display Property====
+  * **''display''**속성은 요소의 표시 여부와 표시 방법을 지정한다.
+  * 모든 HTML 요소는 요소의 타입이 무엇인지에 따라 기본 display 값을 가지고 있다. 대부분 요소들의 기본 display값은 **''block''** 또는 **''inline''**이다.
+\\
+====Block-level Elements (블록 레벨 요소)====
+  * 기본 너비 값: 100% --> 블록 레벨 요소는 항상 새 줄에서 시작하고 가능한 전체 너비를 차지한다.(최대한 우측, 좌측으로 펼쳐진다)
+  * 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소이다.
+  * 한 줄을 차지한다는 것은 해당 요소의 너비가 100%이라는 의미이다.
+  * 따라서 한 줄에 하나만 배치
+  * 너비 값, 높이 값을 가질 수 있다. 상하마진을 가질 수 있다.
+\\
+====Inline Elements (인라인 요소)====
+  * 기본 너비 값 : 콘텐츠의 너비 값
+  * 줄을 차지하지 않는 요소이다 --> 한 줄에 여러 개를 배치할 수 있다.
+  * 한 줄에 여러 개의 인라인 레벨 요소를 표시할 수 있다.
+  * 크기 값을 가질 수  없다. 상하마진을 가질 수 없다.
+\\
+====Inline Block Elements (인라인 블록 요소)====
+  * 요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정하고 싶을 때 사용
+  * 기본 너비 값 : 콘텐츠의 너비 값
+  * 한 줄에 여러 개 배치
+  * 크기 값, 상하마진을 가질 수 있다.
+\\
+===블록 레벨 태그 vs 인라인 레벨 태그===
+^  종류              ^  해당 태그  ^
+^  블록 레벨 태그    | <p>, <h1>~<h6>, <ul>, <ol>, <div>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address>  |
+^  인라인 레벨 태그  | <img>, <object>, <br>, <sub>, <sup>, <span>, <input>, <textarea>, <label>, <button>            |
+\\
+==== ====
+  * 블록 레벨, 인라인 레벨, 인라인 블록 레벨 비교 사진 올려야 한다.
 {{tag>오션 CSS}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구