jinseon's log

[CSS] CSS 정의 본문

HTML & CSS/CSS

[CSS] CSS 정의

J_SEON 2022. 11. 23. 00:47

✔ CSS (Cascading Style Sheet)

- 정보(HTML)와 디자인(CSS)의 분리 => 디자인 담당

- 문서의 레이아웃과 스타일 정의

- HTML로 작성된 정보를 꾸며주는 언어

 

✔ CSS 구성 요소

 

h1 태그에 대한 디자인 정의 예시

선택자 { 속성 : 속성값;}

- 선택자

    - 디자인을 적용할 HTML 영역

 

- 속성

    - 적용할 디자인 정의

 

    - font-size : 폰트 사이즈

    - font-family : 글꼴

    - color : 폰트 색깔

    - background-color : 배경색

    - text-align : 텍스트 정렬 방식

 

- 속성값

    - 수행할 역할을 구체적으로 명령

    - 세미콜론(;) 필수 입력

 

✔ CSS 연동 방법

1️⃣ Inline Style Sheet

<h1 style="color: red;"> coding 101 </h1>

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

- 태그의 속성을 지정하는 방법과 동일

🤔 속성이 많아질 수록 하나의 태그에 열린 태그가 길어지게 됨

 

2️⃣ Internal Style Sheet

<head>
<style>
    h1 { background-color: yellow; }
</style>
</head>

- <style> 태그 안에 작성

- Inline Style Seet 보다 가독성은 좋아짐

🤔 스타일이 많아질 경우 본문의 내용이 눈에 들어오지 않음

 

3️⃣ External Style Sheet

<head>
    <link rel="stylesheet" href="style.css">
</head>

- <link> 태그로 불러옴

    - rel : 뒤에 href 속성으로 불러와지는 파일과 현재 파일 간의 관계 설명

    - href : 해당 스타일이 저장된 css 파일

- html, css 각각의 문서 안에서 따로 관리

- 상대적으로 가독성이 높고 유지보수가 쉬움

저작자표시

'HTML & CSS > CSS' 카테고리의 다른 글

[CSS] Block 요소와 Inline 요소  (0) 2022.11.24
[CSS] 웹사이트의 레이아웃  (0) 2022.11.23
[CSS] 주요 속성  (0) 2022.11.23
[CSS] 캐스케이딩 (Cascading)  (0) 2022.11.23
[CSS] 선택자 (Selector)  (0) 2022.11.23
'HTML & CSS/CSS' Related Articles more
Comments