CSS (Cascading Style Sheet)

:문서에 색, 모양, 출력위치등 외관을 꾸미는 언어
-웹 문서의 내용과 상관없이 디자인만 변경 가능하다

1. CSS의 기본

(1) 스타일 시트 구성

<style>
body{color:blue;}
</style>

-셀렉터{프로퍼티:값;}으로 구성된다.

(2) CSS 적용방법

인라인: html 태그에 직접 style 속성을 넣어 작성
내부: 태그 사이에 작성
외부: 스타일 시트 파일을 별도 작성한 후나@import로 적용

(3) CSS 규칙

1) 상속 : 부모태그로부터 상속(자신을 둘러싼 태그)

2)캐스케이딩(cascading): 위에서 아래로 흐른다.
같은 태그에 여러가지 스타일시트가 적용될때 스타일이 합쳐져서 적용됨(부모가 아니더라도)
하나의 태그에 서로 다른 CSS값을 적용하다 보면 충돌이 발생하기도 함

3)오버라이딩(overriding): 덮어쓰기
동일한 CSS프로퍼티에 서로 다른 값을 설정하는 충돌 시 우선순위가 높은 스타일을 적용하는 규칙
[기준]
1)스타일 우선순위(Importance, Specificity, Order)
:(제일 중요) 사용자 스타일시트: ex.고대비
: !important -어떤 스타일보다 우선 적용
:일반 스타일시트
:기본 브라우저 스타일
(우선순위) inline > id > class > tag
2)스타일 상속

(4) CSS주석

/* 주석내용 */

2.셀렉터(selector)

(1)

<style>
    h3,li{color:brown;}/*태그 셀렉터*/
    div>div>strong{background-color: yellow;} 
    /*자식 셀렉터:div태그 안 div태그 안 strong태그의 스타일 지정*/
    ul strong{color: dodgerblue;} /*자손 셀렉터*/
    div.notice{color:red;} 
    /*class 셀렉터: class이름이 notice인 태그의 스타일 지정*/
    #list{background-color: mistyrose;} 
    /*id 셀렉터:id가 list인 태그의 스타일 지정*/
    #list span{color: forestgreen;}/*자손 셀렉터*/
</style>

(2)

<style>
    h3:first-letter{color: red;} /* 첫 글자만 설정*/
    /* cursor모양 pointer,help,move,progress 등등 */
    li:hover{background-color: yellowgreen;cursor:pointer;} /*커서 올렸을때 설정*/
    a:link{color:magenta}  /* 방문하지 않은 링크에 적용*/
    a:visited{color:gray;}  /* 방문한 링크에 적용 */
    a:active{color:green;}  /*마우스를 누른 상태에서 적용 */
    input:focus{border: solid 5px aquamarine;}  /* */
    li:first-child{color: red;}  /* 첫번째 자식 태그에 적용 */
    li:last-child{color: rgb(254, 175, 175);}   /* 마지막 자식 태그에 적용 */
    li:nth-child(2n){color:darkgreen;}   /* 짝수번째 자식 태그에 적용*/
    li:nth-child(2n+1){color:orange;}    /* 홀수번째 자식 태그에 적용 */
</style>

3-1. Font

(1) font-family 속성으로 지정

<style>
	 .faf{font-family: '궁서체',돋움,serif;}  
</style>

(2)web font 지정

        *.ttf (단점:용량이 큼)
        *.eot
        *.woff
        *.woff2
        구글 웹 폰트:https://fonts.google.com/
        네이버 웹 폰트:https://hangeul.naver.com/font
        눈누:https://noonnu.cc/

 <style> 
	@import url('https://fonts.googleapis.com/css2?family=Hi+Melody&family=Indie+Flower&display=swap');
        .gfont{font-family: 'Hi Melody', cursive;}
        .nfont{font-family: 'Indie Flower', cursive;}
 </style>

(3)@font-face: 다운로드 한 글꼴

<style> 
        @font-face {
            font-family: '나눔손글씨\ 딸에게\ 엄마가';
            src: url('./fonts/나눔손글씨\ 딸에게\ 엄마가.ttf') format('truetype');
  }
        .ffont{font-family: '나눔손글씨\ 딸에게\ 엄마가', cursive;}
  </style>

3-2. font

(1) font-size

    <h1 style="font-size:1em">1em크기를 가진 제목</h1>
    <h1 style="font-size:3em">3em크기를 가진 제목</h1>
    <h1 style="font-size:1ovm">10vm크기를 가진 제목</h1>
    <h1 style="font-size:300%">300%크기를 가진 제목</h1>

(2) font-weight

1)100~900
2)bold | lighter | bolder

    <p style="font-weight:100">font-weight</p>
    <p style="font-weight:400">font-weight</p>
    <p style="font-weight:900">font-weight</p>
    <p style="font-weight:bold">font-weight</p>
    <p style="font-weight:lighter">font-weight</p>
    <p style="font-weight:bolder">font-weight</p>

(3)font-style

: normal | italic | oblique

	<p style="font-style:italic">font-weight</p>
    <p style="font-style:oblique">font-weight</p>

4. spacing

normal: 여러 개의 공백을 하나로 표시.
nowrap: 여러 개의 공백을 하나로 표시. 영역 너비를 넘어가는 내용을 줄 바꾸지 않고 계속 한줄로 표시
pre: 여러 개의 공백을 그대로 표시. 영역 너비를 넘어가는 내용을 줄 바꾸지 않고 계속 한줄로 표시
pre-line:여러 개의 공백을 하나로 표시. 영역 너비를 넘어가는 내용을 자동 줄 바꿈
pre-wrap:여러 개의 공백을 그대로 표시. 영역 너비를 넘어가는 내용을 자동 줄 바꿈

5.그 외

(1)색상

color: RGB, RGBA, HSL,HSLA
A가 붙은거는 투명도를 포함함
RGB:#rrggbb(rr:0~255 -> 8bit) 0~FF -> 1600백만개의 색표현이 가능

(2)test-decoration: 밑줄,윗줄,삭제줄

none | underline | overline | line-through

(3)test-transform: 대/소문자 변환

text-transform: none | capitalize | uppercase | lowercase