1. CSS
1-1. CSS란?
-
HTML로 작성한 웹 페이지에 스타일을 적용하기 위해 사용되는 언어
-
Cascading Style Sheet
-
Cascading : 계단식 (위에서 아래로 흐르는)
-
상속 : 상위 요소의 스타일이 하위 요소에게 상속됨
-
우선순위 : 여러개의 CSS rule을 동시에 선언했을 때, CSS 적용의 우선순위가 있음
-
-
-
디자인(색, 폰트 등의 스타일), 위치, 배치, 레이아웃, 다양한 기기/스크린 크기 대응 등
1-2. CSS 문법
- 일반적인 rule
Selector { property1 : value1; property2 : value2; … }
-
선택자(selector) : 해당 CSS를 적용할 타겟 요소
-
속성(property) : CSS 속성의 이름(color, font-size, display …)
-
값(property value) : 속성의 값(속성마다
-
허용되는 값의 형태가 정해져있음)
여러 속성을 작성하기 위해 세미콜론(;)으로 구분 -
주석 :
-
한 줄
-
여러 줄
-
/* 내용 */
2. CSS 적용방법
방법 1. 외부 CSS 파일(stylesheet) 연결 ⭐️ (외부 CSS, External CSS)
1) CSS 파일 만들기
2) HTML파일의 <head>에 <link>로 css 파일 연결
- 1) rel = “stylesheet” (relation, 고정값!)
- 2) href = “CSS파일 경로” (상대경로 or 절대경로)
3) HTML 파일 열어서 적용된 CSS 확인
방법 2. HTML <head>의 <style> Tag 사용 (내부 CSS, Internal CSS)
-
빠르고 간단하게 CSS 확인 가능
-
but, 비효율적
-
모든 페이지에서 반복
-
업데이트 될 경우, 모든 페이지를 변경해줘야 함
-
방법 3. HTML의 style Attribute 사용 (인라인 CSS)
-
매우 간단함
-
현업에서는 절대 사용하지 않는 방식
3. 개발자 도구
단축키
윈도우 : Ctrl+Shift+I or F12
맥 : option + command + I
