[CSS]CSS개요_선택자1

CSS(Cascading Style Sheets)

 

  - 마크업 언어(HTML)가 실제 화면에 표시되는 방법을 기술하는 언어

  - 하나의 요소에 여러 CSS 코드를 겹쳐서 원하는 스타일을 만들어냄

  - W3C에서 CSS를 웹 표준으로 지정함

 

 

html에 css 연결하기

 

1. link 태그 이용하기

 

-  link 태그 

  현재 HTML과 외부 파일 연결

 

· rel="stylesheet" : 연결할 파일이 무슨 관계인지 지정

     -> CSS는 stylesheet(화면 꾸미는 시트지)

 

· href 속성 : 연결할 파일의 위치(경로/주소)

 

 . .  : 상위 폴더 

 

  /   : 해당 폴더 내부(하위)

 

 

 ※주석 달기 ※

 

HTML 주석  :  <!--  -->

CSS 주석      :  /*  */

<아이디가 title인 요소 선택>

 

<id 설정>

 

id(식별자) : 중복되면 안되는 값, 요소를 쉽게 구분 가능

 

CSS 코드를 작성하는 방법

 

1. head 태그에 style 태그를 작성한 후 내부에 CSS 코드 작성

2. CSS가 적용되길 원하는 요소에 직접 CSS 코드를 작성하는 방법 (inline-style)

 

- "style=" 속성 이용

 

3. 외부에 .css 파일을 생성하여 link 태그를 이용해 연결하는 방법

---

Selector란?

 

현재 HTML문서 내에서 특정한 요소를 선택하는 문자 또는 문자열

스타일을 적용하고자 하는 요소를 선택하는 방법

 

1. d(#) 선택자

  : HTML 문서 내에서 id 속성 값이 일치하는 요소를 선택하는 선택자

 

[작성법]

 

2. 태그(태그명) 선택자

   : HTML 문서 내에서 태그명이 일치하는 모든 요소를 찾아 선택하는 선택자

 

[작성법]

 

3. class(.) 선택자

   : HTML 문서 내에 class 속성 값이 일치하는 모든 요소를 선택하는 선택자

 

[작성법]

 * 하나의 요소가 여러 class를 가질 수 있다!

 * 요소에 CSS 적용을 위해 사용하는 선택자는 보통 class 선택자를 가장 많이 이용한다!!
 (id 속성은 주로 JS 용도로 많이 사용)

 

[한 요소에 여러 클래스 작성하기]

 

4. 모든 요소(*, asterisk) 선택자

   : 단독 사용 : 문서에 존재하는 모든 요소 선택

[작성법]

 

5. 다른 선택자와 혼용 

   : 선택된 요소의 모든 자식/후손/형제 선택

 

[작성법]

 

<모든 요소를 block 형식으로 변경>

 

<배경색 설정>

 

<모든 요소 글꼴 변경>

 

<웹 폰트 적용>