2023. 6. 20. 00:04ㆍ기술 창고/CSS
CSS는 HTML 구조에 스타일을 입히는 기능이라고 볼 수 있습니다.
웹 개발을 하게되면 반드시 알아야하는 내용이라고 볼 수 있죠.
특히 프론트 구현을 하려면 반드시! 필수 내용으로 공부해야 합니다.
오늘은 CSS 를 입히게끔 추가하는 3가지 방법에 대해서 정리하겠습니다.
(1) Inline 스타일 CSS 추가
같은 HTML 태그에 스타일 CSS 를 같이 적용시킨 방법입니다.
<html style="background: blue"> </html>
<!--
style 속성이 html 속성에 들어간 Inline 스타일 CSS.
첫 번째 속성명에 스타일을 입힐 속성명을 지정한다. - background
속성명 다음에는 적용할 스타일을 넣는다. - blue
-->
Inline 방법은 단순한 스타일을 적용해야할 때, 단 하나의 간단한 스타일만 적용하고자할 때 사용하는 방법입니다.
하지만 스타일을 적용할 때 보통 많은 CSS를 적용하기 때문에 Inline 방식은 비교적 잘 사용하지 않습니다.
(2) Internal(내부) 스타일 CSS 추가
style 태그를 따로 만들어 CSS를 따로 관리하고 적용하는 방법입니다.
<html>
<head>
<style>
html{
background: red;
}
</style>
</head>
</html>
<!--
style 태그를 따로 만들어서 css 내용들을 따로 관리하는 방법.
보통 head 태그안에 style 태그를 만들어서 사용함.
위의 style 내의 코드를 해석하자면, html 태그의 바탕화면 색을 빨간색으로 하겠다는 뜻.
-->Inline 방식보다는 자주 사용하지만 HTML 코드 구조체와 한 공간에서 같이 사용되는 방법입니다.
따라서 이 방법을 사용하게 된다면 여러 페이지에 같은 CSS를 적용하려면 똑같이 일일히 모든 페이지에 해당 CSS 를 적용시켜주어야 합니다.
(3) External(외부) 스타일 CSS 추가
CSS 를 따로 관리하는 외부 파일을 만들어 import 시킴으로서 스타일이 필요한 페이지마다 적재적소에 불러와 적용시킬 수 있는 방법입니다.
index.html
<html>
<head>
<link rel="stylesheet" href="./styles.css"/>
</head>
</html>
<!--
link 태그를 사용하며 속성에 stylesheet를 명시하고, href 속성으로 styles.css 파일이 존재하는
경로로 찾아가서 해당 CSS 파일을 불러와 적용시킨다.
-->
styles.css
html{
background: green;
}link로 styles.css 파일을 href 속성으로 불러와서 연결시켜주고 스타일을 적용시켜주는 방법입니다.
가장 많이 사용하고 추천하는 방법이라고 볼 수 있습니다.
styles.css 를 원하는 페이지마다 불러오기만 하여 바로 적용할 수 있고, CSS 코드와 HTML 코드를 분리하여 일관성을 유지할 수 있습니다.
'기술 창고 > CSS' 카테고리의 다른 글
| [CSS] CSS 적용 순서 (0) | 2023.06.22 |
|---|---|
| [CSS] 박스 영역을 생성하는 div 태그 / 테두리, 안쪽 여백, 바깥쪽 여백, 박스 크기 CSS (0) | 2023.06.22 |
| [CSS] 글자 크기, 두께, 글꼴, 정렬 (0) | 2023.06.21 |
| [CSS] Color 설정 (0) | 2023.06.20 |
| [CSS] CSS Selectors (0) | 2023.06.20 |