티스토리 뷰
1.html 작성
<!DOCTYPE html> <html lang="ko"> <head> <!--html 파일의 인코딩--><meta charset="utf-8"> <!--스플로러를 최신으로--><meta http-equiv="X-UA-Compatible" content="IE=Edge"> <!--사이트에 대한 설명--><meta name="description" content="CSS3 연습 페이지 입니다."> <!--검색엔진을 위한 키워드--><meta name="keywords" content="HTML, Web, Markup, Design, Document"> <!--사이트 저작자 표시--><meta name="author" content="gruart"> <!--모바일 최적화--><meta name="viewport" content="width=device-width, initial-scale=1"> <!--[if lt IE 9]> <script src="http://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]--> <link rel="stylesheet" href="../css/grammar.css" /> <script src="../js/grammar.js"></script> <title>HTML 연습</title> </head> <body> <form> <div id="h1_1"><h1>아주 멋진 페이지 제목</h1></div> <div id="h1_2"><h1>아주 멋진 페이지 제목</h1></div> <div id="h1_3"><h1>아주 멋진 페이지 제목</h1></div> <div id="h1_4"><h1>아주 멋진 페이지 제목</h1></div> <div id="h1_5"><h1>아주 멋진 페이지 제목</h1></div> <div id="h1_6"><h1>아주 멋진 페이지 제목</h1></div> <div id="f_7"> <h3><img alt="*" src="../css/first_imp.gif"/> 첫 인상</h3> </div> <div id="h1_8"><h1>아주 멋진 페이지 제목</h1></div> </form> </body> </html> | cs |
2.CSS 파일 작성
body { font-family: verdana, sans-serif; font-size: 12px; } div { margin: 30px 0 30px 0; } #h1_1 h1 { font-family: Arial, sans-serif; font-size: 24px; color: #FFA500 } #h1_2 h1 { font-family: Arial, sans-serif; font-size: 24px; color: #FFA500; padding-bottom: 4px; border-bottom: 1px solid #999999; } #h1_3 h1 { font-family: Arial, sans-serif; font-size: 24px; color: #ffffff; padding: 4px; background-color: #FFA500; } #h1_4 h1 { font-family: Arial, sans-serif; font-size: 24px; color: #666666; padding: 4px; background: #dddddd; border-bottom: 2px solid #cccccc; } #h1_5 h1 { font-family: Arial, sans-serif; font-size: 24px; color: #FFA500; padding-bottom: 14px; background: url(h1_gradient.gif) repeat-x bottom; } #h1_6 h1 { font-family: Arail, sans-serif; font-size: 24px; color: #FFA500; padding-left: 30px; background: url(icon.gif) no-repeat 0 50%; } #f_7 h3 { font-size: 11px; color: darkslateblue; } h3 img { background: #FFA500; vertical-align: middle; /*수직정렬에 사용되며 inline나 inline-block에만 적용됨*/ } #h1_8 h1 { font-family: Arail, sans-serif; font-size: 24px; color: #FFFFFF; padding-left: 30px; background: #FFA500 url(transparent_icon.gif) no-repeat 0 50%; } | cs |
'dev. > web' 카테고리의 다른 글
| [vue.js]라이프 싸이클 속성 (0) | 2019.02.10 |
|---|---|
| [CSS3]태그를 숨기는 3가지 (0) | 2018.12.04 |
| [CSS3]메뉴 만들기 (0) | 2018.12.03 |
| [css3] 선택자 (0) | 2018.12.02 |
| [html] meta 파일 설정 (0) | 2018.11.29 |