<Introduction>
HTML과 연동하여 스타일을 정의하는 CSS에 대해 알아보고, 어떻게 적용하는지에 대해 작성하고자 합니다.
<CSS (Cascading Style Sheets) 란?>
CSS는 사용자에게 HTML, XML 같은 문서를 표시하는 방법을 지정하는 언어입니다.
HTML, XML 같은 문서 언어로 뼈대를 만들며 CSS는 이 문서의 확장을 맡고 있다고 할 수 있습니다.
표시하는 방법을 지정한 언어이기에, 내용의 글꼴, 배경색, 이미지의 너비와 높이, 위치 등을 표현 할 수 있습니다.
<CSS code>
CSS를 적용하는 방법에는 Inline Style Sheet, Internal Style Sheet, Linking Style Sheet 총 3가지가 있습니다.
<CSS code - Inline Style Sheet>
HTML 태그의 "style 속성"에 CSS 코드를 넣는 방법입니다.
<p style="color: blue">Hello.</p>출력 결과
위 코드는 <p> 태그에 style 속성을 추가하여 표현한 예시입니다.
<CSS code - Internal Style Sheet>
Internal Style Sheet은 HTML 문서 안에 <style>과 </style> 안에 CSS 코드를 넣습니다.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
color: red; /* Set text color to red */
}
</style>
</head>
<body>
<h2>My Heading</h2>
</body>
</html>출력 결과
<h2> 태그에 대한 스타일코드를 <style> 태그 내부에 CSS를 작성합니다.
<CSS code - Linking Style Sheet>
별도의 CSS 파일을 만들고 HTML 문서에 <link> 태그를 통해 연결하는 방법입니다. 예를 들어 모든 h1 요소의 글자를 빨간색으로 하고 싶다면, 다음의 내용으로 style.css 파일을 만듭니다. (CSS 파일의 확장자는 css입니다.)
h1 {
color: green;
}그리고, 적용하고자 하는 HTML 문서에 다음의 코드를 추가합니다.
<link rel="stylesheet" href="style.css">
보통 <link> 태그는 HTML 작성 요령의 <head> 태그 아래에 둡니다.
출력 결과
이 방법의 장점은 여러 HTML 문서에 사용할 수 있다는 것입니다. style.css를 적용시키고 싶은 HTML문서에 <link> 태그로 연결만 해주면 됩니다. 수정 및 관리도 쉽기 때문에 보통의 프레임워크에서 많이 취하는 방식입니다.
<Reference>
https://developer.mozilla.org/ko/docs/Learn/CSS/First_steps/What_is_CSS
CSS 란 무엇인가? - Web 개발 학습하기 | MDN
CSS (Cascading Style Sheets) 를 사용하면 멋진 웹 페이지를 만들 수 있지만, 어떻게 작동합니까? 이 기사에서는 간단한 구문 예제를 통해 CSS가 무엇인지 설명하고 언어에 대한 몇 가지 주요 용어를 다
developer.mozilla.org
https://www.w3schools.com/css/css_comments.asp
CSS Comments
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'Programming > HTML' 카테고리의 다른 글
| [HTML] CSS 작동 원리 (0) | 2022.01.18 |
|---|---|
| [HTML] HTML 주요 tag 모음 (0) | 2022.01.12 |
