![[CSS] CSS와 적용방법의 종류](/_next/image?url=https%3A%2F%2Fblog.huns.site%2Fimgs%2Fthumbnails%2Fblog%2Fposts%2Ffrontend%2Fstyle%2Fcss.png&w=1200&q=75)
TOC
CSS란?
- Cascading Style Sheet의 약자
- 디자인 영역을 담당하는 언어
CSS 구성 요소
디자인을 적용할 HTML 영역 {
속성: 영역값;
}
- 디자인을 적용할 HTML 영역을 선택하고 중괄호() 안에 어떤 디자인을 적용할지 속성과 속성값을 지정한 후 세미콜론(;)으로 마무리
- 세미콜론(;)은 CSS 문장에서 마침표 역할
- 예시
가방 {
너비: 30cm;
높이: 20cm;
색상: 빨간색;
}
HTML 문서에서 CSS 디자인 효과를 적용
가. 인터널 방식
- HTML 문서 안에
<style>태그를 사용하여 적용하는 방식
<head>
<title>인터널 방식의 CSS</title>
<!--<head> 태그 안에 <style> 태그를 추가하여 디자인-->
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
나. 인라인 방식
- HTML 태그에 직접 style 속성을 추가하여 적용하는 방식
<head>
<title>인터널 방식의 CSS</title>
</head>
<body>
<!--HTML 태그 안에 style 속성을 추가하여 적용하는 방식-->
<h1 style="background-color: yellow;">Hello World</h1>
</body>
다. 익스터널 방식
- 인터널/인라인 방식은 HTML과 CSS 언어가 섞여쓰여서 가독성이 떨어짐
- 이 문제를 해결하기 위해 HTML 문서와 CSS 문서를 따로 분리하고 이를 연동하는 방식
- 유지 보수 작업을 고려한다면 익스터널 방식으로 웹 사이트를 제작하는 것이 좋음
- HTML 문서와 CSS 문서를 연동하려면
<head>태그 안에<link>태그 작성 <link>태그의 href 속성값에는 CSS문서명.css 문서의 경로를 입력
※ 같은 폴더 안에 있다면 문서명.확장자 만 적어주면 됨
<head>
<title>익스터널 방식의 활용</title>
<!--<link> 태그를 사용하여 외부 CSS 파일을 연동하는 방식-->
<link rel="stylesheet" href="CSS문서명.css" />
</head>
이후 아래와 같은 CSS문서를 제작하면,
ex) CSS문서명.css
h1 {
font-style: italic;
}
html 문서의 <h1> 태그 속의 문장이 이탤릭체로 바뀜
