[KH국비지원 웹개발자 과정] Day_39 키워드 ,CSS

 

 안녕하세요. 삶의 질을 높이고자 노력하는 영차영차입니다.
드디어 국비지원 학원을 다니며 공부에 전념을 할 수 있게 되었습니다.
해당 포스팅은 강의 복기용으로 키워드를 기록하는 용도의 포스팅입니다.
--------------------------------------------------------------------------------------------------

CSS (Cascading Style Sheets)
:웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일 시트.
-> 웹문서(HTML)을 꾸며주는 것.
선택자{ 속성 = 속성 값} 의 기본 형태를 가짐.

CSS 사용을 한마디로 정리하면
: 꾸며줄 것을 선택하고 꾸며주는 기능을 작성한다.
-> 꾸며줄 것을 선택하기 위해 필요한 것이 선택자.
-> 선택한 것을 어떻게 꾸밀지 설정하는 것이 속성

HTML에 CSS를 적용하는 3가지 방법
1) 내부 스타일 시트
 :HTML 내에서 <style></style> 태그 영역에 CSS를 작성한다.

2) 외부 스타일 시트
:.css파일에 CSS를 작성해두고 HTML에 연결하여 사용한다.
 연결방법
<link rel = "stylesheet" href="css파일의 경로">
->css재사용, ,html 파일의 복잡성 제거 등을 위해 외부 스타일 시트를 많이 사용한다고 함

3) 인라인 스타일 시트
:직접 꾸며줄 태그에 CSS를 작성한다.
<p style = " CSS문"
-> 우선순위가 높다. 테스트 할 때 주로 사용한다고 함.

선택자 : HTML의 어떤 것을 선택할 지 

CSS Diner

게임으로 선택자를 연습할 수 있는 사이트. 32단계까지 있고 옆에 힌트를 보면서 진행할 수 있다.

선택자의 종류

1.전체 선택자
*{ }

2.태그 선택자
태그명{ }

3.아이디 선택자
#아이디{ }

4.클래스 선택자
.클래스{ }

5.기본 속성 선택자
[속성이름=값]{ }

6.문자열 속성 선택자
[속성이름=값]{ } 에서 = 대신
^=   -> 첫글자
$=  -> 끝글자
*=  -> 해당 문자 포함
~=  ->
|=  -> '-'포함 해당 문자열 시작

7.자손 선택자
부모>자식{ }

8.후손 선택자
조상 후손{ }  한 칸 공백.

9.구조 선택자
 일반 구조 선택자
    :first-child
    :last-child
    :nth-child(2n+3)
  형태 구조 선택자
    :first-of-type
    :last-of-type
    :nth-of-type(2n+2)

10.반응 선택자
active  -> 클릭한 태그
hover  -> 마우스가 올라간 태그

11.상태 선택자
checked  -> 체크 상태의 input 태그
focus  -> 초점이 맞춰진 input 태그

12. 링크 선택자
link  -> 방문 전
visited  -> 방문 후

13.속성 선택자
option:enabled
option:disabled

14.부정선택자
 선택자1:not(선택자2)
-> 선택자1 중에서 선택자2의 조건이 아닌 것을 고른다.

15.동위 선택자
 선택자1+선택자2  -> 동일레벨인 경우 선택자1 다음으로 오는 선택자2 
 선택자 ~ 선택자  -> 동일레벨인 경우 선택자1 다음으로 오는 모든 선택자2

16. 컴마 사용
  선택자, 선택자 컴마를 사용하면 여러 선택자 사용 가능

등등

CSS파일을 인터페이스처럼 미리 만들어두고 html 을 작성하면 어떨까.
일종의 모듈화?

CSS 단위 구성 
    상대 크기 
    1. em : 부모 요소의 크기가 기준(배수를 의미)
    2. rem : 최상위 부모 요소의 크기 기준으로 배수
    3. % : 기본 설정된 크기에서 상대적인 크기를 결정
    절대 크기
    1. px : 기본 지정된 크기
    2. pt  : 기본 지정된 크기(포인트)
    * 참조사이트 : http://pxtoem.com  

꾸미는 기능 실습)
1)글꼴 관련 스타일
2)색상 관련 스타일
3)백그라운드 관련 스타일
4)border 관련 스타일

박스 모델 구조

css 브라우저 접두어 
1. -webkit-, Safari, Chrome, Android, iOS 등 웹킷 브라우저 엔진
2. -moz-, Firefox, 모질라 브라우저 엔진
3. -o-, Opera, 오페라 브라우저 엔진