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