반응형
CSS란?
CSS는 Cascading Style Sheets로 문장 웹페이 레이아웃 형식을 지정하는데 사용합니다.
CSS는 텍스트의 사이즈, 색상, 폰트를 제어할수 있고 이미지의 배경색, 레이아웃에 사용하며 다른 장치나 스크린 사이즈를 다양하게 표현할 수 있는 등 웹프로그래밍에 있어서 많이 사용되는 언어 입니다.
CSS 사용해보기
CSS는 세가지 방식으로 HTML에서 사용할 수 있습니다.
1. Inline: HTML요소 안에서 속성 스타일을 사용할 수 있습니다.
2. Internal: <head>부분 안에서 <style>요소를 사용할 수 있습니다.
3. External: 외부 CSS 파일을 만들고 <link>를 통해 사용할 수 있습니다.
- Inline CSS
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>
- Internal CSS
<!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>
- external 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>-> 위의 코드는 html의 코드
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}-> 외부 styles.css 파일로 외부파일의 css를 <link>태그를 통해 html파일 안으로 들어왔다.
CSS 색상, 폰트, 사이즈
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
font-family: Courier;
font-size: 350%;
}
p {
color: yellow;
font-family: Gerogia;
font-size: 150%
}
</style>
</head>
<body>
<h1>This is heading</h1>
<p>This is paragraph</p>
</body>
</html>-> 색상, 폰트, 폰트 사이즈는 각각 color, font-family, font-size가 사용된다.
-> color: 텍스트 색상을 나타냄
-> font-family: 텍스트 폰트를 나타냄
-> font-size: 텍스트 폰트 사이즈를 나타냄
CSS Border 와 padding
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
font-family: Courier;
font-size: 350%;
}
p{
border: 2px solid powderblue;
padding: 30px;
color: yellow;
font-family: Georgia;
font-size: 150%;
}
</style>
</head>
<body>
<h1>This is heading</h1>
<p>This is border and padding</p>
</body>
</html>-> 위의 코드는 border와 padding을 추가한 코드이다.
-> border은 요소들의 테두리 두께를 나타낸다.
-> padding은 텍스트와 border사이를 뜻한다.
-> border와 padding 모두 크기를 표현할 때는 px 단위로 표시한다.
CSS Margin
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
font-family: Courier;
font-size: 350%;
}
p{
border: 2px solid powderblue;
padding: 30px;
margin: 50px;
color: yellow;
font-family: Georgia;
font-size: 150%;
}
</style>
</head>
<body>
<h1>This is heading</h1>
<p>This is border and padding</p>
</body>
</html>-> 위의 코드는 앞에서의 코드에서 margin만 더 추가한 것이다.
-> margin은 border의 바깥쪽에서의 여백의 크기를 뜻한다.
반응형
'웹프로그래밍 > HTML' 카테고리의 다른 글
| HTML 속성(예제코드) (0) | 2023.09.03 |
|---|---|
| HTML Links 링크 이미지, 주소 넣기 (0) | 2023.09.03 |
| HTML Styles 속성(텍스트, 배경색, 폰트, 폰트크기) (0) | 2023.09.03 |
| HTML 주석 (1) | 2023.09.03 |
| HTML 인용 및 인용요소(Quotation and Citation Elements)<blockquote>, <q>, <abbr>, <address>, <cite>, <bdo> (0) | 2023.09.03 |
댓글