# Box Model

36개의 포스트
post-thumbnail

box-model / box-sizing

문서상의 요소들을 시각적인 목적을 위해서, 모든 요소를 하나의 "직사각형 박스"로 여기는 모델이다. 모든 박스는 아래 영역들을 갖는다.컨텐츠 영역(Content Area) : 글이나 이미지, 비디오 등 요소의 실제 내용을 포함한다.안쪽여백 영역(Padding Area)

3일 전
·
0개의 댓글
post-thumbnail

Box Model

태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지(요소의 너비가 100%)하는 요소. (왼쪽이나 오른쪽에 다른 요소가 올 수 없음)width, margin, padding 등을 이용해 크기나 위치나 <p>태그 등이 블록 레벨 요소를 만드는 대표적인 태그줄을 차

7일 전
·
0개의 댓글
post-thumbnail

CSS - Box-Model

모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부릅니다.박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분합니다.1\. 내용(conte

2022년 6월 12일
·
0개의 댓글
post-thumbnail

[CSS]레이아웃(display/box model/position)

  display 속성은 웹 페이지에서 요소가 어떻게 보여지는지 나타낸다.  블록 요소는 항상 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다. 기본적으로 블록 속성값을 갖는 <div>, <p>, <h>, <ul>, <

2022년 5월 25일
·
0개의 댓글
post-thumbnail

[section1_웹 개발 기초] HTML, CSS 기초_CSS 기초

📍 CSS는 스타일링을 위한 도구이다. 콘텐츠의 배치와 위치 (레이아웃 디자인), 텍스트를 강조하거나 밑줄을 치는 등, 최소한의 타이포그래피이다 (Typography)콘텐츠를 적당한 위치에 배치하는 레이아웃 디자인은 디자이너가 아니라도 할 수 있어야만 합니다.일반 사

2022년 5월 5일
·
0개의 댓글
post-thumbnail

[TIL] Unit 5. CSS 기초

🌱용어 정리 CSS(Cascading Style Sheets) : 웹 페이지의 스타일 및 레이아웃을 정의하는 스타일시트 언어이자 더 나은 사용자 경험(UX)을 제공하기 위한 도구 (사용자가 HTML문서를 잘 이해할 수 있도록 돕는 역할) UI(User Interfac

2022년 5월 2일
·
0개의 댓글
post-thumbnail

Box Model

모든 HTML 요소는 Box 형태의 영역을 가지고 있다. Box는 Content, Padding, Border, Margin으로 구성된다.

2022년 4월 19일
·
0개의 댓글
post-thumbnail

TIL-CSS(box model)

22.04.18

2022년 4월 18일
·
0개의 댓글

TIL - CSS 특강

각각의 property에 따라 initial 값이 다 다르다 box- model 속성 5대장 widthheightmarginpaddingborder블럭레벨은 한줄에 하나씩만 인라인레벨은 한줄에 여러개 가능 margin : 0 auto;0: 상하 auto:좌우header

2022년 4월 1일
·
0개의 댓글
post-thumbnail

CSS - 2(box model)

박스 모델

2022년 3월 23일
·
0개의 댓글
post-thumbnail

TIL 06___CSS basic 2(박스 모델)

* CSS의 레이아웃을 구성하는 박스 모델에 대해 세부적으로 알아본다. ▶︎ CSS 박스 모델 웹 문서의 내용을 박스 형태로 정의하는 방법이다. 박스 모델에는 마진과 패딩, 테두리 등 박스가 여러 겹 들어 있다. 1. Block level 요소와 Inline le

2021년 11월 5일
·
0개의 댓글
post-thumbnail

Box Model

이미지 출처

2021년 10월 20일
·
0개의 댓글
post-thumbnail

211001_CSS(4) _box-model

content: 콘텐츠가 표시되는 영역 width, height(진짜 내용을 담고 있는 핵심 박스)padding: 콘텐츠와 테두리(border)사이의 여백 (공백 영역)border : padding 과 margin 사이의 테두디 기본값음 0px 이지만 보더 영역이 있다

2021년 10월 1일
·
0개의 댓글
post-thumbnail

[CSS] Box Model

Box Model의 margin, border, padding 영역과 관련된 내용을 다룬다.

2021년 9월 29일
·
0개의 댓글
post-thumbnail

CSS 박스모델, MediaQuery, grid

style 태그 사용style 속성 쓰기 ex) 글자 색을 바꾸고 싶을 때 head내에 css를 도입할 수 있다.위의 태그 의미 : a 즉 링크가 걸려있는 모든 글자는 검정으로 해라 중복된 코드를 단하나의 코드로 표현한다. 즉 중복의 제거 효과color:black

2021년 9월 24일
·
0개의 댓글
post-thumbnail

TIL 30 , Box model

box model

2021년 8월 19일
·
0개의 댓글
post-thumbnail

CSS 03 박스 모델(Box Model)

기본크기 100%, 이에 대한 상대적인 크기 설정해당 글꼴(font)의 기본 크기 1em, 이에 대한 상대적인 크기 설정스크린의 픽셀(pixel)을 기준으로 하는 절대적인 크기를 설정1배 = 1em = 100%높이, 기본 설정값은 auto너비, 기본 설정값은 auto해

2021년 8월 17일
·
0개의 댓글
post-thumbnail

박스 모델

content: 태그 사이의 내용padding: 내용과 보더와의 간격border: 사각 경계선margin: 보더 바깥의 빈 공간width height 기준을 border-box 로 잡는다. (이게 없으면 가로길이 = 2padding + 2border-width + co

2021년 8월 12일
·
0개의 댓글