CSS 기본

김동완·2022년 4월 13일
0

CSS(Casacading Style Sheets)

스타일을 지정하기 위한 언어

선택하고, 스타일을 지정한다.

h1{
    color : blue;
    font-size: 15px;
}

CSS

  • CSS구문은 선택자를 통해 스타일을 지정할 HTML 요소를 선택
  • 중괄호 안에서는 속성과 값, 하나의 쌍으로 이루어진 선언을 진행
  • 각 쌍은 선택한 요소의 속성, 속성에 부여할 값을 의미
    • 속성 : 어떤 스타일 기능을 변경할지 결정
    • 값 : 어떻게 스타일 기능을 변경할지 결정

CSS 정의 방법

  • 인라인(권장 X)
  • 내부참조 <style>
  • 외부참조 - 분리된 CSS파일

CSS with 개발자 도구

  • styles : 해당 요소에 선언된 모든 CSS
  • computed : 해당 요소에 최종 계산된 CSS

CSS Selector

  • 기본 선택자
    • 전체 선택자, 요소 선택자
    • 클래스 선택자, 아이디 선택자, 속성 선택자
  • 결합자(Combinators)
    • 자손 결합자, 자식 결합자
    • 일반 형체 결합자, 인접 형체 결합자
  • 의사 클래스/요소(Pseudo Class)
    • 링크, 동적 의사 클래스
    • 구조적 의사 클래스, 기타 의사 클래스, 의사 엘리먼트, 속성 선택자

CSS 선택자 정리

  • 요소 선택자
    • HTML 태그를 직접 선택
  • 클래스(class) 선택자
    • 마침표(.)문자로 시작하며, 해당 클래스가 적용된 항목을 선택
  • id 선택자
    • # 문자로 시작하며, 해당 아이디가 적용된 항목을 선택
    • 일반적으로 하나의 문서에 1번만 사용. 여러 번 사용해도 동작하지만, 단일 ID 사용을 권장

CSS 적용 우선순위

  1. 중요도

    • !important
  2. 우선 순위

    • 인라인 > id > class, 속성, pseudo-class> 요소, pseudo-element
  3. CSS 파일 로딩 순서

CSS 상속

  • CSS 는 상속을 통해 부모 요소의 속성을 자식에게 상속한다.
  • 속성 중에는 상속이 되는 것과 되지않는 것들이 있따.
  • 상속 되는 것 예시
    • Text 관련 요소(font, color, text-align), opacity, visibility 등
  • 상속되지 않는 것 예시
    • Box model 관련 요소, position 관련 요소

CSS 기본 스타일

크기 단위

  • px(픽셀)

    • 모니터 해상도의 한 화소인 '픽셀' 기준
    • 픽셀의 크기는 변하지 않기 때문에 고정적인 단위
  • %

    • 백분율 단위
    • 가변적인 레이아웃에서 자주 사용
  • em

    • (바로 위, 부모 요소에 대한)상속의 영향을 받음
    • 배수 단위, 요소에 지정된 사이즈에 상대적인 사이즈를 가짐
  • rem

    • (바로 위, 부모 요소에 대한) 상속의 영향을 받지 않음
    • 최상위 요소(html)의 사이즈를 기준으로 배수 단위를 가짐
<style>
    .em{
      font-size : 1.5em;}
    .rem{
        font-size: 1.5rem;
    }
</style>

<body>
    <div class="em"> 
        1.5em #1.5 x 1.5 부모의 상속 영향을 받기 때문
    </div>
    <div class="rem">
        1.5rem # 1.5 상속의 영향을 받지 않기 때문 
    </div>
</body>
  • viewport
    • 웹 페이지를 방문한 유저에게 바로 보이게 되는 웹 컨텐처의 영역(디바이스 화면)
    • 디바이스의 viewport를 기준으로 상대적인 사이즈가 결정
    • vw, vh, vmin, vmax

색상 단위

  • 색상 키워드
    • 대소문자를 구분하지 않음
    • red,blue,black과 같은 특성 색을 직접 글자로 나타냄
  • RGB색상
    • 16진수 표기법 혹은 함수형 표기법을 사용해서 특정 색을 표현하는 방식
    • '#' + 16진수
    • rgb()함수형 표기
  • HSL 색상
    • 색상, 채도, 명도를 통해 특정 색을 표현하는 방식
  • a는 alpha(투명도)

CSS 문서 표현

  • 텍스트
    • 서체, 서체 스타일
    • 자간, 단어 간경, 행간, 들여쓰기 등
  • 컬러, 배경
  • 기타 HTML 태그별 스타일링
    • 목록(li), 표(table)

결합자

  • 자손 결합자
    • selectorA 하위의 모든 selecotr B 요소
  • 자식 결합자
    • selectorA 바로 아래의 SelectorB요소
  • 일반 형제 결합자
    • selectorA의 형제 요소 중 뒤에 위치하는 selector B 요소를 모두 선택
  • 인접 형제 결합자
    • selectorA의 형제 요소 중 바로 뒤에 위치하는 selectorB 요소를 선택
profile
내가 공부한 내용들이 누군가에게 도움이 될지 몰라서 쓰는 벨로그

0개의 댓글