CSS(Cascading Style Sheet)
1. 웹 페이지를 디자인하기 위해 사용하는 언어
개발자 도구
○ 브라우저에서 개발 편의를 위해 제공하는 도구로 F10을 누르면 활성화된다.
○ 현재 보고 있는 웹페이지를 구성하는 HTML, CSS, javascript를 볼 수 있다.
○ 화면을 돌리면 원상태로 복구되겠지만, 화면을 수정하여 변경하는 것도 가능하다.
○ 특정요소 코드 보기 및 수정 / 크기 줄이기 / 화면의 사이즈를 줄여서 반응형 확인하기.
CSS의 참조 방식
| 인라인(inline 방식) | |
| 1. 각 태그마다 스타일에 변화를 주고 싶을 때 사용 2. 테그마다 스타일을 설정하는 것이기에, CSS 코드의 재사용이 불가능하다. |
<div style= "color: red; magin: 20px;"></div> |
| 내장 Style | |
| 1. <head> 태그 내부에서 Style을 선언하여 사용하는 방식 2. 동일한 조건의 태그에 같은 스타일 적용 가능 3. HTML 파일이 바뀔 경우, 재사용이 불가능함. |
<style> div { color : red; margin : 20px; } </style> |
| 링크 방식 | |
| 1. Style 양식을 CSS 파일로 분리해놓고, 필요한 HTML 파일에서 해당 파일을 링크해서 사용하는 방식. 2. 스타일 변경이 발생하여도 재사용성이 높은 장점이 있다. |
 |
CSS의 참조 방식은 어느게 우선일까?
- 기본 적인 룰은 가장 늦게 읽히는 것이 가장 먼저 적용된다.
- 단, 모든 CSS 생성 규칙에 대하여 인라인 방식이 가장 우선 적용된다.
- 내장, 링크 방식은 가장 늦게 Load된 파일의 코드가 가장 늦게 적용된다.
※ 이미지 출저 : KDT 국비교육 PPT에서 발췌하였습니다
'국비지원 공부 정리 > HTML,CSS' 카테고리의 다른 글
| CSS 선택자 - 가상 클래스, 가상 요소 (0) | 2025.03.17 |
|---|---|
| CSS 선택자 정리 - 기본 선택자, 복합 선택자 (0) | 2025.03.17 |
| HTML - Table, Select (0) | 2025.03.16 |
| HTML - 이미지, 하이퍼링크, input (0) | 2025.03.16 |
| HTML - 문자 구조, 디자인과 관련된 태그 (0) | 2025.03.16 |