서두르지 말고 쉬지 말자

1. CSS 기초 본문

코딩 공부/CSS

1. CSS 기초

philos 2024. 3. 18. 12:21

1) CSS 구성요소

1. 문법

- 크게 선택자와 선언부로 나뉨

- 선택자 :  CSS스타일 적용할 HTML 태그 선택

- 선언부 : 선택한 태그에 적용할 스타일 결정, 중괄호 안에 넣음

- 선언부 안 스타일은 속성과 값을 한 세트로 작성, 여러 스타일 연속 작성에는 세미클론 이용

/* 문법 */
선택자{선언부}
선택자{속성:값;속성:값}

/* 예시 */
h1{
	font-size:15px;
    color:red;
}

2. 주석

- 너 나 우리가 아는 그 주석

/* 주석 */

 

2) CSS 적용법

- CSS를 HTML에 적용하는 법은 크게 3가지가 있음

1.내부 스타일 시트 사용

-내부 스타일 시트(internal style sheet) : HTML 파일 안에 CSS 코드 작성

- style 태그의 콘텐츠로 CSS코드를 작성하면 됨

<!-- 형식-->
<style>
	/* CSS 코드 */
</style>

-보통은 head에 style을 작성함, 젤 위부터 해석되기 때문에 body 나오기 전에 적용됨

-웹 브라우저에서 문서를 해석할 때마다 cSS를 다시 읽어서 성능상 별로임

2. 외부 스타일 시트 사용

-외부 스타일 시트(external style sheet) : css코드 파일을 하나 만들어서 문서와 연결하는 방법

-파일 확장자는 .css임

-연결할 때는 link 태그를 사용함

<!--형식-->
<link rel="stylesheet" href="css파일 경로>

3. 인라인 스타일 사용

-인라인 스타일 : HTML 태그의 style 속성에 CSS 코드 작성하는 방법

-태그에 직접 적는 거기 때문에 선택자 필요 없음

 

※ 외부 스타일 시트를 가장 많이 사용함(유지보수 편리, 성능적으로 가장 우수)

     인라인 스타일은 특별한 경우 제외하면 거의 안 쓰임

반응형

'코딩 공부 > CSS' 카테고리의 다른 글

6. CSS 특성  (0) 2024.03.26
5. 가상 클래스 선택자  (0) 2024.03.24
4. 가상 요소 선택자  (1) 2024.03.20
3. 조합 선택자  (0) 2024.03.20
2. 기본 선택자  (2) 2024.03.19