[CSS] Inline, Block box 📦

📌 Inline *display 속성이 inline인 엘리먼트는 "나란히" 배치(줄바꿈 x)* width와 height 속성은 무시되고 해당 태그가 마크업하고 있는 요소의 크기 만큼만 공간을 차지한다. margin과 padding 속성은 좌우 간격만 반영되고, 상하 간격은 반영되지 않는다. defalut가 inline인 태그 : 등 📌 Block *display 속성이 block인 엘리먼트는 "세로로" 배치(줄바꿈 o)* width, height, margin, padding 속성 모두 반영된다. defalut가 block인 태그 : 등 📌 Inline-Block *display 속성이 inline-block인 엘리먼트는 "나란히" 배치(줄바꿈 o)* width, height, margin, paddin..

[CSS] Box Model 📦

공식문서 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model CSS 기본 박스 모델 입문 - CSS: Cascading Style Sheets | MDN 문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현합니다. CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 developer.mozilla.org 📌 개념 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부른다. 박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(m..

[CSS] CSS 입문 💬

📌 CSS란? CSS는 Cascading Style Sheets의 준말로, HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다. 📌 CSS가 도입된 이유 HTML로도 웹 사이트를 만들고 디자인할 수 있다. 특별히 CSS라는 언어가 도입된 이유는 바로 '정보의 가치와 효율성'을 고려했기 때문이다. 다음과 같은 태그는 해당 Element가 링크라는 정보와, href 속성를 통해 클릭했을 때 이동할 주소에 대한 정보를 제공해준다. 해당 Element를 디자인하기 위해 태그를 추가해보자. 크기는 50px, 색은 빨간색으로 속성을 부여한다. 이를 출력해보면 다음과 같다. 왼쪽은 태그로만 이루어진 Element, 오른쪽은 태그가 추가된 Element이다. '정보의 가치'의 관점에서 ..