KDT 5th 웹개발자 입문 수업 2일차 -3

학원에서 배운 것/CSS

쿠리의일상 2023. 1. 27. 15:42

1. 구글 확장프로그램 중 web developer 를 설치 -> CSS disabled 가능하므로 css 없는 웹 사이트를 확인해보자

2. 역사

HTML5 이전 버전에서는 HTML 자체에서 style을 컨트롤 할 수 있는 태그 (<font>, <center> 등)을 사용했지만 디자인적 요소를 같이 두면 혼란스러워서 HTML5부터는 디자인을 분리한다.

그래서 HTML은 디자인 요소를 제외한 텍스트를 전달하는 문서이자 문서의 구조로만 사용

3. css 참조 방식

1) 인라인 css

요소의 style 속성(style=" ... ")으로 직접 스타일을 작성하는 방식 -> 선택자 없음

같은 스타일을 가진 태그를 사용하더라도 코드를 복붙이 필요... 재사용 불가

2) 내장 style - <head> 태그 사이에 <style>로 넣어줌, 선택자를 사용해줌

2-1) 선택자

2-2) { } 적용할 스타일을 정의해줄 부분

2-3) 속성명

2-4) 속성값

3) <link>를 사용한 파일 링크

외부 css 문서를 가져와서 연결

* css 파일 안에서도 다른 css 파일이 필요한 경우, @import 를 사용

@import url("css파일경로");

1~3번의 CSS 참조 방식이 겹치게 되면 기본적으로 가장 늦게 읽히는 것이 우선이지만, 선택자들간 우선 순위가 존재한다.

다만, 제일 우선 순위가 높은 건 인라인 방식.

4. css 여러 줄 주석만 /* */ (// 한줄 주석은 불가)