서른다섯번째 수업 | CSS

Faithful Dev·2024년 11월 14일
MS AI School
0

Microsoft Korea 5th AI School

목록 보기
41/59

김자영 강사님

CSS

CSS 개념

  • CSS는 웹 페이지의 시각적 요소(색상, 글꼴, 레이아웃 등)를 제어하기 위해 HTML과 함께 사용된다.
  • Cascading Style sheets라는 이름처럼, 여러 스타일 규칙이 겹쳐 적용될 때 우선순위에 따라 계단식(Cascade)으로 최종 스타일이 결정된다.

CSS의 주요 기능

  • 레이아웃 제어: 웹 페이지 요소들의 위치, 크기, 간격을 정밀하게 조정할 수 있다.
  • 시각적 디자인: 배경색, 테두리, 그림자 등의 시각적 효과를 통해 페이지의 외관을 꾸밀 수 있다.
  • 텍스트 스타일링: 글꼴 크기, 색상, 줄 간격 등의 텍스트 속성을 설정하여 가독성을 높일 수 있다.
  • 반응형 디자인: 화면 크기(데스크톱, 태블릿, 모바일)에 따라 페이지 레이아웃을 다르게 설정할 수 있다.

CSS 스타일시트 적용 방법

  • 인라인 스타일: HTML 요소에 style 속성을 통해 직접 스타일을 지정한다. 특정 요소에만 스타일을 적용할 때 유용하지만, 유지보수가 어렵다.
  • 내부 스타일시트: HTML <head> 내 <style> 태그에 CSS를 작성한다. 해당 HTML 문서에만 적용되는 스타일이다.
  • 외부 스타일시트: 별도의 .css 파일에 스타일을 정의하고 <link> 태그로 HTML에 연결한다. 여러 HTML 파일에서 재사용이 가능해 일반적으로 가장 많이 사용된다.
  • @import: 다른 CSS 파일을 가져와 연결할 수 있다. @import url("stylecss"); 형식으로 사용한다.

CSS 선택자

