[ CSS ] : HTML 태그를 화면상에 어떻게 표현할지 설정. 즉, 문서의 내용을 디자인하는 방식을 말한다.
>> 브라우저에 표시되는 문서의 형태를 다르게 표현함.
1. CSS 사용 이유:
□ CSS를 통해 화면의 크기에 반응하여 자동으로 내용이 최적화되어 보이도록 설정할 수 있다.(=반응형 웹)
□ HTML은 웹 페이지의 서식 설정을 위한 태그를 사용하지 않는 것이 좋다.
>> CSS 라는 단일 체계에서 서식을 통합적으로 관리하여 체계적인 웹 사이트 개발과 이에 따른 개발 비용 감소를 이끌어내고자 함.
2. CSS 기본 사용 규칙
1) 작성 위치 (3가지 방법 존재)
(1) 인라인 스타일 시트 : 스타일을 적용할 HTML 파일 태그의 <style> 속성에 직접 지정한다.
□ 한번에 여러 태그에 효과를 줄 수 없어 비효율적
(2) 스타일시트를 HTML 문서 내에 포함해서 작성 : HTML의 <head> 태그 속에 <style> 태그를 두어 그 안에 작성.
□ 간단하나, 다른 문서에서 재사용할 수 없다
.
(3) 스타일 시트를 별도의 파일로 작성(외부 스타일 시트) : 여러 웹 사이트에서 재사용할 목적으로 별도의 파일로 저장해서 사용. 가급적이면 별도의 파일로 작성하는 것이 좋음. 확장자는 .css
□ HTML 문서에 외부 스타일 시트를 적용하려면 <link> 태그를 사용해서 rel 속성에 "stylesheet"를 값으로 지정한 후, href 속성에 스타일 시트 파일명을 값으로 지정한다.
<link rel="stylesheet" href="style.css"
3. CSS 작성 규칙
□ 스타일 시트 선언 시 키워드를 사용하는데, CSS의 키워드는 " " 나 ' ' 사이에 쓰면 안된다.
color : green; (o)
color : "green"; (x)□ 선택자마다 다양한 실렉터와 쓰인다.
□ 한 태그에 스타일이 2개 이상 설정되면, 먼저 온 스타일이 적용된다.
'IT > Frontend' 카테고리의 다른 글
| [쉽게 배우는 H.C.J] Chapter 4 - 미디어 쿼리 (0) | 2025.02.28 |
|---|---|
| [쉽게 배우는 H.C.J] Chapter 4 - CSS 주요 속성과 값 (0) | 2025.02.26 |
| [쉽게 배우는 H.C.J] Chapter 3 - HTML 문서 구조 및 주요 태그 (0) | 2025.02.24 |
| [쉽게 배우는 H.C.J] Chapter 3 - HTML 개요 및 기본 태그 (0) | 2025.02.24 |
| [쉽게 배우는 H.C.J] Chapter 2 - Section 02 클라우드 기반 코드 학습 및 테스트 사이트를 사용한 웹 프로그래밍 (0) | 2025.02.24 |