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

11. 웹 표준 사이트 만들기(2019) - 헤더 배경 & 메뉴

webstandard2019-master.zip

2.70MB

첨부파일 안에 이미지를 사용하여 배경화면을 만든다.

첨부파일에서 이미지를 복사하여 아래와 같이 붙여넣는다.

전체소스

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 {}

.header .header-icon {}

index.html

<!DOCTYPE html>

<head>

<title>WEBSTANDARD SITE</title>

</head>

<body>

</div>

<div class="header">

<div class="header-menu">

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

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

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

</div>

<div class="header-tit"></div>

<div class="header-icon"></div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

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

</div>

</div>

</body>

</html>

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

13. 웹 표준 사이트 만들기(2019) - 헤더 아이콘 수정 (0)	2020.06.17
12. 웹 표준 사이트 만들기(2019) - 헤더 타이틀 & 웹 폰트 (0)	2020.06.17
10. 웹 표준 사이트 만들기(2019) - 스킵메뉴 (0)	2020.06.16
09. 웹 표준 사이트 만들기(2019) - 레이아웃2 (0)	2020.06.16
08. 웹 표준 사이트 만들기(2019) - 레이아웃1 (0)	2020.06.16

IT블로그

11. 웹 표준 사이트 만들기(2019) - 헤더 배경 & 메뉴