CSS

HTML문서에 CSS 스타일 삽입 방법

1. style 속성
2. <style> 태그

Basic Rules for <style>: Selector(선택자) & Property(속성)

Universal Selector (전체 선택자)

• * {} : HTML 페이지 내부의 모든 태그를 선택

• Type Selector (태그 선택자)

  • E {}: 태그명이 E인 특정 태그를 선택

Class Selector (클래스 선택자)

• .myClass {} : 클래스 속성(attribute)값이 myClass라고 지정된 요소(element) 선택

• 클래스 속성은 속성값으로 두개 이상을 가질 수 있음 → 한 태그 내에서도 여러종류의 스타일 규칙을 적용 가능

• Class는 구조(HTML 태그)를 대신할 수 없다?

  • 일반 텍스트에 헤딩처리한 글씨처럼 보이기 위해 class선택자를 사용하여 스타일 속성을 준다면?
  • 스타일 시트를 적용하지 못하는 브라우저에서는 제목의 기능 수행 x
  • 시각장애인용 TTS에서 인식 x
  • 따라서 가능한 올바른 HTML요소를 사용하고 스타일은 따로 적용

ID Selector (ID 선택자)

• #myID {} : id 속성(attribute)값이 myID로 지정된 요소(element)를 선택

  • Class Selector → 여러번 반복될 스타일에 사용 ex) 글자색, 글자굵기...

  • ID Selector → 단 한번 유일하게 적용될 스타일에 사용 ex) 요소의 배치 방법

    • HTML문서 내에 특정 id 속성(attribute) 값은 오직 하나만 있어야 함

Attirbute Selector (속성 선택자)

• E[attr] {} : attr 속성이 포함된 요소 E를 선택
• E[attr="val"] {} : attr 속성값이 'val'과 일치하는 요소 E를 선택
• E[attr~="val"] {} : attr 속성값에 'val'이 포함되는 요소 E를 선택 (공백으로 분리된 값이 일치해야)
• E[attr^="val"] {} : attr 속성값이 'val'로 시작하는 요소 E를 선택 ex) "https://~"
• E[attr$="val"] {} : attr 속성값이 'val'로 끝나는 요소 E를 선택
• E[attr*="val"] {} : attr 속성값이 'val'를 포함하는 요소 E를 선택
• E[attr~="val"] {} : attr 속성값이 'val'과 일치하거나 'val-'로 시작하는 요소 E를 선택

Pseudo-Classes (가상 클래스)

• 실제로 존재하는 요소에 특정 이벤트나 환경에 맞춰 가상으로 클래스를 줘서 css를 제어하는 것
• 불필요한 스크립트나 클래스의 절약

가상 클래스	설명
:active	해당하는 요소를 활성화 했을 때 즉, 클릭한 상태일 때 스타일 부여
:checked	input 태그의 type이 checkbox나 radio일 경우 해당 태그가 체크 되어있을 때 스타일 부여
:disabled	선택, 클릭, 입력 등을 할 수 있는 요소에 비활성을 했을 때 스타일 부여 ex) input, button, a태그
:enabled	:disabled의 반대로 활성화 되어있는 요소에 스타일 부여
:empty	자식 요소가 없는 태그에 스타일 부여
:focus	input 태그에 focus를 한 상태일 때 스타일 부여
:hover	해당 요소에 마우스를 올렸을 때 스타일을 부여
:link	미방문 링크에 스타일 부여
:visited	이미 방문한 링크에 스타일 부여
:not(selector)	(selector)를 제외한 나머지 요소들에 스타일 부여 ex) .main p:not(.cmt) {color:red} (.main 클래스의 자손인 p태그 중 .cmt 클래스를 제외하고 color:red를 적용)
:read-only	input 태그에 readonly 속성을 지정한 요소에 스타일 부여
:required	input 태그에 required 속성을 지정한 요소에 스타일 부여
:first-child	첫 번째 자식요소인 해당 태그에 스타일 부여 ex) .main div:first-child {color:red;} (.main 클래스의 첫번째 자식 요소인 div태그에 color:red 적용) ※ 만약 div 이전 형제요소 중 다른 태그가 있으면 스타일 적용 불가 ex) <div class="main"> <p>test1</p> <div>test2</div> </div>
:first-of-type	형제인 해당 태그 중 첫번째 자식요소에 스타일 부여 ex) .main div:first-of-type {color:red;} (.main 클래스의 자식 요소인 div태그 중 가장 첫 태그에 color:red 적용)
:last-child	마지막 자식요소인 해당 태그에 스타일 부여
:last-of-type	형제인 해당 태그 중 마지막 자식요소에 스타일 부여
:nth-child(n)	n번째 자식요소인 해당 태그에 스타일 부여 (n에 숫자 뿐만 아니라 even, odd, 2n+1 등 특정 수식을 줄 수 있음)
:nth-of-type(n)	형제인 해당 태그 중 n번째 자식요소에 스타일 부여
:only-child	형제가 없는 해당 태그에 스타일 부여 (다른 형제 요소가 있으면 스타일 적용x) ex) .main div:only-child{color:red} <div class="main"> <div>test1</div> <p>test2</p> </div> div의 형제에 p태그가 있으므로 스타일 미적용
:only-of-type	해당 태그 중 같은 유형의 형제가 없는 태그에 스타일 부여 ex) .main div:only-child{color:red} <div class="main"> <div>test1</div> <p>test2</p> </div> 형제 요소 중 div는 하나기 때문에 스타일 적용

