쌓고 쌓다

[CSS] CSS 삽입 방법 및 기본 문법 본문

프로그래밍/html & css

[CSS] CSS 삽입 방법 및 기본 문법

승민아 2023. 1. 19. 11:25

CSS 삽입 방법

1. <style> 태그

<!DOCTYPE html>
<head>
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>제목</h1>
</body>
</html>

<style> 태그 안에 h1과 같은 선택자를 지정하여 꾸밀 영역을 선택한다.

h1으로 인해 <h1> 태그 영역의 글자 색을 파란색으로 지정한다.

 

2. style 속성

<p style="color:green; text-decoration:underline">내용</p>

style 속성을 추가하여 CSS 명령을 적어준다.

 

3. CSS 파일

index.html

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <h3>부제목</h3>
</body>
</html>

 

mystyle.css

h3 {
    color:skyblue
}

 

배경 색상

=> background-color

<style>
body {
    background-color:yellow
}

p {
    background-color: green
}
</style>

<body>
    <h1>배경 색상</h1>
    <p>내용</p>
</body>

 

글자 색상

=> color

<p style="color:red">내용</p>

+ 색상코드

R G B로 각각의 색깔이 포함된 정도를 16비트로 2자리씩 표현하여 사용할 수 있다.

<p style="color: #da70d6">내용</p>

R(16진수 da는 10진수로 218)

G(70은 10진수로 112)

B(d6는 10진수로 214)가 포함된 색상이다.

 

글자 정렬

=> text-align

<style>
    h1 {
        text-align: center
    }
</style>

<h1>제목</h1>

 

줄 간격

=> line-height

<style>
    p {
        line-height: 200%
    }
</style>

<p>안녕하세요.<br>반갑습니다.</p>

 

밑줄

=> text-decoration

<style>
    span {
        text-decoration: underline;
    }
</style>

<p>안녕하세요.저의 이름은 <span>홍길동</span>입니다.</p>

 

폰트 설정

=> font-family

<style>
    span {
        font-family: "돋움";
    }
</style>

<p>안녕하세요. <span>홍길동입니다.</span></p>

 

글자 크기

=> font-size

<style>
    span {
        font-size: 25px;
    }
</style>

<p>안녕하세요. <span>홍길동입니다.</span></p>

 

글자 굵기 및 폰트 스타일

=> font-weight 및 font-style

<style>
    span {
        font-weight: bold;
        font-style: italic;
    }
</style>

<p>안녕하세요. <span>홍길동입니다.</span></p>

 

글자 그림자

=> text-shadow

<style>
    h1 {
        text-shadow: 3px 3px 5px #666666
    }
</style>


<h1>대문 제목</h1>

text-shadow 속성의 속성값은

순서대로 '오른쪽 그림자 길이', '아래쪽 그림자 길이', '흐린정도', '그림자 색상' 이다.

 

링크 글자 꾸미기

<style>
    a:link {color: grey; text-decoration: none;}
    a:visited {color: grey; text-decoration: none;}
    a:hover {color:green; text-decoration:underline;}
    a:active {color:grey; text-decoration:none;}
</style>

<body>
    <ul>
        <li><a href="#">링크1</a></li>
        <li><a href="#">링크2</a></li>
    </ul>
</body>

a:link

 

a:hover

  • <a> 태그의 href 속성에 사용된 샵은 임시 링크를 의미하며 실제로 페이지가 이동하진 않는다.
  • a:link : 링크가 걸린 기본 상태. 보여지는 상태를 의미함.
  • a:visited: 한번 이상 방문한 페이지의 상태
  • a:hover : 마우스 포인터를 글자 위에 올린 상태
  • a:active : 마우스로 글자를 클릭한 순간의 상태

 

저작자표시 비영리 변경금지

'프로그래밍 > html & css' 카테고리의 다른 글

[CSS] 선택자  (0) 2023.01.23
[CSS] 박스 모델  (0) 2023.01.20
[HTML] 폼 양식  (0) 2023.01.15
[HTML] <audio>, <video>, <ul>, <ol>, <a> 태그  (0) 2023.01.15
[HTML] <h1>, <p>, <br>, <img> 태그 + 특수 문자 사용  (1) 2023.01.12
'프로그래밍/html & css' Related Articles more
Comments