CSS7 [CSS] CSS Box Model 🤔 Box Model 이란? 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부른다. 박스 모델은 HTML 요소를 padding, border, margin, 그리고 content으로 구분한다. CSS에서의 기본적인 Box Model에서는 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용됩니다. 따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 합니다. 하나 하나 계산하며 맞추기 어려움을 해결하기 위해선 box-sizing이란 속성을 사용하면 됩니다. 📖 box-sizing 속성 content-box content-box는 기본 CSS 박스 크기 결정법을 사용합니다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 .. 2023. 2. 13. [CSS] Grid 활용법 📝 그리드 사용법 그리드 선언 그리드는 display 속성을 사용해 설정할 수 있다. 설정 값에 따라 블록(Block) 그리드와 인라인(Inline) 그리드로 설정 가능하다. 고정 값(px, rem 등) 단위가 먼저 계산된 후, 남은 공간을 사용하여 계산 처리됩니다. 예시) .grid-container { display: grid; /* grid 또는 inline-grid 설정 가능 */ } grid cell 그리드를 선언한 레이아웃 태그 내부에 포함한 자식요소는 grid cell로 변환된다. (자식 요소가 아니면 grid cell이 아닙니다) grid cell에 설정된 float 속성은 적용되지 않는다. 💡 grid cell에 설정된 display 속성은 모두 무시된다. 💡 요소가 아닌 텍스트가 자식으.. 2023. 2. 9. [CSS] CSS 첫걸음 📖 CSS 정의 Cascading Style Sheets의 준말. HTML이 웹페이지의 내용을 담당한다면, CSS는 웹페이지의 디자인을 담당한다. 정의하는 방법으로는 내부 스타일시트 외부 스타일시트 인라인 스타일시트 등이 있다. 🤔 CSS를 적용하는 3가지 방법 ✅ Inline 방식 해당하는 Tag안에 style 속성을 통해 적용하는 방법 하이 💡 css 속성뒤에 마무리로 세미콜론을 넣어준다. 제일 마지막 속성에는 세미콜론을 안 넣어도 동작은 하나 넣어주는 게 명시적으로 좋다. ✅ Style tag 방식 head 태그 안에 style태그를 선언하여 적용하는 방법 하이 💡 style tag는 왜 head 안에 선언해야 될까? html 문서는 위에서부터 아래로 읽기 때문에 style tag가 body태그의 .. 2023. 2. 7. 이전 1 2 다음