Pseudo-Elements (가상 요소)

• 실제로 존재하는 요소에 가상으로 클래스를 주던 가상클래스와는 다르게 실제로 존재하지 않는 가상의 요소를 만들어 스타일을 주는 것을 말한다.

• 보통 콜론(:)을 사용하지만 가상 클래스와의 구분을 하기 위해 이중콜론(::)의 사용을 권장하고 있다.

가상요소	설명
::before	지정된 요소의 앞에 가상의 요소 생성 ex) .main p:before{content:"- "} → - test1로 출력된다. (- 표시를 before로 삽입) <div class="main"> <p>test1</p> </div> → - test1로 출력된다. (- 표시를 before로 삽입)
::after	지정된 요소의 뒤에 가상의 요소 생성
::first-letter	지정된 요소의 첫 번째 글자에 스타일 적용
::first-line	지정된 요소의 첫 번째 줄에 스타일 적용

Multiple Selector (다중 선택자)

• AB {}: A선택자 조건과 B선택자 조건을 동시에 만족하는 요소를 선택 (AND)
• A, B {}: A선택자 조건과 B선택자 조건중 하나라도 만족하는 요소를 선택 (OR)

Combinator (복합 선택자)

• Descendant Combinator (자손 선택자)
  • E F {}: E요소의 자손인 F요소를 선택
• Child Combinator (자식 선택자)
  • E>F {}: E요소의 자식인 F요소를 선택
• Adjaacent Sibling Combinator (인접 형제 선택자) cf. 형제: 같은 부모를 공유
  • E+F {}: E요소 바로 뒤에 오는 F요소를 선택
• General Sibling Combinator (일반 형제 선택자)
  • E~F {}: E요소 뒤에 오는 F요소를 선택

The !important Rule

• 해당 속성에 가장 높은 우선순위 부여

• In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!

• p {
   background-color: red !important;
  }

Selector 우선 순위

• !important > id [ 100 ] > class [ 10 ] > tag [ 1 ] > * [ 0 ]
  • ex) li#id1.class1 {} → 1 + 100 + 10 = 111의 우선순위
• 우선순위가 같으면, 가장 마지막에 지정된 스타일을 우선 적용

Box Model

Design만을 위한 tag

어떠한 의미도 기능도 없는 무색무취의 태그, 오로지 css와 JavaScript를 통해서 어떤 정보를 제어하고 싶을 때 해당 부분을 감싸주는 역할

• <div>: block level element

• <span>: inline element

Responsible Web (반응형 웹)

• 디바이스별로 레이아웃이 달라지는 웹

• 즉 화면의 크기마다 레이아웃이 달라짐

Media Query

@media() {}

• Responsible Web에 필수적
• 화면 크기마다 다르게 CSS를 적용시켜 줌 (보통은 스마트폰, 태블릿, PC로 3가지 구분)

css style을 HTML문서에 가져오기

<link rel="stylesheet" href="style.css">

• html문서에서 <style>태그가 들어가는 위치에 위와 같은 코드로 대체하면, 외부 파일(style.css)의 내용이 문서 내에 쓰여진 것처럼 동작

• 하나의 웹페이지에서 여러 개의 외부 파일을 다운 받는 것 vs 웹페이지 안에 해당 css코드를 내장하는 것

  • 네트워크 측면에서는 후자가 더 나음 (더 적은 트래픽 사용) 하지만...

  • 캐시(Cache)
    : 동일한 데이터에 반복해서 접근해야 하거나 많은 연산이 필요할 때, 빠르게 이용하고자 결과를 성능이 좋은 혹은 가까운 곳에 저장하는 것
    (혹은 그 저장장소, 즉 메모리)

  • 캐싱(Caching)

    : 캐시 영역으로 데이터를 가져와서 접근하는 방식

  • 브라우저의 캐싱

    : 브라우저는 이미지, 비디오, CSS, JavaScript등의 정적 리소스를 로컬에 저장하여 성능을 향상 시킴

    ex) style.css라는 파일의 내용이 바뀌기 전까지는 브라우저에 띄우기 위해 한번 다운로드 받았을 때 우리의 컴퓨터에 저장해 놨다가, 이후 style.css를 요청 받을 때마다 저장된 결과를 가져와서 속도를 높일 수 있고(∵네트워크를 안 씀) 사업자들은 돈을 덜 쓸 수 있음(∵트래픽 사용료)

웹브라우저별 지원 여부 확인 사이트

• caniuse.com

들여쓰기 자동 정렬

• Ctrl + K, Ctrl + F