CSS
Cascade Style Sheet
(css version3)
-
HTML 구성 요소에 스타일을 지정하는 언어이다.
-
CSS 주석 :
/* 주석 */
internal / external / inline
- 스타일 지정 방식
∘internal:<head>태그 내부에<style>태그를 추가하고 CSS 작업하는 방식
∘external: 별도의 CSS 파일을 만들어서<link>태그로 등록하는 방식
∘inline: HTML 구성 요소에 직접 style 속성을 추가하고 CSS 작업하는 방식
스타일 우선 순위
높음 낮음 !important > inline > internal = external
스타일 작성 방식
선택자 { CSS속성: 값; CSS속성: 값; ... }
‣ internal / external / inline 예제
- internal
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> h1 { color: crimson; } p { color: teal; } </style> </head> <body> <h1>Hello World</h1> <p>만나서 반갑습니다</p> </body> </html>
- external
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../../별도의css파일경로/css파일.css"> </head> <body> <h1>Hello World</h1> <p>만나서 반갑습니다</p> </body> </html>
- inline
!important로 인해서 가장 높은 우선순위를 가진다. 단,important사용은 자제한다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> h1 { color: yellowgreen!important; /* !important */ } p { color: limegreen; } </style> </head> <body> <h1 style="color: crimson;">Hello World</h1> <p style="color: teal;">만나서 반갑습니다</p> </body> </html>
text style
font-family: '맑은 고딕', '고딕', sans-serif;
: '맑은 고딕' 사용, 없으면 '고딕' 사용, 없으면 고딕 계열(sans-serif) 사용font-family: '궁서', '명조', serif;
: '궁서' 사용, 없으면 '명조', 없으면 명조 계열(serif) 사용font-size: 32px;: 디폴트 16pxfont-weight: 900;: 디폴트 400, 100~900font-style: italic;: italic(기울임), normal(안 기울임)
color: crimson;: crimson 색상color: rgb(0, 0, 0);: red(0), green(0), blue(0) ⇒ blackcolor: rgb(255, 255, 255);: red(255), green(255), blue(255) ⇒ whitecolor: #000000;: 16진수 색상 코드 : red(0), green(0), blue(0) ⇒ black
:#000으로 축약 가능color: #FFFFFF;: 16진수 색상 코드 : red(255), green(255), blue(255) ⇒ white
:#FFF로 축약 가능color: rgba(0, 0, 0, 1);: red(0), green(0), blue(0), alpha(0 ~ 1) : 투명도(0은 투명, 1은 불투명)
letter-spacing: -1px;: 글자 사이 간격(자간)line-height: 64px;: 행 높이(세로 가운데 정렬할 때 주로 사용)word-spacing: 0px;: 단어 사이 간격
‣ 블록 요소는 정렬이 된다.
div, hr, h1~h6, p, pre, ul, ol, li, dl, dt, dd, table, form
text-align: center;: 가로 가운데 정렬
‣ 인라인 요소는 정렬이 되지 않는다.
span, br, strong, em, ins, del, mar, img, audio, video, a, input, select, textarea, button, label
text-align: center;: 가로 가운데 정렬text-decoration: none;: 밑줄 없음
‣ 벤더 프리픽스
Vendor Prefix
- CSS속성 앞에 브라우저 벤더(제공업체)를 작성할 수 있다.
종류
-webkit-: 크롬, 사파리-moz-: 파이어폭스-o-: 오페라
활용예제
-webkit-text-stroke-color: crimson;
-webkit-text-stroke-width: 1px;
CDN
Content Delivery Network
- 네트워크를 이용해서 데이터를 제공 받아볼 수 있는 방식의 활용
‣ 구글폰트
- https://fonts.google.com/ 에 접속한다.
- 원하는 폰트를 선택한다.
- 폰트를 포함하는 방식 2가지 중 1가지 방식을 선택한다.
∘<link>태그
∘@import- CSS속성을 적용한다. (CSS rules to spectify families)
‣ fontawesome 아이콘
- https://cdnjs.com/ 접속한다.
- "font-awesome"을 조회해서 fontawesome 아이콘을 가져올 수 있는 URL을 알아낸다.
- 알아낸 URL을 HTML 문서로 가져온다.
∘<link rel="stylesheet" href="알아낸 URL">
∘@import url(알아낸 URL)- https://fontawesome.com/ 에 접속한다.
- 원하는 아이콘의
<i class="xxx"></i>태그를 가져온다.
선택자 selector
‣ id 속성
- 모든 태그가 가질 수 있는 전역 속성이다.
- 문서 내의 모든 요소는 중복된 id를 가질 수 없다.
id 선택자
#id
‣ class 속성
- 모든 태그가 가질 수 있는 전역 속성이다.
- 문서 내의 모든 요소는 동일한 class를 가질 수 있다.
- 동일한 특성을 가지는 요소들은 동일한 class 속성을 가진다.
- 하나의 요소가 여러 개의 class를 가질 수 있다. (각 class를 공백으로 구분)
class 선택자
.class
‣ 자식 선택자
부모 > 자식
‣ 후손 선택자
- 가운데 공백
조상 후손
‣ 모든 형제 선택자
형제 ~ 형제
‣ 인접 형제 선택자
형제 + 형제
‣ 구조 선택자
요소:first-of-type: 첫 번째 요소요소:last-of-type: 마지막 요소요소:nth-of-type(n): n번째 요소
‣ 속성 선택자
요소[속성]: 속성을 가지고 있는 요소요소[속성=값]: 속성=값인 요소요소[속성^=값]: 속성이 값으로 시작하는 요소요소[속성$=값]: 속성이 값으로 끝나는 요소요소[속성*=값]: 속성이 값을 포함하는 요소
‣ 상태 선택자
요소:focus포커스를 가질 때 (입력 상자를 선택한 경우)요소:checked선택했을 때 (radio,checkbox를 선택한 경우)
‣ 마우스 반응 선택자
요소:hover: 요소에 마우스를 가져다 대고 있는 동안요소:active: 요소를 마우스로 누르고 있는 동안
‣ Pseudo Element(의사 요소)
요소::before: 요소의 앞에 의사 요소를 추가요소::after: 요소의 뒤에 의사 요소를 추가
의사 요소 (가상 요소)
콜론 두개를 붙여서 작성한다.
::버전 차이에 따라 콜론 하나를 사용하는 경우도 있다. 버전3은 콜론 두개, 이전 버전인 버전2는 콜론 하나를 사용한다.
개발이 세상에서 제일 재밌어요