CSS 선택자는 특정 HTML 요소에 스타일을 적용하기 위해 사용된다.

  • 전체 선택자(*): 모든 요소에 스타일을 적용한다.
  • 태그 선택자: 특정 HTML 태그에 해당하는 모든 요소에 스타일을 적용한다.
  • 클래스 선택자(.class명): 특정 클래스를 가진 모든 요소에 스타일을 적용한다.
  • ID 선택자(#id명): 특정 ID를 가진 요소에 스타일을 적용한다. 페이지 내에서 유일한 요소에 적용하는 것이 일반적이다.
  • 그룹 선택자: 여러 선택자에 동일한 스타일을 적용할 때 쉼표로 구분하여 사용할 수 있다.
  • 속성 선택자: 특정 속성을 가진 요소를 선택한다.

CSS 선택자 우선순위

여러 스타일이 중첩되어 한 요소에 적용될 때, CSS는 우선순위에 따라 스타일을 결정한다.

  • 우선순위 순서: 인라인 스타일 > ID 선택자 > 클래스 선택자 > 태그 선택자 > 전체 선택자
  • 같은 우선순위를 가진 규칙이 겹치는 경우, 코드에서 나중에 선언된 스타일이 우선한다. !important를 사용하면 우선순위 규칙을 무시하고 해당 스타일을 강제 적용할 수 있으나, 사용은 지양하는 것이 좋다.

colour

색상 지정 방법

  • CSS에서는 색상을 다양한 방식으로 지정할 수 있다.
    - 색상 이름: 기본적으로 CSS는 약 140개의 색상 이름을 지원한다.
    • 16진수 표기법: #RRGGBB 형식으로 색상을 지정한다.
    • RGB와 RGBA: rgb() 또는 rgba() 함수로 빨강, 초록, 파랑 색상의 조합으로 색상을 정의한다. RGBA는 투명도(alpha)를 추가로 지정한다.
    • HSL과 HSLA: hsl() 또는 hsla() 함수로 색상, 채도, 밝기를 기반으로 색을 지정한다. HSLA는 투명도를 추가로 설정할 수 있다.

텍스트 스타일링

글꼴 관련 속성

  • font-family: 글꼴 종류를 지정. 여러 글꼴을 콤마로 구분해 지정하면, 사용자의 시스템에 없는 글꼴은 순서대로 대체된다.
  • font-size: 글꼴의 크기를 설정한다. px, em, rem, % 단위 등을 사용할 수 있다.
  • font-style: 텍스트를 기울임(italic) 또는 기울이지 않음(normal)으로 설정.
  • font-weight: 글자의 두께를 지정한다. normal, bold, 또는 100~900 범위의 숫자로 지정할 수 있다.

박스모델

CSS의 박스 모델(Box Model) 은 웹페이지의 모든 요소를 박스로 다루는 개념을 설명하며, 각 요소의 크기와 여백을 정의하는 데 사용된다.

박스 모델의 구성 요소

  • Content (내용): 요소의 실제 콘텐츠가 들어가는 영역으로, 텍스트나 이미지가 위치한다.
  • Padding (안쪽 여백): 콘텐츠와 테두리 사이의 여백으로, 요소 내부의 여백을 정의한다. padding 속성을 통해 상하좌우 각각 다른 값을 지정할 수 있다.
  • Border (테두리): 패딩 바깥쪽을 둘러싸는 선으로, 테두리 두께, 스타일, 색상을 지정할 수 있다. border 속성으로 테두리를 조절할 수 있으며, 각 방향에 다른 설정을 적용할 수 있다.
  • Margin (바깥 여백): 요소의 가장 바깥쪽 공간으로, 다른 요소와의 간격을 설정한다. margin 속성으로 상하좌우 간격을 각각 다르게 지정할 수 있다.

박스 모델의 크기 계산

  • 요소의 실제 너비와 높이는 content, padding, border, margin 값을 모두 합하여 계산된다. 기본적으로 요소의 크기는 content 영역만 기준으로 계산되며, padding과 border는 추가된다.
  • box-sizing 속성을 통해 크기 계산 방식을 변경할 수 있다.
    - content-box (기본값): content 영역을 기준으로 너비와 높이가 설정된다.
    • border-box: padding과 border를 포함하여 너비와 높이가 설정된다. 이 설정을 사용하면 요소가 padding과 border를 포함한 전체 크기를 지정한 값으로 유지하게 된다.

속성별 상세

  • Padding: 콘텐츠와 테두리 사이의 엽개을 설정한다. padding: 10px;처럼 설정하거나 padding-top, padding-right, padding-bottom, padding-left로 개별 값을 지정할 수 있다.
  • Margin: 요소 바깥 여백을 설정하며, 다른 요소와의 간격을 조절한다. margin 속성도 개별 방향으로 지정할 수 있으며, 마진 중첩 현상이 발생할 수 있다. 이는 상하 margin이 중첩될 때 발생하며, 두 값 중 더 큰 값이 적용된다.
  • Border: 테두리를 정의하며, border-width, border-style, border-color를 개별로 설정하거나, border: 2px solid black;처럼 한번에 설정할 수 있다.
  • box-shadow: 요소에 그림자를 추가할 수 있는 속성으로, 그림자의 수평 거리, 수직 거리, 흐림 정도, 퍼짐 정도, 색상 등을 설정한다.

목록 스타일

목록 스타일 속성

  • list-style-type: 목록 아이템 앞에 표시되는 불릿(bullet) 모양이나 번호 스타일을 지정.
    - 비순서 목록 (<ul>): 불릿의 기본 모양은 원형(●)이다. disc(●), circle(◯), square(■) 등으로 변경할 수 있다.
    • 순서 목록 (<ol>): 숫자나 문자로 번호가 매겨진다. decimal(1, 2, 3), lower-roman(i, ii, iii), upper-alpha(A, B, C) 등의 값으로 다양한 번호 스타일을 적용할 수 있다.
    • none: 불릿 또는 번호를 제거한다.
  • list-style-position: 불릿이나 번호의 위치를 지정한다.
    - inside: 불릿이 목록 항목 내부에 위치하며, 텍스트와 동일한 들여쓰기를 가진다.
    • outside (기본값): 불릿이 목록 항목 외부에 위치한다.
  • list-style-image: 불릿 대신 이미지를 사용할 수 있다. url() 함수로 이미지 경로를 지정하여 불릿 대신 커스텀 아이콘이나 이미지를 표시할 수 있다.
  • list-style: 위의 세 가지 속성을 한 줄로 요약해 설정할 수 있다.

테이블 스타일

테이블의 주요 스타일 속성

  • border: 테이블과 셀의 테두리 두께, 종류, 색상을 지정한다.
    - 테두리를 지정할 때는 border: 1px solid black;처럼 두께, 스타일, 색상 순서로 설정한다.
    • 테이블과 셀의 테두리가 겹칠 때는, border-collapse 속성을 통해 테두리를 하나로 합칠 수 있다.
  • border-collapse: 테이블 셀과 테두리의 결합 방식을 설정한다.
    - collapse: 테두리가 겹치는 경우 하나로 합쳐진다. 테이블에 깔끔한 단일 테두리를 적용할 때 유용하다.
    • separate: 기본 값으로 각 셀의 테두리가 개별적으로 표시된다.
  • caption-side: 테이블 제목의 위치를 지정한다.
    - top (기본값): 테이블 상단에 제목이 표시된다.
    • bottom: 테이블 하단에 제목이 표시된다.

반응형 웹과 미디어 쿼리

반응형 웹의 개념

  • 반응형 웹 디자인은 화면 크기에 따라 페이지 레이아웃을 유동적으로 변화시킨다.
  • 이를 위해 퍼센트, 뷰포트 단위(vw, vh), em, rem과 같은 상대 단위로 크기를 설정해 가변적인 레이아웃을 만든다.
  • 뷰포트(viewport) 는 사용자의 화면에서 실제로 웹 페이지가 표시되는 영역을 의미하며 <meta name="viewport"> 태그로 설정할 수 있다.

미디어 쿼리 (Media Query)

  • 미디어 쿼리는 특정 조건(화면 크기 등)에 따라 CSS 스타일을 적용할 수 있도록 도와주는 기능이다.
  • 이를 통해 화면 크기에 맞는 스타일을 제공하여 다양한 기기에서 최적화된 페이지를 보여줄 수 있다.
# 미디어 쿼리의 기본 문법
@media [only | not] 미디어유형 [and 조건] {
	/* 조건에 맞는 스타일 */
}

display

display 속성의 주요 값

  • block: 블록 레벨 요소로, 항상 새 줄에서 시작하며 너비가 부모 요소의 100%를 차지한다. width, height, margin, padding을 모두 적용할 수 있다.
  • inline: 인라인 요소로, 콘텐츠가 흐르는 대로 배치되며, 너비와 높이를 지정할 수 없다. padding, margin이 좌우에만 적용된다.
  • inline-block: 인라인 요소처럼 한 줄에 여러 요소가 배치되지만, block처럼 너비와 높이를 지정할 수 있다. margin, padding이 상하좌우 모두 적용된다.
  • none: 요소를 화면에 표시하지 않으며, 공간도 차지하지 않는다. 요소를 임시로 숨길 때 유용하다.

레이아웃을 위한 display 속성

  • flex: 유연한 레이아웃을 구성하는 1차원 레이아웃 모델로, 주로 수평또는 수직으로 정렬된 요소들을 배치할 때 사용된다.
    - flex-container: display: flex;로 설정된 부모 요소이다. 자식 요소의 배치와 크기를 조정하는 다양한 속성(flex-direction, justify-content, align-items 등)을 사용할 수 있다.
    • flex-item: flex-container의 자식 요소들로, 주축 방향의 크기, 정렬 등을 설정할 수 있다.
profile
Faithful Dev
Turning Vision into Reality.
이전 포스트

서른네번째 수업 | HTML

다음 포스트

서른여섯번째 수업 | JavaScript

0개의 댓글