CSS
선택자 - CSS3에서 특정 HTML 태그를 선택할 때 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 기초-1</title>
<style type="text/css">
/* 태그 선택자(selector)를 이용하여 아래와 같이 스타일을 적용함 */
h2 {
font-size: 20px; /* 글자 크기 20px 고정 */
color: orange; /* 글자색을 오랜지색 */
}
p {
color: blue; /* p태그들은 전부 글자색이 파란색으로 설정 */
}
</style>
</head>
<body>
<h1>CSS의 기초</h1>
<h2>웹 문서의 내용에 디자인을 적용합니다.</h2>
<p>웹 표준에 의한 웹 문서는 디자인과 내용이 함깨 존재합니다.</p>
<p>내용은 HTML을 이용해서 구성하고, 디자인은 CSS를 이용해서 꾸밉니다.</p>
</body>
</html>
이미지 CSS 적용 내부
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 기초-2</title>
<style type="text/css">
ul {
color: blue; /* 목록의 글자색을 파란색 */
list-style: none; /* 블릿의 형태를 없애는 것 */
list-style: square; /* 블릿의 형태를 사각형으로 함 */
/* padding: 0px; /* 안쪽 여백을 없애기 */
}
img {
border: 2px solid yellow;
}
h1 {
border-bottom-style: dotted;
width: 202px;
}
</style>
</head>
<body>
<img alt="시드니 오페라 하우스" src="images/sydney.png">
<h1>세계 3대 미항</h1>
<ul>
<li>시드니(Sydney), 호주</li>
<li>리우데자네이루(Rio de Janeiro), 브라질</li>
<li>나폴리(Naples), 이탈리아</li>
</ul>
</body>
</html>
이미지 CSS 적용 외부 스타일 시트
@charset "UTF-8";
ul {
color: red; /* 목록의 글자색을 파란색 */
list-style: none; /* 블릿의 형태를 없애는 것 */
list-style: square; /* 블릿의 형태를 사각형으로 함 */
/* padding: 0px; /* 안쪽 여백을 없애기 */
}
img {
border: 2px solid yellow;
}
h1 {
border-bottom-style: dotted;
width: 202px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 기초-3(외부스타일시트)</title>
<!-- link태그를 이용하여 css파일의 경로를 주어 lab03.html파일에 스타일을 준다. -->
<link rel="stylesheet" href="css/first_css.css" type="text/css">
</head>
<body>
<img alt="시드니 오페라 하우스" src="images/sydney.png">
<h1>세계 3대 미항</h1>
<ul>
<li>시드니(Sydney), 호주</li>
<li>리우데자네이루(Rio de Janeiro), 브라질</li>
<li>나폴리(Naples), 이탈리아</li>
</ul>
</body>
</html>
전체 선택자 *
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 기초-4</title>
<style type="text/css">
/* * : 아스타리스크, 와일드카드라고 불리고, 연산자로서는 곱하기 */
*{
color: red;
}
</style>
</head>
<body>
<!-- h1태그는 inline-style을 넣어서 글자색을 black으로 따로
설정함. -->
<h1 style="color: black;">안녕하세요.</h1>
<p>반갑습니다.</p>
<form action="">
<input type="text" name="id"/><br/>
<input type="submit" value="전송">
</form>
</body>
</html>id 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 기초-5(아이디 선택자)</title>
</head>
<body>
<div id="header">
<h1>header 영역</h1>
</div>
<div id="wrap">
<div id="aside">
<h1>aside 영역</h1>
</div>
<div id="content">
<h1>content 영역</h1>
</div>
</div>
</body>
</html>
