# Box Model

41개의 포스트
post-thumbnail

HTML (head, body), tag, Box model 정리 feat.MDN

HTML Basic Knowledge

2023년 4월 6일
·
0개의 댓글
·
post-thumbnail

CSS 기초 (박스 모델)

🤔 Box-model(박스 모델)이란? 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델 이라고 한다. 박스 모델은 HTML 구성 요소를 패딩(padding), 테두리(border), 마진(margin), 컨텐츠(content)로 구분한다.요소

2023년 3월 14일
·
0개의 댓글
·
post-thumbnail

프론트엔드 복습 정리6 : CSS Box model

css에서 모든 부분은 박스로 형태로 구분한다.content가 있고height: 높이width: 너비border: 컨텐츠를 둘러싸고 있는 테두리. 모서리를 둥글게 할수도 있다.border-width: 테두리 두께border-color: 테두리 색상border-style

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

CSS 기초 정리 - 2

Box Model, Box-sizing, Display

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

[2022.09.29(Th)] CSS - Basics (2)

A website is made up of many different kinds of boxes which surrounds each element that is created by HTML.The most common type of box is a div.When a

2022년 9월 29일
·
0개의 댓글
·

[CSS] CSS Layout의 모든 것

absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있습니다.relative: 원래 있던 위치를 기준으로 좌표를 지정합니다.fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정합니다.좌표를 지정 해주기 위해서는 left, right, top

2022년 9월 20일
·
0개의 댓글
·

box-Model

CSS box모델에 대한 정리

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

모르면 곤란한 box-sizing

😲 모르면 큰 코 다치는 box-sizing

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

box-model / box-sizing

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

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

Box Model

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

2022년 6월 30일
·
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

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개의 댓글
·