[AI헬스캠프] CSS 이론 (2)

 

이전 글에 이어 CSS 에 대해 추가로 알아보겠습니다.

 

CSS 박스 모델 (Box Model)

• 모든 HTML 요소가 사각형 박스로 구성된다는 CSS의 기본 개념

• 네 가지 영역

- Content: 텍스트, 이미지가 들어가는 실제 내용 영역

- Padding: 내용과 테두리 사이의 내부 여백

- Border: 테두리, 요소의 경계

- Margin: 요소 외부의 여백, 다른 요소와의 간격

 

예시를 들어보겠습니다.

<div class="box">이것은 박스 모델입니다!</div>

* div= division(구역, 영역) / 웹페이지 안에서 내용을 묶어 하나의 구역으로 만들어줄 때 사용

라는 HTML 코드를

width 200px, padding 20px, border 5px solid black, margin 15px 로 스타일을 적용하면

이런식으로 나오는 것을 볼 수 있습니다.

 

CSS 우선순위 (Specificity)

• 여러 CSS 규칙이 동일한 요소에 적용될 때, 어떤 스타일이 적용되는지 결정하는 규칙

• 우선순위 계산 방식

- 인라인 스타일: 가장 높은 우선순위

- ID 선택자: 높은 우선순위

- 클래스, 속성, 가상 클래스 선택자: 중간 우선순위

- 태그 선택자: 낮은 우선순위

- !important 사용시 어떤 규칙보다 우선 적용

 

예시를 들어보겠습니다.

위와 같은 style.css 파일을 계산해보면

• 우선순위 계산 예시

- 태그 선택자: p (우선순위: 1)

- 클래스 선택자: .highlight (우선순위:10)

- ID 선택자: #unique (우선순위: 100)

- !important: 무조건 적용 (자주 사용하지 말것)

이런식으로 되는데, 이 파일을 HTML 코드에 적용시켜보겠습니다.

이런식으로 적용해보겠습니다.

 

그대로 렌더링 된 화면을 볼 수 있습니다.

여기에서 style.css 의 important 를 삭제하면, ID 선택자가 보이게 됩니다.

여기에서 highlight에 !important 를 적용한다면 

클래스지만 important 를 적용했기 때문에 색이 red로 변경됩니다!

CSS 단위 (Units)

• 요소의 크기, 간격, 위치를 설정할 때 다양한 단위를 사용

• 주요 단위

° 고정 단위: px (픽셀) - 화면의 고정된 크기

° 상대단위

- em, rem : 글꼴 크기에 상대적인 단위

- % : 부모 요소 크기에 상대적인 백분율

- vw, vh : 뷰포트(화면) 크기에 비례하는 단위

• 단위 비교 예시

• 주요 단위 설명

- px: 고정된 크기, 디바이스 화면 크기에 상관없이 일정하게 유지

- em: 부모 요소의 글꼴 크기에 비례. (1em = 부모 글꼴 크기)

- rem: 루트 요소(html)의 글꼴 크기에 비례.

- %: 부모 요소의 크기에 비례.

- vw, vh: 각각 뷰포트의 너비, 높이에 대한 백분율.

 

실습

오즈코딩스쿨에서 제공해주는 가이드라인으로 실습을 해보겠습니다.

1. 박스안에 텍스트, padding을 이용해 여백을 10px

2. border는 3px solid, 색상은 blue

3. margin은 20px

4. h1 제목은 기본 green, 클래스 .highlight가 적용된 경우 red

5. id가 special인 요소는 우선순위에서 무조건 yellow

처음에 이런 화면으로 나와서 테두리 두께가 완성 예시와 다른 것 같아 확인해보니 제가 평소에 90% 배율로 인터넷 화면을 보고 있기 때문이었습니다.

100% 배율로 적용하니 완성 예시와 같은 화면을 볼 수 있었습니다!