본문 바로가기
HTML⁄CSS

[CSS] 적용 방법

by qoth_0 2024. 1. 12.
728x90
반응형

CSS(Cascading Style Sheet)

CSS 구성 요소

선택자 : 디자인을 적용할 HTML 영역 → h1, p 등..

속성 : 어떤 디자인을 적용할지 정의

속성값 : 어떤 역할을 수행할지 구체적으로 명령, 세미콜론(;)필수 입력

CSS 적용방법 세가지

1) Inline Style Sheet (인라인 스타일링)

태그 안에 직접 원하는 스타일을 적용

<!-- 인라인 스타일링 -->
<p style="background-color: red;">1. 배경색 변경</p>
<p style="color: blue;">2. 글자색 변경</p>
<p style="font-size: 20px;">3. 글자크기 변경</p>
<p style="background-color: darkgray; color: white; font-size: 23px; text-align: center;">4. 복합 스타일링</p>

2) Internal Style Sheet (내부 스타일링)

<style>태그 안에 넣기

3) External Style Sheet (외부 스타일링)

<link>태그로 .css파일 불러오기

→ html, css 각각의 문서 안에서 따로 관리하여 상대적으로 가독성이 높고 유지보수가 쉬움

⇒ 인라인 스타일링이 가장 우선순위가 높음

내부/외부 스타일은 적용 순서상 나중에 적용된 것이 적용

728x90
반응형

'HTML⁄CSS' 카테고리의 다른 글

[CSS] 부모 자식 관계  (0) 2024.01.16
[CSS] 선택자  (0) 2024.01.15
[HTML] 자바스크립트 적용  (0) 2024.01.09
[HTML] 구조 태그  (0) 2024.01.08
[HTML] form 태그  (1) 2024.01.05