- 사이트를 만들면서 블로그를 적으면서 제목이 좀 이상하다는 것을 느꼈지만 어쩔 수 없었습니다.
- 다음엔 좀 더 깔쌈하게 만들어 보도록하죠 ㅎㅎ
- 오늘 할 것은 그 동안 만든 것들을 하나로 합쳐주는 일 입니다.
- 반응형 까지 해주었습니다.
- https://kebab000.github.io/web2023/site/site1/index.html 반응형 보고 싶으시면 해당 주소로 가시면 보실 수 있습니다.
- 오늘은 전체 코드를 보는 것 보다 부분부분 코드를 보겠습니다.
<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="케밥00">
<meta name="description" content="식물에 대한 사이트입니다.">
<meta name="keyword" content="케밥00, 사이트, 식물, plant, 튜토리얼">
<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>- 헤드 부분입니다.
- CSS는 모두 링크를 통해서 가져오는 형식으로 index.heml은 깔끔하게 해주었습니다.
- CSS는 원래의 것들을 가져왔고 미디어쿼리 부분만 이따 보도록 하겠습니다.
- SEO라는 처음보는 부분이 보이는데 그것은 제작자, 설명, 키워드등 웹사이트에 대한 정보를 적어주는 부분입니다.
- 그리고 파비콘이 있습니다. 요즘 구글 검색에서는 파비콘이 노출이 되기 때문에 이쁜 파비콘은 필수 입니다.
하지만 내 블로그는 아직파비콘이 없....
<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>
<!-- //skip -->- 바디부분의 달라진 점입니다.
- skip이란 이름의 div태그를 만들었습니다. 이것은 나중에 키보드 만으로 조작을하거나 할 때 사용할 수 있게 만들어준 기능입니다.
- 평소엔 보이지 않다가 tap을 누르면 보이도록 설정해 주었습니다.
- 나머지 바디태그는 각 타입 별로 섹션을 구분해준 뒤 다 가져와서 붙여넣어주었습니다.
- CSS도 가져와서 각 타입 별로 CSS파일을 만든 뒤 붙여넣어주었습니다.
- 그런 뒤 형식에 맞게 조금 정리를 해주면 됩니다.
- 자 이제 미디어 쿼리를 보시죠
/* 이미지-텍스트 미디어 쿼리 */
@media (max-width: 960px){
.img_text__inner .img_text__text {
width: 100%;
}
.img_text__inner .img_text__img {
width: 49%;
}
.img_text__inner .img_text__text h3 {
font-size: 40px;
margin-bottom: 10px;
}
.img_text__inner .img_text__text p {
font-size: 18px;
margin-bottom: 40px;
font-weight: 300px;
}
.img_text__inner .img_text__text ul {
display: none;
}
}
@media (max-width: 600px){
.img_text__inner .img_text__img {
width: 100%;
margin-bottom: 3%;
}
.img_text__inner .img_text__text h3 {
font-size: 30px;
}
.img_text__inner .img_text__text p {
font-size: 16px;
}
}/* 배너 미디어 쿼리 */
@media (max-width: 960px){
.banner__inner h2 {
font-size: 40px;
}
}
@media (max-width: 600px){
.banner__inner h2 {
font-size: 30px;
}
.banner__inner p {
margin-bottom: 50px;
}
}- 미디어 쿼리는 일단 사이즈를 정해줍니다.
- 저는 960px일 때와 600px일 때 설정이 바뀌게 설정해 주었습니다.
- 어떤 섹션은 글씨크기만 살짝 바꿔주면 되는 경우가 있고(배너타입), 사진이랑 싹다 크기를 조정해주어야하는 경우가 있습니다.(이미지-텍스트 타입) 예시를 들기위해 두가지 경우를 모두 가져와 보았습니다.
- 이런 식으로 모든 타입을 하나하나 설정을 해주면 됩니다.
- 저희는 복잡한 것 하나를 같이 보도록하죠(이미지-텍스트타입)
960px 일 때
- 글씨와 사진이 작은 공간에 함께 있으면 복잡하기 때문에 먼저 img_text__text부분에 width값을 100% 주어 혼자서 한 칸을 차지하게 해주었습니다.
- 그리고 사진이 남은 공간을 사이좋게 나누어 가지도록 img_text__img에 width값을 49% 주었습니다.1%는 여백입니다.
- 그리고 h3, p 들의 글씨크기를 설정해주고 글씨가 많은 ul은 없애서 깔끔하게 해주었습니다.
600px 일 때
- 600px 일 때는 더 간단해졌습니다
- img_text__img의 width값도 100%를 주어 사진 하나씩만 나오도록 해주었고 margin-bottom으로 밑에 간격을 주었습니다.
- 그리고 h3, p 크기를 960px일 때보다 조금 줄여주었습니다.
- 이렇게 모든 Type들을 바꾸어주면 끝!! 오늘도 수고하셨습니다.