12. 웹 표준 사이트 만들기(2019) - 헤더 타이틀 & 웹 폰트

전체소스

index.html

<!DOCTYPE html>

<head>

<title>WEBSTANDARD SITE</title>

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

</head>

<body>

</div>

<a href="http://nanci.tistory.com/">Desinger</a>

<a href="">Publisher</a>

<a href="">Youtube</a>

</div>

<div class="header-tit">

<h1>Professional Publisher & Designer</h1><br/>

<a href="https://nanci.tistory.com/">nanci.tistory.com</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="container">header</div>

</div>

</div>

</body>

</html>

style.css

/* 스타일도 언어설정을 해줘야 한다. 한글이 깨지지 않게 */

@charset "utf-8";

/* 스킵 내비게이션 */

/* skip은 기준점이 되어야 하기 때문에 relative를 사용한다. */

#skip {position: relative;}

/*position: absolute는 위치가 절대적이다라는 의미이다. 위치를 마음대로 옮길 수 있지만 영역이 사라진다는 문제점이 있다. 그래서 약간 붕 떠있는 느낌이 난다.left나 top이런 속성으로 조절할 수 있다. 평소에는 top:-35px로 안보이게 한다. */

#skip a {position: absolute; left: 0px; top:-35px; border: 1px solid #fff; color: #fff; background: #333; line-height: 30px; width: 160px; text-align: center;}

/* tab을 눌럿을 때 skip 메뉴가 활성화되었거나 포커스가 가면.. 아래와 같이 top:0으로 동작되게 한다. */

#skip a:active,

#skip a:focus {top: 0;}

/* 레이아웃 */

#wrap {}

/*header에 배경이미지를 넣어준다. background 속성. 이미지주소를 쓰는 방법은 2가지가 있다. 상대주소, 절대주소. background로 이미지를 불러오면 해상도를 줄이거나 늘려도 이미지가 무제한으로 반복된다. repeat-x는 가로방향으로 반복한다는 의미이다. height 값을 늘려도 세로로는 반복되지 않는다. 화면을 늘리고 줄이면 이미지 위치가 바뀐다. 이미지가 왼쪽 기준으로 정렬되어 있어서 그런다. 포지션을 이용해서 center top으로 이미지의 위치를 지정해준다. background 속성을 쓰면 아래와 같이 3가지 속성을 다 사용할 수 있다. */

#header {height: 325px; background: url(../img/header_bg.jpg) center top repeat-x;}

#contents {height: 800px; background: #222;}

#footer {height: 200px; background: #333;}

/* 컨텐츠 레이아웃 */

/* 영역이 잡힌 다음에는 항상 백그라운드로 영역이 잡혔는지 확인하는 것이 중요하다. */

#cont_nav {height: 200px; background: #333;}

#cont_tit {height: 200px; background: #444;}

#cont_ban {height: 200px; background: #555;}

#cont_cont {height: 200px; background: #666;}

/* 컨테이너 */

.container {width: 990px; margin: 0 auto; height: inherit; background-color: rgba(255, 255, 255, 0.3); }

/* 헤더 */

/* 아래 css를 보면 전체적인 html 구조가 보인다. */

.header {}

.header .header-menu {text-align: right;}

/* a태그는 인라인 구조이다. 그렇기 때문에 text-align: right;를 하면 안 먹힌다. 인라인 구조는 전체영역이 없기 때문이다. a태그는 인라인 구조이기 때문에 padding값이 왼쪽, 오른쪽만 먹힌다. 위 아래로 적용하고 싶다면 성질을 display: block;으로 바꾼다. 그리고 정렬을 위해서 float: left를 쓰면 왼쪽으로 붙고, right를 쓰면 오른쪽을 붙지만 순서가 바뀐다. 그래서 결론적으로 inline-block을 써야 한다. 인라인 성질을 유지하면서 블록구조로 바꾼다. display 속성을 사용할 때 inline-block, inline, block 3가지를 기억하자. */

.header .header-menu a {color: #fff; padding: 10px 0px 10px 13px; display:inline-block;}

.header .header-menu a:hover{color: #666; }

/* 아무것도 없어도 중괄호는 적어줘야 한다. */

.header .header-tit {text-align: center;}

/* h1이 블로구조여서 옆으로 전체를 차지 하기 때문에 inline을 주었고 다시 margin 속성을 적용하기 위해 block을 주었다. 그래서 inline-block이 됨. font-weight: normal 은 h1 태그는 기본적으로 굵어져서 기본 굵기로 설정하기 위해 사용한다. */

.header .header-tit h1 { background-color: #4aa8d4; font-size: 28px; padding: 5px 20px 6px 20px; display: inline-block; color: #fff; margin-top: 40px; font-weight: normal; text-transform: uppercase;}

/* a태그는 인라인구조이기 때문에 옆으로 붙는다. 그래서 블록구조를 적용해서 밑으로 내려가게 한다. 하지만 색상을 적용했을때 블록구조이기 때문에 양 옆으로 색상이 다적용된다. 그래서 inline-block으로 변경한다. 그리고 index.html에 <br/> 태그를 써서 아래로 내린다.

약간 겹치게 하기 위해서 margin-top: -5px;을 준다. */

.header .header-tit a {display: inline-block; background-color: #2698cb; font-size: 18px; color: #fff; padding: 5px 20px 6px 20px; margin-top: -5px;}

.header .header-icon {}

reset.css

@charset "utf-8";

/* 여백 초기화 */

body, div, ul, li, dl, dt, ol, h1, h2, h3, h4, h5, h6, input, fieldset, legend, p, select, table, th, td, tr, textarea, button, form {margin: 0; padding: 0;}

/* a 링크 초기화 */

/* 속성들은 다 기본값들이 있다. 코딩하는데 방해가 된다면 초기화한다. */

a{color: #222; text-decoration: none;}

a:hover {color: #390;}

/* 폰트 초기화 */

/* 윈도우랑 맥이랑 기본폰트가 달라서 초기화함. font-family는 순차적으로 왼쪽부터 순차적으로 적용시켜줌. 첫번째가 없으면 다음거를 적용시킨다. 맥은 첫번째가 나오고 윈도우는 두번째인 맑은 고딕이 나온다. 글자가 틀리면 패딩 속성 적용 시 틀려지기 때문에 크로스 브라우징 작업을 통해 웹 폰트를 사용하여 통일시켜준다. 폰트가 안깔려 있어도 자동으로 설치해준다. 구글 폰트를 검색하여 아래와 같이 'Nanum Gothic'이 첫번째로 오게한다.line-height: 1.5는 1.5가 자손요소에게 상속된다. 예를 들어 h1의 font-size가 32px이라면 32*1.5= 48px 이 된다. */

body, input, textarea, select, button, table {

font-family: 'Nanum Gothic', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;

color: #222; font-size: 13px; line-height: 1.5;

}

'IT공부 > HTML & CSS' 카테고리의 다른 글

14. 웹 표준 사이트 만들기(2019) - 전체 메뉴 수정 (0)	2020.06.17
13. 웹 표준 사이트 만들기(2019) - 헤더 아이콘 수정 (0)	2020.06.17
11. 웹 표준 사이트 만들기(2019) - 헤더 배경 & 메뉴 (0)	2020.06.17
10. 웹 표준 사이트 만들기(2019) - 스킵메뉴 (0)	2020.06.16
09. 웹 표준 사이트 만들기(2019) - 레이아웃2 (0)	2020.06.16

IT블로그

12. 웹 표준 사이트 만들기(2019) - 헤더 타이틀 & 웹 폰트