HTML

HTML Styles-CSS

carrot62 2020. 7. 21. 08:48

CSS(Cascading Style Sheets)는 웹 페이지를 꾸밀 때 사용한다. Cascading 상ㅔ 있는 element에 적용된 결과가 그 상위 element에 속해 있는 모든 element에게 영향을 끼치기 때문에 같은 설정을 원하지 않을때는 값을 지정해주도록 해야한다.

CSS가 HTML문서에 적용되려면?

  • Inline: HTML element 안에서 style attribute를 사용하는 것
    • 하나의 HTML element를 꾸밀때 사용된다 
    • ex: <h1 style="color:blue;">Blue heading</h1>
  • Internal: <style> element를 <head> 부분에서 사용하는 것
    • 하나의 HTML 페이지를 꾸밀 때 사용된다
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
<!-- 배경색 말고 Heading과 paragraph의 색도
<head>부분 안에서 정의할 수 있다-->
</style>
</head>
<body>
  • External: <link> element를 external CSS 파일에 링크를 거는 것
    • <head>부분에 링크를 설어야 한다
    • css 파일은 반드시 확장자 .css로 끝나야 한다
<head>
  <link rel="stylesheet" href="styles.css">
</head>

<!-- css 파일 예시:-->
<!-- 파일이름: styles.css-->
body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

color, font-family, font-size, border, padding, margin

<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;

}
p  {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
  • border의 value 값에서는 쌍따옴표를 사용하지 않는다

<head> <style> p { border: 2px solid powderblue; } </style> </head>

  • padding: border 안에서 텍스트와 테두리 사이의 여백을 지정한다.
  • margin: border 바깥의 여백을 지정한다.