바디 = 컨텐츠높이 (내용의 길이까지)
퍼센트 = 부모기준. (함부로 쓰는거아님) 부모에 높이가 없을 때 쓰면 안됨
100 vh (뷰포트하이트) = 화면 높이
100vh - 180px
위아래 90씩 남기려할때
height: calc(100vh - 180px);
css는 연산자 앞뒤로 꼭 띄어쓰기 해줘야한다.
안그러면 문자로 인식함
위에서 부모에서 잡아줬으니가 밑에서 100% 사용
-로고
이거 일단은.. 로고가 저게 아니라 파리바게트 svg였으면 딱맞게 들어온거다,,
이미지로 할거면 100 너비 해주면 되고
배경이미지는 컨테인으로 꽉채워주면 된다. 둘다똑같은 결과
배경
background: url('../images/ft_logo_01_spc.png') center center / cover no-repeat;
url 앞에 배경색 : 없음 으로 기본값이 있는거다.
가로스크롤바 없애고 사진 숨기기
오버플로우 : 오토 = 모바일 웹 만들때 가끔 쓰인다.
슬라이드 이미지에 애니매이션 넣어주기
transition: left 0.5s 0.2s;
/* ㄴ> property duration delay */
-슬라이드 이미지 호버 - 마우스 올리면 어두운거 사라지게하기
-글자 안보이게 처리 (메인배너 라고 써있던거)
이외에도 폰트사이즈 0 잡거나 하는등 여러 방법이 있다.
(앵커 안에 또다른 영역이 설계가 되고 글자를 넣어야 한다면 텍스트 인덴트 사용하지 말고 블라인드.)
(블라인드 사용하는 방법이 가장 안전)
-이미지 술라이드에 납작바
text-indent: -9999em;
overflow: hidden;
}
=>원래 저 막대바 에 12345라는 텍스트가 들어있었는디 그 숫자를 빼주려고 넣은거.
근데 텍스트 인덴트를 넣을 때 저 오버프로우 히든과 쌍으로 같이 써줘야 된다. 그래야 내가 설정한 위드스와 헤이트가 들어간다.
-인라인 블럭
인라인블럭은 글자같은 .,블럭이다.
단점들
줄간격이 필요업슬때 없어지지 않아. ->줄간격 0으로 잡기
띄고싶지 않은데 띄어져 -> 방법없음 블럭으로 잡아야대
너무 얇아서 높이 늘려주고 저놈을 라벨로 만들어주고 저놈은 투명으로 만든후 영역안에 디자인을 따로 해줄거다.
숫자가 생겨서.. 비포를 애프터로 바꿔줬음.
이상태인데 위아래 가운데로 넣어주자. 이런거엔 포지션잡지마셈 남발임
(포지션 - 릴레티브 , 탑 6픽셀 이런식.. 여백으로 띌 수 잇는건 여백 주기 좌표아무데나 쓰지말기)
이렇게 마진이나 패딩 이용해야댐
-
호버도넣어줬다.
요새는 밋밋한게 대세라 지저분해보이면 안써도된다.
4번, 5번 이미지는 이동을 안하니까 .. 이미지 활성화됐다알ㄹ려주기
(그런데 얘네는 나중에 자바스크립트 쓰면 다 빠질 코드들이다)
-
어.. 텍스트인덴트하니까 갑자기 스크롤바 엄청나게 생겨버린 현상 하하
(로테이트 해둬서 나가는 방향이 사선이라 이럼.)
황당!
=======>오버플로우 히든 필수!
이때까지 결과
<html>
<!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>파리바게트</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="skip" class="center">
<a href="#paris-main">본문 바로가기</a>
<a href="#paris-gnb">주 메뉴 바로가기</a>
</div>
<header id="paris-hd">
<div class="wrapper">
<h1 class="logo"><a href="/"><span class="blind">파리바게트</span></a></h1>
<h2 class="blind">주 메뉴</h2>
<nav id="paris-gnb" class="clearfix">
<ol class="gnb1">
<li class="depth1">
<a href="#">PRESENTATION</a>
<ul class="depth2">
<li><a href="#">sub1-1</a></li>
<li><a href="#">sub1-2</a></li>
<li><a href="#">sub1-3</a></li>
</ul>
</li>
<li class="depth1">
<a href="#">BREAD NOW</a>
<ul class="depth2">
<li><a href="#">sub2-1</a></li>
<li><a href="#">sub2-2</a></li>
<li><a href="#">sub2-3</a></li>
</ul>
</li>
<li class="depth1">
<a href="#">PRODUCTS</a>
<ul class="depth2">
<li><a href="#">sub3-1</a></li>
<li><a href="#">sub3-2</a></li>
<li><a href="#">sub3-3</a></li>
</ul>
</li>
</ol>
<ol class="gnb2">
<li class="depth1">
<a href="#">STORE</a>
<ul class="depth2">
<li><a href="#">sub4-1</a></li>
<li><a href="#">sub4-2</a></li>
<li><a href="#">sub4-3</a></li>
</ul>
</li>
<li class="depth1">
<a href="#">DELIVERY</a>
<ul class="depth2">
<li><a href="#">sub5-1</a></li>
<li><a href="#">sub5-2</a></li>
<li><a href="#">sub5-3</a></li>
</ul>
</li>
<li class="depth1">
<a href="#">PROMOTION</a>
<ul class="depth2">
<li><a href="#">sub6-1</a></li>
<li><a href="#">sub6-2</a></li>
<li><a href="#">sub6-3</a></li>
</ul>
</li>
</ol>
</nav>
<button class="btn-sch"><span class="blind">검색하기</span></button>
</div>
</header>
<main id="paris-main">
<section class="main-banner-container">
<h2 class="blind">메인배너</h2>
<input type="radio" id="mb-radio1" name="mb-radio" checked>
<input type="radio" id="mb-radio2" name="mb-radio">
<input type="radio" id="mb-radio3" name="mb-radio">
<input type="radio" id="mb-radio4" name="mb-radio">
<input type="radio" id="mb-radio5" name="mb-radio">
<div class="main-banner-wrap">
<ol class="main-banner">
<li class="main-banner-slide1"><a href="#">메인배너1</span></a></li>
<li class="main-banner-slide2"><a href="#">메인배너2</span></a></li>
<li class="main-banner-slide3"><a href="#">메인배너3</span></a></li>
<li class="main-banner-slide4"><a href="#">메인배너4</span></a></li>
<li class="main-banner-slide5"><a href="#">메인배너5</span></a></li>
</ol>
</div>
<div class="main-banner-pagination">
<label for="mb-radio1" class="mb-label1">1</label>
<label for="mb-radio2" class="mb-label2">2</label>
<label for="mb-radio3" class="mb-label3">3</label>
<label for="mb-radio4" class="mb-label4">4</label>
<label for="mb-radio5" class="mb-label5">5</label>
</div>
<div class="main-banner-controls">
<label for="mb-radio1" class="mb-label1">1</label>
<label for="mb-radio2" class="mb-label2">2</label>
<label for="mb-radio3" class="mb-label3">3</label>
<label for="mb-radio4" class="mb-label4">4</label>
<label for="mb-radio5" class="mb-label5">5</label>
</div>
</section>
</main>
<footer id="paris-ft">
푸터영역
</footer>
</body>
</html>
스타일
@charset 'UTF-8';
#paris-main {}
#paris-main > section {}
#paris-main > section > .wrapper {}
#paris-main > section h2 {}
/* 1. 메인배너 */
.main-banner-container {
position: relative;
}
.main-banner-container input {
display: none;
}
.main-banner-wrap { /* 스크린 */
position: relative;
width: 100%;
height: calc(100vh - 180px);
background-color: #ccc;
overflow: hidden;
}
.main-banner { /* 5개짜리 전체 리스트 */
position: absolute;
left: 0;
top: 0;
width: 166.6666%;
height: 100%;
transition: left 0.5s 0.2s;
/* ㄴ> property duration delay */
}
.main-banner li { /* 개별 슬라이드 */
float: left;
width: 20%;
height: 100%;
background-position: center center;
background-size: cover;
}
.main-banner-slide1 {background-image: url('../images/main_img_01.jpg');}
.main-banner-slide2 {background-image: url('../images/main_img_02.jpg');}
.main-banner-slide3 {background-image: url('../images/main_img_03.jpg');}
.main-banner-slide4 {background-image: url('../images/main_img_04.jpg');}
.main-banner-slide5 {background-image: url('../images/main_img_05.jpg');}
.main-banner li a {
display: block;
width: 100%;
height: 100%;
background-color: #000;
text-indent: -9999em; /*한줄같은경우 블라인드 쓰지 않고 인덴트로가능 */
color: white;
overflow: hidden;
opacity: 30%;
transition: opacity 0.3s;
}
.main-banner li a:hover {
opacity: 0;
}
.main-banner-pagination{
height: 90px;
padding: 24px 0;
text-align: center;
line-height: 0;
}
.main-banner-pagination label{
display: inline-block;
width: 48px;
height: 16px;
margin: 0 10px;
text-indent: -9999em;
vertical-align: middle;
overflow: hidden;
opacity: 0.2;
cursor: pointer;
}
.main-banner-pagination label:after{
display: block;
height: 4px;
margin-top: 6px;
background-color: #023586;
content: '';
opacity: 0.3;
transition: 0.3s;
border-radius: 6px;
}
.main-banner-pagination label:hover:after{
opacity: 0.5;
}
/* 라디오버튼으로 배너 동작 구현 */
#mb-radio1:checked ~ .main-banner-wrap .main-banner {left: 0%;}
#mb-radio2:checked ~ .main-banner-wrap .main-banner {left: -33.3333%;}
#mb-radio3:checked ~ .main-banner-wrap .main-banner,
#mb-radio4:checked ~ .main-banner-wrap .main-banner,
#mb-radio5:checked ~ .main-banner-wrap .main-banner {left: -66.6666%;}
#mb-radio1:checked ~ .main-banner-wrap .main-banner-slide1 a,
#mb-radio2:checked ~ .main-banner-wrap .main-banner-slide2 a,
#mb-radio3:checked ~ .main-banner-wrap .main-banner-slide3 a,
#mb-radio4:checked ~ .main-banner-wrap .main-banner-slide4 a,
#mb-radio5:checked ~ .main-banner-wrap .main-banner-slide5 a{opacity: 0;}
#mb-radio1:checked ~ .main-banner-pagination .mb-label1:after,
#mb-radio2:checked ~ .main-banner-pagination .mb-label2:after,
#mb-radio3:checked ~ .main-banner-pagination .mb-label3:after,
#mb-radio4:checked ~ .main-banner-pagination .mb-label4:after,
#mb-radio5:checked ~ .main-banner-pagination .mb-label5:after {
height: 6px;
margin-top: 5px;
opacity: 1;
border-radius: 3px;
}
.main-banner-controls label{
display: none;
}
/*이전버튼 <*/
#mb-radio1:checked ~ .main-banner-controls .mb-label5,
#mb-radio2:checked ~ .main-banner-controls .mb-label1,
#mb-radio3:checked ~ .main-banner-controls .mb-label2,
#mb-radio4:checked ~ .main-banner-controls .mb-label3,
#mb-radio5:checked ~ .main-banner-controls .mb-label4{
position: absolute;
left: 20px;
top: 0%;
margin-top: -18px;
display: block;
transform: rotate(45deg);
}
/*다음버튼>*/
#mb-radio1:checked ~ .main-banner-controls .mb-label2,
#mb-radio2:checked ~ .main-banner-controls .mb-label3,
#mb-radio3:checked ~ .main-banner-controls .mb-label4,
#mb-radio4:checked ~ .main-banner-controls .mb-label5,
#mb-radio5:checked ~ .main-banner-controls .mb-label1{
position: absolute;
right: 20px;
top: 0%;
margin-top: -18px;
display: block;
transform: rotate(-135deg);
}
/* 2. 프리젠테이션 */
.main-banner-controls{
position: absolute;
left: 0;
top: calc((100vh - 180px) / 2);
width: 100%;
}
.main-banner-controls label{
display: none;
position: relative;
width: 36px;
height: 36px;
border: 2px solid #fff;
border-width: 0 0 2px 2px;
text-indent: -9999em;
overflow: hidden;
}
/* #mb-radio5:checked ~ .main-banner-pagination .mb-label5:after { */
