# Box Model
box-model / box-sizing
문서상의 요소들을 시각적인 목적을 위해서, 모든 요소를 하나의 "직사각형 박스"로 여기는 모델이다. 모든 박스는 아래 영역들을 갖는다.컨텐츠 영역(Content Area) : 글이나 이미지, 비디오 등 요소의 실제 내용을 포함한다.안쪽여백 영역(Padding Area)
Box Model
태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지(요소의 너비가 100%)하는 요소. (왼쪽이나 오른쪽에 다른 요소가 올 수 없음)width, margin, padding 등을 이용해 크기나 위치나 <p>태그 등이 블록 레벨 요소를 만드는 대표적인 태그줄을 차
CSS - Box-Model
모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부릅니다.박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분합니다.1\. 내용(conte
[CSS]레이아웃(display/box model/position)
display 속성은 웹 페이지에서 요소가 어떻게 보여지는지 나타낸다. 블록 요소는 항상 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다. 기본적으로 블록 속성값을 갖는 <div>, <p>, <h>, <ul>, <
[section1_웹 개발 기초] HTML, CSS 기초_CSS 기초
📍 CSS는 스타일링을 위한 도구이다. 콘텐츠의 배치와 위치 (레이아웃 디자인), 텍스트를 강조하거나 밑줄을 치는 등, 최소한의 타이포그래피이다 (Typography)콘텐츠를 적당한 위치에 배치하는 레이아웃 디자인은 디자이너가 아니라도 할 수 있어야만 합니다.일반 사
[TIL] Unit 5. CSS 기초
🌱용어 정리 CSS(Cascading Style Sheets) : 웹 페이지의 스타일 및 레이아웃을 정의하는 스타일시트 언어이자 더 나은 사용자 경험(UX)을 제공하기 위한 도구 (사용자가 HTML문서를 잘 이해할 수 있도록 돕는 역할) UI(User Interfac
Box Model
모든 HTML 요소는 Box 형태의 영역을 가지고 있다. Box는 Content, Padding, Border, Margin으로 구성된다.
TIL - CSS 특강
각각의 property에 따라 initial 값이 다 다르다 box- model 속성 5대장 widthheightmarginpaddingborder블럭레벨은 한줄에 하나씩만 인라인레벨은 한줄에 여러개 가능 margin : 0 auto;0: 상하 auto:좌우header
TIL 06___CSS basic 2(박스 모델)
* CSS의 레이아웃을 구성하는 박스 모델에 대해 세부적으로 알아본다. ▶︎ CSS 박스 모델 웹 문서의 내용을 박스 형태로 정의하는 방법이다. 박스 모델에는 마진과 패딩, 테두리 등 박스가 여러 겹 들어 있다. 1. Block level 요소와 Inline le
211001_CSS(4) _box-model
content: 콘텐츠가 표시되는 영역 width, height(진짜 내용을 담고 있는 핵심 박스)padding: 콘텐츠와 테두리(border)사이의 여백 (공백 영역)border : padding 과 margin 사이의 테두디 기본값음 0px 이지만 보더 영역이 있다
CSS 박스모델, MediaQuery, grid
style 태그 사용style 속성 쓰기 ex) 글자 색을 바꾸고 싶을 때 head내에 css를 도입할 수 있다.위의 태그 의미 : a 즉 링크가 걸려있는 모든 글자는 검정으로 해라 중복된 코드를 단하나의 코드로 표현한다. 즉 중복의 제거 효과color:black
CSS 03 박스 모델(Box Model)
기본크기 100%, 이에 대한 상대적인 크기 설정해당 글꼴(font)의 기본 크기 1em, 이에 대한 상대적인 크기 설정스크린의 픽셀(pixel)을 기준으로 하는 절대적인 크기를 설정1배 = 1em = 100%높이, 기본 설정값은 auto너비, 기본 설정값은 auto해
