15. 웹 표준 사이트 만들기(2019)

15. 웹 표준 사이트 만들기(2019) - 전체 타이틀

구글 폰트 사용하기

전체소스

index.html

...

<link href="https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap" rel="stylesheet">

</head>

<body>

...

...

<div id="cont_tit">

<div class="container">

<div class="tit">

<h2>"나는 퍼블리셔다."</h2>

<a href="#" class="btn"><span class="ir_pm">전체메뉴</span></a>

</div>

...

</div>

....

style.css

...

/* 타이틀 */

/* 전체메뉴(.btn)라는 테스트가 .tit .btn {position: absolute; top: 0; right: 0;}으로 인해서 브라우저 기준으로 위치가 잡혀 부모 태그에 position: relative라고 설정한다(기준점 역할을 한다.). */

.tit {position: relative;}

/* letter-spacing 글자와 글자사이 간격. */

.tit h2 {font-size: 40px; text-align: center; padding: 5px 0; letter-spacing: 2px; color: #2c94c4;font-family: 'Nanum Brush Script', cursive;}

/* position: absolute; 위치를 마음대로 옮길 수 있지만 영역이 없어진다. */

.tit .btn {position: absolute; top: 5px; right: 0; width: 60px; height: 60px; background: url(../img/icon.png) no-repeat 0 -600px;}

reset.css

...

/* 제목 태그 초기화 */
h1, h2, h3, h4, h5, h6 {font-size: 13px; color: #222; font-weight: normal;}

...