한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
t만들어 온 사이트 완성하기!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사이트 만들기1</title>
<!-- SEO -->
<meta name="author" content="김현빈">
<meta name="description" content="향수의 향을 시각화하여 보여주는 사이트">
<meta name="keyword" content="향수,사이트,조말론,샤넬,향">
<meta name="robots" content="all">
<!-- 파비콘 -->
<link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/favicon.png">
<link rel="apple-touch-icon" href="assets/ico/favicon.png">
<!-- CSS -->
<link rel="stylesheet" href="assets/css/fonts.css">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/common.css">
<link rel="stylesheet" href="assets/css/style.css">여태까지 만들어 온 사이트를 모아 한 페이지로 만들어보았다.
처음엔 head에 메타 태그를 넣어 검색에 노출 되게 해주었다.
meta태그란?
<meta> 태그는 웹 페이지의 HTML 코드에서 사용되며, 웹 브라우저나 검색 엔진 등에게 해당 페이지의 정보를 제공하는 역할을 합니다.
일반적으로 <head> 태그 안에 위치하며, 다양한 속성을 사용하여 다양한 정보를 제공할 수 있습니다. 가장 일반적인 <meta> 태그의 속성으로는 다음과 같은 것들이 있습니다.
- charset: 페이지의 문자 인코딩 방식을 지정합니다.
- name: 페이지의 정보의 유형을 지정합니다. 예를 들어, "description"은 페이지의 간단한 요약을 제공합니다.
- content: name 속성에서 지정한 정보의 내용을 지정합니다.
- http-equiv: HTTP 헤더를 대체하여 서버로부터 전송된 헤더 정보를 재정의합니다.
그 후 파비콘을 만들어주고 각 css파일은 만들어준다. 기존에 동일하게 쓰던 reset 값 을 common과 reset 를 따로css파일은 만들어주고 넣고 폰트css도 따로 만들어 링크를 걸어주었다. 그 후 style.css에서 그 동안 만들어 왔던 각 페이지 별
css를 @import를 사용하여 끌어왔다.
@import는 무엇일까
@import는 CSS 코드에서 다른 CSS 파일을 가져와서 사용하는 방법 중 하나입니다.
이 방법은 <link> 태그를 사용하여 외부 CSS 파일을 연결하는 것보다 유용한 경우가 있습니다. 예를 들어, 여러 개의 CSS 파일을 불러와서 하나의 파일로 합치는 것이나, 조건부 CSS를 사용할 때 유용합니다.
@import는 다음과 같은 형식으로 사용됩니다.
@import url("header.css");
@import url("slider.css");
@import url("image.css");
@import url("imgText.css");
@import url("card.css");
@import url("banner.css");
@import url("text.css");
@import url("footer.css");하지만, @import는 일부 브라우저에서 지원하지 않는 경우도 있으며, 파일을 불러오는 속도가 느리기 때문에 사용을 지양하는 것이 좋습니다. 대신, <link> 태그를 사용하여 외부 CSS 파일을 연결하는 것이 일반적으로 권장되는 방법입니다.
SKIP
<div id="skip">
<a href="#">헤더 영역 바로가기</a>
<a href="#">슬라이드 영역 바로가기</a>
<a href="#">이미지 영역 바로가기</a>
<a href="#">이미지/텍스트 영역 바로가기</a>
<a href="#">카드 영역 바로가기</a>
<a href="#">배너 영역 바로가기</a>
<a href="#">텍스트 영역 바로가기</a>
<a href="#">푸터 영역 바로가기</a>
</div>HTML 스킵 링크는 웹 페이지의 내비게이션에 대한 스킵 기능을 제공하는데 사용됩니다. 이 기능은 시각장애인, 저시력자, 키보드 사용자 등이 웹 사이트 내부를 이동할 때 불편함을 최소화하기 위해 만들어졌습니다.
스킵 링크는 웹 페이지의 상단에 위치하며, "Skip to main content"와 같은 텍스트로 표시됩니다. 이 링크는 클릭하면 웹 페이지의 주요 콘텐츠로 즉시 이동합니다.
본문은 각 구역별 섹션을 나눠 만들어 놓은 사이트의 html을 가져와서 붙여준다. 코드는 맨 아래 링크 참조
그 후 이미지 경로를 다 바꿔주면 한 페이지에 여태껏 만들어 온 페이지들을 다 넣을 수 있다.
그 후 각 페이지를 반응형으로 만들기 위해 각 페이지의 style.css로 이동하여 media query를 설정해준다@media(max-width:) width 값 을 정해져 그 값을 도달 했을때의 페이지 변화를 준다.
media query
미디어 쿼리(Media Query)는 CSS의 기능 중 하나로, 뷰포트의 크기나 장치의 특성에 따라 적용되는 스타일을 조건부로 변경할 수 있도록 합니다. 즉, 미디어 쿼리를 사용하면 반응형 웹 디자인을 구현할 수 있습니다.
@media (max-width:1200px){
.container{
width: 100%;
box-sizing: border-box;
}
}
@media (max-width:960px){
.section {
padding: 100px 0;
}
.section__h2 {
font-size: 40px;
margin-bottom: 10px;
}
.section__desc {
font-size: 18px;
margin-bottom: 40px;
}
}
@media (max-width:670px){
.section {
padding: 80px 0;
}
.section__h2 {
font-size: 30px;
}
.section__desc {
font-size: 16px;
margin-bottom: 30px;
}
}이런 식으로 사용하며 각 max-width 값 별로 section 값을 다르게 하고 font-size 도 바꿀수 있다!