[2021.07.27] 인턴 +148 HTML Styles(CSS) - 6
* CSS(Cascading Style Sheets) 란?
-> 웹 페이지의 레이아웃 형식을 지정하는 데 사용
-> CSS를 사용하면 색상, 글꼴, 텍스트 크기, 요소 사이의 간격, 요소가 어떻게 배치되고 배치되는지, 어떤 배경 이미지나 배경색을 사용할지, 다양한 장치와 화면 크기에 따라 다른 디스플레이를 제어
* HOW TO USE CSS?
-> CSS는 3가지 방법(인라인,내부,외부)로 사용 가능
인라인(Inline)
-> HTML 요소 내부(h1,p) 의 Style 속성 사용
내부(Internal)
-> <head></head> 태그 안에, <style>body{},h1{},p{}</style> 사용
외부(External)
-> <head></head> 태그 안에, <Link> 요소를 사용하여, 외부 CSS 파일에 연결
---------------------------------------------------------------------------------------------------------------------------
인라인(Inline)
-> HTML 요소 내부(h1,p) 의 Style 속성 사용
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>
<출력 화면>
------------------------------------------------------------------------------------------------------------------------------
내부(Internal)
-> <head></head> 태그 안에, <style>body{},h1{},p{}</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>
* <h1>에서는 해당 페이지에 있는 모든 <p>요소 의 텍스트 색상을 파란색으로 설정, 모든 요소 의 텍스트 색상 을 빨간색으로 설정
* 페이지는 "powderblue" 배경색으로 표시
<출력 화면>
------------------------------------------------------------------------------------------------------------------------------
외부(External)
-> <head></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>
styles.css
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
<실행 결과>
----------------------------------------------------------------------------------------------------------------------------------
CSS 색상, 글꼴 및 크기(CSS Colors, Fonts and Sizes)
-> <style> h1{},p{} </style>
* CSS color
-> 텍스트 색상 지정
* CSS font-family
-> 사용할 글꼴을 지정
* CSS font-size
-> 텍스트 크기 지정
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<출력 결과>
----------------------------------------------------------------------------------------------------------------------------------
CSS 테두리 (CSS Border)
-> 테두리에 CSS 속성 사용
-> <style> p{border: 2px solid powderblue; } </style>
-> CSS 테두리는 p태그를 이용하여 border:2px solid powderblue;로 줄 수 있다.
p {
border: 2px solid powderblue;
}
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid powderblue;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
<출력 화면>
---------------------------------------------------------------------------------------------------------------------------------
CSS 패딩(CSS Padding)
-> 테두리 내부 공간에 CSS 속성 사용
-> 텍스트와 테두리 사이의 패딩(공백)을 정의
p {
border: 2px solid powderblue;
padding: 30px;
}
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid powderblue;
padding: 30px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------
여백(CSS Margin)
-> 테두리 외부의 여백(공백)을 정의
p {
border: 2px solid powderblue;
margin: 50px;
}
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid powderblue;
margin: 50px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>p {
border: 2px solid powderblue;
margin: 50px;
}
-> 사진을 보면 알다 시피, border : 5px (이것은 숫자(5)가 높아질수록 연한 녹색의 굵기가 굵어짐)
-> margin : 30px; -> 이것은 파란색의 공백
---------------------------------------------------------------------------------------------------------------------------------
Link to External (외부 CSS 링크 연결)
-> 전체 URL 또는 현재 웹 페이지에 대한 상대 경로 참조 가능
* <link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
-> 전체 URL를 사용하여, CSS 연결
* <link rel="stylesheet" href="/html/styles.css">
-> 상대 경로로 CSS 연결(html 폴더에 있는 style.css 연결)
* <link rel="stylesheet" href="styles.css">
-> 같은 폴더에 있는 style.css 로 연결
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<해당 CSS Link로 들어가면 CSS 정보를 볼 수 있음>
<실행 결과>
'Web' 카테고리의 다른 글
| [2021.07.27] 인턴 +148 HTML Image - 8 (0) | 2021.07.27 |
|---|---|
| [2021.07.27] 인턴 +148 HTML Link - 7 (1) | 2021.07.27 |
| [2021.07.26] 인턴 +147 HTML Comment Tags & HTML Colors(Colors, RGB, HEX, HSL) - 5 (0) | 2021.07.26 |
| [2021.07.26] 인턴 +147 HTML5 Quotation and Elements(인용 및 요소들) - 4 (0) | 2021.07.26 |
| [2021.07.26] 인턴 +147 HTML5 HTML Text Formatting -3 (0) | 2021.07.26 |
댓글