GUMI Dev
[CSS] CSS 기본 본문
CSS로 할 수 있는 작업
CSS stands for Cascading Style Sheets. With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more. (https://www.w3schools.com/html/html_css.asp)
기본적으로 CSS로는 색상, 폰트, 폰트 사이즈, 요소들 간의 여백, 요소들의 위치 등 레이아웃 작업을 할 수 있다.
HTML 문서에 CSS를 추가하는 방법 3가지
1. Inline: by using the style attribute inside HTML elements.
HTML 요소 안에 style 속성을 추가한다.
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
2. Internal: by using a <style> element in the <head> section.
<head> 섹션 안에 <style> 요소를 추가한다.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3. External: by using a <link> element to link to an external CSS file.
<head> 섹션 안에 <link> 요소를 추가함으로써 외부의 CSS 파일과 연결할 수 있다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
* 외부 CSS 파일은 아래와 같은 형식으로 작성한다.
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
* <link rel="stylesheet" href="styles.css">에서 href에 해당하는 링크는 .css 파일의 링크 혹은 .css 파일의 위치에 따라 다양한 형태로 입력할 수 있다.
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css"><link rel="stylesheet" href="/html/styles.css"><link rel="stylesheet" href="styles.css">
'Web > FrontEnd' 카테고리의 다른 글
| 브라우저 개발자 툴 사용하기 (0) | 2021.11.23 |
|---|---|
| [HTML] HTML Graphics (0) | 2021.08.01 |