HTML&CSS

CSS 적용하는 방법

yunajoe 2022. 9. 23. 07:46


1. 인라인 스타일(Inline style)
- HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법


<body>

    <h2 style="color:green; text-decoration:underline">

        인라인 스타일을 이용하여 스타일을 적용하였습니다.

    </h2>

</body>


2. 내부 스타일 시트(Internal style sheet)
 HTML 문서 내의 <head>태그에 <style>태그를 사용하여 CSS 스타일을 적용

<head>

    <style>

        body { background-color: lightyellow; }

        h2 { color: red; text-decoration: underline; }

    </style>

</head>

3. 외부 스타일 시트(External style sheet)

HTML내부에서 적용하지 하고 css파일을 따로 만들어서 HTML과 연결 

<head>

    <link rel="stylesheet" href="/examples/media/expand_style.css">

</head>

CSS 속성 

# 폰트 크기 
<style>
h2 {
  font-size: 72px;
}
</style>


# 텍스트 정렬
<style>
h1 {
  text-align: left;
}

h2 {
  text-align: right;
}

h3 {
  text-align: center;
}
</style>

# 텍스트 색
<style>
h1 {
  color: lime;
}

h2 {
  color: hotpink;
}

h3 {
  color: blue;
}
</style>

# 여백
<style>
h1 {
  margin-bottom: 80px;
}

h3 {
  margin-left: 50px;
}
</style>