위로
아래
CSS 기본형
@charset "UTF-8"; /*언어 설정*/
* { margin : 0; padding : 0; } /* 초기화 */
body #main .main_article h2{ /* # -> id 이름 // . -> class 이름 */
/* 폰트 관련 */
color:black;
text-align:center;
text-decoration:underline;
font-style : italic;
font-weight : bold;
font-family : "HY견고딕", "맑은 고딕";
line-height : 150%; /* 줄간격 */
text-shadow: 3px 3px 5px #444444; /* text-shadow : offset-x offset-y blur-radious */
/* 배경 관련 */
background-color : #00ff00;
background-color : rgba(0,0,0,0); /* 투명 */
background-image: url("../image/yellow_bg.jpg");
background-repeat: no-repeat; /* repeat-x : x축 반복, repeat-y : y축 반복 */
background-position: center top; /* 가로 중앙, 세로 맨 위 */
/* 클릭 태그 a 관련 */
a:link {color:greenyellow; text-decoration: none;} /*링크 걸려 있을 때*/
a:visited {color:darkorange;} /*이미 방문하고 왔을 때*/
a:hover {color:blue; font-weight: bold;} /*마우스를 올려 놨을 때*/
a:active{color:#00ffff} /*눌러져 있을 때*/
textarea { resize : none; border : none; }
}
CSS 파일 연결
<head>
<meta charset="UTF-8">
<title>html연습1</title>
<link rel="stylesheet" type="text/css" href="../css/style02.css">
</head>
CSS 선택자
선택자 종류
- 전체 선택자 : *
- 태그 선택자 : 태그명
- id 선택자 : #
- class 선택자 : .
여백과 테두리
div {
/* 여백 관련 */
padding : 20px 15px 10px 5px; /* 내부 여백. 상 20, 우 15, 하 10, 좌 5px */
margin : 10px; /* 외부 여백. 상하좌우 10px */
margin : 0 auto; /* 중앙 정렬 */
/* 테두리 관련 */
border: solid 1px #ff0000; /* 선 종류, 선 두께, 선 색깔 */
/* solid:실선, dotted:점선, double:이중 실선, dashed:줄표 */
border-radius: 15px /* 꼭짓점 15px만큼 둥글리기 */
/* border-radius의 8가지 방향 순서
top-left-x top-right-x bottom-right-x bottom-left-x /
top-left-y top-right-y bottom-right-y bottom-left-y
*/
}