![]()
🌱 정의html에 존재하는 모든 요소는 박스 형태로 구성되며 이것을 박스 모델이라고 부릅니다. 박스 모델 형태로 구성된 html 요소는 안쪽부터내용(content)-패딩(padding)-테두리(border)-마진(margin) 영역으로 구분됩니다.- 내용(content): 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분- 패딩(padding): 내용과 테두리 사이의 간격, 영역 안쪽 여백- 테두리(border): 내용 + 패딩을 감싸는 테두리(선)- 마진(margin): 테두리와 이웃하는 요소 사이의 간격, 영역 바깥쪽 여백🌱 box-sizing 속성기본적으로 요소의 크기를 지정하면 해당 크기는 내용(content) 영역의 크기가 됩니다.box-sizing: content-box; 따라서 아래의..
![]()
🌱 픽셀(px)절대적인 크기 단위로 사용자의 화면 해상도에 따라 정확한 크기를 가집니다. 예를 들어, 내 화면이 1280px * 720px의 해상도를 가진 HD 화면일 때특정 요소의 너비가 64px라면 64칸의 너비값을 가지게 됩니다.🌱 퍼센트(%)부모 태그의 크기에 따라 상대적인 크기를 가집니다. 예를 들어, 부모 요소의 너비가 320px일 때 자식 요소의 너비를 50%로 지정했다면자식 요소의 실제 너비값은 320px의 절반인 160px이 됩니다.#parent { width: 320px;}#child { width: 50%; /* 320px * 0.5 = 160px */}--------------------------------------------- 너비가 320px인 부모 요소 ..
![]()
🌱 정의CSS 선택자를 활용하여 CSS 규칙을 적용할 요소를 정의합니다.- MDN Web Docs🌱 유형 선택자가장 기본적인 선택자로 html 태그를 선택자로 활용하는 방법입니다. 태그_이름 { } 형식으로 작성하면 됩니다. 예를 들어, 아래와 같은 코드가 있다면body { font-family: 'Noto Sans KR'; width: 480px;}---------------------------------- ~ ~ ~ body 태그 안에 존재하는 모든 요소에 해당 스타일이 적용됩니다. 🌱 class 선택자동일한 스타일을 적용하고 싶은 요소에 같은 class명을 지정해줍니다. .class_이름 { } 형식으로 작성하면 됩니다. 예를 들어, 아래와 같은 코드가 있다면..
