CSS(1)

오늘 배운 것

1. CSS (Cascading Style Sheets) 소개

  • 정의: HTML로 만들어진 구조에 색상, 크기, 배치 등 디자인을 적용하는 스타일 시트 언어이다.
  • 장점:
    • 콘텐츠와 디자인을 분리하여 유지 보수성이 향상된다.
    • 웹 문서 제작 기간이 단축된다.
    • 다양한 기기(PC, 모바일 등)에 맞는 디자인을 쉽게 적용할 수 있다.
    • 화면 디자인의 일관성을 유지하기 용이하다.

2. CSS 기본 문법 및 적용 방법

  • 기본 구조: CSS는 스타일을 적용할 대상을 지정하는 선택자(Selector)와 스타일 내용을 정의하는 선언부(Declaration)로 구성된다.
    • 선택자(Selector): 스타일을 적용할 HTML 요소를 가리킨다.
    • 선언부(Declaration): {} 안에 속성(property): 값(value); 형태로 작성하며, 여러 속성을 세미콜론(;)으로 구분한다.
    • 주석: /* 주석 내용 */ 과 같은 멀티라인 형태의 주석을 사용한다.
  • 스타일 적용 3가지 방법:
    1. 인라인 스타일(Inline Style): 개별 태그에 style 속성을 직접 지정하는 것이다. 재사용이 불가능하고 일반적으로 우선순위가 높다.
    2. 내부 스타일 시트(Internal Style Sheet): HTML 문서의 <head> 태그 안에 <style> 태그를 사용하여 작성하는 것이다. 해당 HTML 페이지 내에서만 재사용 가능하다.
    3. 외부 스타일 시트(External Style Sheet): 별도의 .css 파일을 만들어 <link> 태그를 이용해 HTML 문서와 연결하는 것이다. 모든 페이지에서 재사용할 수 있어 프로젝트에서 일반적으로 권장되는 방식이다.

3. Cascading (상속, 중요도, 명시도)

CSS는 상속, 중요도, 명시도 순서로 스타일을 적용한다.

  1. 상속(Inheritance): 부모 요소에 지정된 스타일이 자식 요소에도 전달되는 것을 의미한다.
    • font, color, text 관련 속성은 대부분 상속되지만, border, margin, padding 등 박스 모델 관련 속성은 상속되지 않는다.
    • 상속되지 않는 속성을 강제로 상속받게 하려면 값으로 inherit을 사용해야 한다.
  2. 중요도(Importance): 스타일 시트의 출처에 따라 우선순위가 결정된다.
    • 적용 순서: 웹 브라우저 기본 스타일(User Agent) < 사용자가 설정한 스타일(User) < 개발자가 작성한 스타일(Author) 순으로 우선 적용된다.
    • !important 키워드를 사용하면 이 순서를 무시하고 가장 높은 우선순위를 갖게 된다.
  3. 명시도(Specificity): 중요도가 같다면 명시도 점수가 높은 스타일이 적용된다. 명시도는 ID-클래스-태그 순서로 점수를 계산한다.
    • ID 선택자 > 클래스, 속성, 가상 클래스 선택자 > 타입(태그), 가상 요소 선택자 순으로 높은 점수를 갖는다.
    • 전체 선택자(*)는 명시도 점수가 0이다.
    • 명시도까지 같다면, 가장 나중에 로드된(작성된) 스타일이 적용된다.

4. CSS 선택자(Selector)

  • 기본 선택자:
    • 전체 선택자 *: 모든 요소를 선택한다. 명시도는 0-0-0이다.
    • 태그 선택자 p: 지정된 태그명을 가진 모든 요소를 선택한다. 명시도는 0-0-1이다.
    • 클래스 선택자 .class: 특정 클래스 속성값을 가진 요소를 선택한다. 명시도는 0-1-0이다.
    • ID 선택자 #id: 특정 ID 속성값을 가진 요소를 선택한다. 명시도는 1-0-0이다.
  • 복합 선택자:
    • 자손 선택자 section p: section 요소의 모든 하위 p 요소를 선택한다.
    • 자식 선택자 section > p: section 요소의 직계 자식인 p 요소를 선택한다.
    • 인접 형제 선택자 h1 + p: h1 요소 바로 다음 형제 p 요소를 선택한다.
    • 일반 형제 선택자 h1 ~ p: h1 요소 다음에 오는 모든 형제 요소를 선택한다.

  • 속성 선택자: [attr], [attr=value], [attr*=value] 등 특정 속성이나 속성값을 기준으로 요소를 선택하는 것이다. 명시도는 0-1-0이다.

  • 가상 클래스 선택자:
    • 구조적 가상 클래스: :nth-child(n)는 n번째 자식 요소를 선택하는 것이다. even (짝수), odd (홀수) 키워드 사용이 가능하다.

5. Box Model

HTML의 모든 요소는 사각형 박스 형태이며, content, padding, border, margin으로 구성된다.

  • display 속성:
    • block 요소는 width와 height 값을 가질 수 있지만, inline 요소는 이를 무시한다.
  • box-sizing 속성: width와 height의 계산 기준을 정하는 것이다.
    • content-box (기본값): width와 height가 콘텐츠 영역의 크기만을 의미한다. 전체 크기는 width + padding + border가 된다.
    • border-box: width와 height가 border와 padding까지 포함한 전체 크기를 의미한다. 레이아웃 설계 시 더 직관적이다.
  • margin 병합: block 요소끼리 상하 마진이 겹칠 경우, 더 큰 값의 마진 하나만 적용된다. 좌우 마진은 병합되지 않는다.

6. 레이아웃 및 정렬

  • 가운데 정렬: block 요소에 고정된 width를 주고 margin: 0 auto;를 적용하면 수평 중앙 정렬이 된다.
  • 수직 중앙 정렬: block 요소의 height 값과 line-height 값을 동일하게 설정하면 내부의 텍스트를 수직 중앙에 정렬할 수 있다.
  • calc() 함수: height: calc(100vh - 150px);와 같이 서로 다른 단위의 값을 연산할

    내일 할 일

    1. 스프링 공부

results matching ""

    No results matching ""