안녕하세요
3주차 정리 (05/30 ~ 06/03) 본문
3주차 노트
- 5월30일 11일차 - 반응형 화면 구현하기
- 5월31일 12일차 - slick 슬라이드 버튼 구현 [jquery]
- 06월02일 13일차 - 단일 메뉴, 다단메뉴 애니메이션 구현. 애니메이션은 중간단계가 필요합니다.
- 6월3일14일차 - sticky 화면 5:5 분할, [js] scrollTop
11일차
반응형 화면
반응형화면으로 메뉴를 구성하는 방법을 배웠습니다.
주석 입력 방법입니다. 협업을 할 때에는 ~를 누가 ~를 언제 수정했다. 하고 기록을 남기는 것이 중요합니다.
<div class="Wrap">
<!-- { 2022.05.30 young -->
<header class="header"></header>
<!-- 2022.05.30 young } -->
/* 2022.05.30 young */
.header {}
// 2022.05.30 young
document.querySelector('.header').style.color = 'red'
html 기본 틀입니다.
<body>
<div class="Wrap">
<header class="header"> </header>
<main> </main>
<footer> </footer>
</div>
</body>
없애기 none의 대척점에 있는 나타내기는 block 입니다.
display: none; <-> display: block;
!important는 css가 js보다 우선하게 하는 방법입니다.
하지만 기억만 해 둘 뿐 실제로 이용할 일은 거의 없습니다. 작업이 미숙하다는 느낌을 받게 됩니다.
.header {
color: blue !important;
}
반응형으로 만드는 방법입니다. 768px 이하의 사이즈일 경우에 적용됩니다. 기준 768px는 아이패드 가로사이즈였습니다.
max-width:768px 는 화면의 크기가 768px보다 작을 경우 적용되도록 한다는 의미입니다.
@media (max-width:768px) { }
모바일버전과 pc버전 간 화면을 전환하는 버튼을 만들 때 이용하는 방법입니다.
<div class="mopen">open</div>
.mopen {
display: none;
}
@media (max-width:768px) {
.mopen {
display: block;
}
}
반응형 화면을 구현해봅니다.
작동원리는 만들어 둔 css 속성을 @media 안에 붙여 넣고 필요한 속성만을 골라서 바꾸면 됩니다.
@media (max-width:1000px) {
.header .container {
display: flex;
justify-content: space-between;
width: auto; /* 1200px 고정이 아니라 화면 크기에 따라 변화하는 auto 로 설정합니다. */
margin: 0 auto;
}
.header .container ul {
display: flex;
flex-direction: column;
gap: 0;
line-height: 40px;
}
메뉴 버튼을 누를 때 left: -100%; 값이 left: 0;이 되도록 하면 숨기고 나타나도록 할 수 있습니다.
nav {
position: fixed;
left: -100%;
}
nav.on {
left: 0;
}
js에서 click 이벤트를 구현합니다.
document.querySelector('.mopen').addEventListener('click', function() {
document.querySelector('nav').classList.toggle('on')
})
부드럽게 만들기 위해 transition을 줍니다.
nav {
transition: left 0.5s;
}
메뉴박스를 x 모양으로 바꿉니다.
document.querySelector(".mopen").addEventListener("click", function () {
document.querySelector("nav").classList.toggle("on");
this.classList.toggle("on");
}); .mopen.on span:nth-child(1) {
display: none; }
.mopen.on span:nth-child(2) {
transform: rotate(45deg); }
.mopen.on span:nth-child(3) {
transform: rotate(-45deg); }
.mopen.on span:nth-child(4) {
display: none; }
12일차
슬라이드
slick과 jquery로 이전슬라이드, 다음슬라이드 버튼, 선택한 슬라이드로 바로 이동하는 버튼을 구현했습니다.
[수업 중 구현한 버튼 slide 페이지 주소입니다.]
slick 다운로드와 설정 방법입니다.
https://kenwheeler.github.io/slick/
slick을 다운로드 받고 압축을 풉니다. 아래의 파일을 복사해서 폴더 안에 붙여넣으면 됩니다.
slick.css
slick.min.js
슬릭 구현은 간단합니다. div 안에 넣은 뒤 jquery로 div를 선택하고 .slick()을 해주면 끝입니다.
<div class="test_slick">
<div class="itm">01</div>
</div>
$(function(){
$('.test_slick').slick();
})
슬라이드를 구현해봅니다.
slick은 자식이 많아지기 때문에 번호로 선택하기 어렵습니다. nth-child 를 이용하지 말고 class로 선택합니다.
shortcut : figure.itm0$.itm*3
<section class="main_visual">
<div class="main_slider">
<figure class="itm01 itm"></figure>
</div>
</section>
figure에 background가 깔리게 되는데 높이가 필요합니다.
.main_visual .main_slider figure {
height: 600px;
}
이미지를 background에 줍니다.
.main_visual .main_slider .itm01 {
background: url(../img/mainvisual01.jpg);
}
background 사이즈를 조절합니다. cover로 이미지가 박스를 가득 채우도록 합니다.
.main_visual .main_slider .itm01 {
background: url(../img/mainvisual01.jpg) no-repeat center center/cover;
}
js 설정을 합니다.
dots 는 각각의 슬라이드에 해당하는 위치로 이동하는 버튼을 만듭니다.
$(function () {
$(".main_slider").slick(){
dots: true,
};
});
화살표 버튼을 만듭니다. 검사를 통해 class로 버튼을 찾을 수 있습니다.
.main_visual .main_slider .slick-arrow { }
슬라이드가 position: relative; 되어 있습니다. 버튼의 position을 absolute로 바꿉니다.
previous 버튼이 이미지보다 뒤로 가 있기 때문에 z-index: 999;를 주어 올려줍니다.
.main_visual .main_slider .slick-arrow {
position: absolute;
z-index: 999;
}
margin으로 거리를 벌려 화살표의 위치를 조절합니다.
.main_visual .main_slider .slick-prev {
margin: 0 0 0 -600px
}
.main_visual .main_slider .slick-next {
margin: 0 0 0 600px
}
화살표를 만듭니다.
.main_visual .main_slider .slick-arrow {
width: 100px;
height: 100px;
font-size: 0;
border: none;
outline: none;
background: transparent;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
}
.main_visual .main_slider .slick-prev {
margin: 0 0 0 -600px;
transform: rotate(-45deg);
}
.main_visual .main_slider .slick-next {
margin: 0 0 0 600px;
transform: rotate(135deg);
}
화살표의 위치가 중간보다 내려가있습니다. transform을 두 번 적용하였기 때문에 위에서 적용하였던 translate(-50% -50%);이 적용이 되지 않았습니다. transfrom을 합쳐줍니다.
.main_visual .main_slider .slick-prev {
margin: 0 0 0 -600px;
transform: translate(-50%, -50%) rotate(-45deg);
}
.main_visual .main_slider .slick-next {
margin: 0 0 0 600px;
transform: translate(-50%, -50%) rotate(135deg);
}
dots를 하단 버튼으로 만듭니다.
.main_visual .main_slider .slick-dots {
position: absolute;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
}
.main_visual .main_slider .slick-dots li {
display: inline-block;
width: 80px;
height: 5px;
background: #333;
margin: 0 3px;
}
.main_visual .main_slider .slick-dots button {
display: none;
}
현재 슬라이드의 버튼 색을 바꿉니다.
.main_visual .main_slider .slick-dots li.slick-active {
background: #f00
}
슬라이드에 글씨를 넣습니다.
<figure class="itm01 itm">
<div class="inner">
<h3>01.Lorem ipsum dolor sit amet.</h3>
<a href="">more</a>
</div>
</figure>
position: absolute; 로 위치를 잡아줍니다.
.main_visual .main_slider .inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1200px;
}
figure마다 position: relative;를 설정합니다.
.main_visual .main_slider figure {
position: relative;
height: 600px;
}
글자에 shadow를 줍니다.
.main_visual .main_slider .inner {
color: #fff;
text-shadow: 0 0 5px;
}
폰트를 조절합니다.
.main_visual .main_slider .inner h3 {
font-size: 50px;
font-weight: 700;
margin: 0 0 20px 0;
}
more 버튼을 만듭니다.
.main_visual .main_slider .inner a {
display: inline-block;
padding: 5px 30px 10px 30px;
background: #333;
border: 1px solid #fff;
}
js로 글자가 올라오는 애니메이션을 만듭니다. c는 현재 페이지를 나타냅니다.
$(".main_slider").on("afterChange", function (e, s, c) {
console.log(e, s, c);
});
페이지 숫자를 나타나도록 해봅니다.
<div class="num">1</div>
</section>
$(".main_slider").on("afterChange", function (e, s, c) {
console.log(e, s, c);
$(".num").text(c + 1 + "/" + s.slideCount);
});
새로고침 했을 때는 나타나지 않습니다. 항상 나올 수 있도록 합니다.
이상하게 첫 페이지는 NaN이 출력되길래 삼항연산자로 수정을 합니다.
$(function () {
$(".main_slider").on("init reInit afterChange", function (e, s, c) {
console.log(e, s, c);
$(".num").text((c ? c + 1 : 1) + " / " + s.slideCount);
});
$(".main_slider").slick({
dots: true,
});
});
글자가 올라오는 애니메이션을 만듭니다.
$(function () {
$(".main_slider").on("init reInit afterChange", function (e, s, c) {
console.log(e, s, c);
$(".num").text((c ? c + 1 : 1) + " / " + s.slideCount);
let cur = $(".slick-current");
cur.addClass("xx").siblings().removeClass("xx");
});
$(".main_slider").slick({
dots: true,
});
});
transition: 0.5s 0.5s; 로 딜레이를 줄 수 있습니다.
.main_visual .main_slider figure a {
transform: translateY(100px);
opacity: 0;
}
.main_visual .main_slider figure.xx a {
transform: translateY(0);
opacity: 1;
transition: 0.5s 1s;
}
js 자동으로 슬라이드가 넘어가도록 합니다.
$(".main_slider").slick({
dots: true,
autoplay: true,
autoplaySpeed: 4000,
mouseOnHover: false,
mouseOnFocus: false,
});
transition이 hover에도 적용되어서 천천히 색상이 변합니다.
특정 css에만 적용되도록 transition-property: 를 적용합니다.
.main_visual .main_slider figure.on a {
transform: translateY(0);
opacity: 1;
transition: 0.5s 0.6s;
transition-property: transform, opacity;
}
extention
color highlight 색상이 글자의 배경에 담겨 눈에 띄도록 바꿔줍니다.
13일차
다단메뉴
[수업을 마치고 개인적으로 다단 메뉴 안의 다단 메뉴를 구현해보았습니다.]
하나의 큰 다단메뉴는 height를 조절하여 애니메이션을 적용 할 수 있지만,
다단메뉴 안의 이중 다단 메뉴를 구현하기 위해서는 display: none;이 필요하기에 애니메이션을 적용할 수 없었습니다.
shortcut : 대괄호 안에 내용을 입력할 수 있습니다.
ul>li*7{BOX0$}
외부 스타일 시트(External style sheet) 모듈화
외부 스타일 시트는 모듈화의 개념입니다. css 파일을 불러와 스타일을 적용시킵니다.
내부 스타일 시트(Internal style sheet)
내부 스타일 시트란 style 태그를 이용하여 해당 html 문서에 스타일을 적용시키는 것입니다.
인라인 스타일(Inline style)
인라인 스타일이란 html 요소 내부에서 style 속성을 사용하여 CSS 스타일을 적용하는 방법입니다.
인라인 스타일(Inline style)이 외부/내부 스타일 보다 우선합니다.
javascript의 적용범위는 인라인 스타일(Inline style)이므로 외부/내부 스타일보다 우선합니다.
margin, padding, inset 축약형
축약형의 방향 : 상 우 하 좌 (4)
축약형의 방향 : 상 좌우 하 (3)
축약형의 방향 : 상하 좌우 (2)
박스의 기본 성질
display:block
투명하다.
width: auto / height: auto
Y축으로 쌓여간다.
block 옆에 block이 오지 못하게 한다.
태그는 크게 inline 과 block 으로 나뉩니다.
inline 태그 (글자 그림 등 내용에 관여하는 태그)
<span></span>
<strong></strong>
<em></em>
<i></i>
<button></button>
<input />
나머지는 block 속성을 가집니다.
inline과 block의 차이
block 속성은 width height margin padding 값을 가집니다.
inline 속성은 좌우 margin padding 만을 가집니다. 상하 padding의 경우 background를 포함하여 padding이 적용된 것 처럼 보입니다.
attribute란 html 태그안에서 명시되는 속성들을 가리킵니다. ( class, id, href, src, etc. )
property란 CSS 스타일 적용을 위해 사용하는 속성들을 가리킵니다. ( width, display, position, etc. )
선택자 종류입니다.
* 는 모든 선택자입니다.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
tag 선택자
section li {
color: #f00;
}
section li:nth-child(1) {
color: #369;
}
nth-child 는 자식의 순서를 기준으로 합니다.
ul 안에 li div 가 자식으로 존재한다면 div는 ul:nth-child(1)이 아니라 ul:nth-child(2) 입니다.
section li:nth-child(1) {
color: #369;
}
section div:nth-child(2) {
color: #ff0;
}
nth-of-type() 은 태그 타입별로 선택합니다.
section div:nth-of-type(2) {
/* 태그 타입의 두번째를 기준으로 합니다. 2번째 div가 선택됩니다. */
color: #0ff;
}
class와 id모두에 적용될 때는 id가 우선됩니다.
#color {
color: #0f0;
}
.color {
color: #359;
}
~li 아래쪽의 형제 li 모두를 선택합니다.
.color ~ li {
color: rgb(255, 30, 240);
}
+ li 인접형제 선택자 : 가장 인접한 아래의 형제를 하나 선택합니다.
.color + li {
color: chocolate;
}
attr 선택자는 [ ] 안에 입력하며, attr로 선택할 수 있습니다.
input[type="text"] {
border: 1px solid #f00;
}
[class="color"] {
background: #ff0;
}
class*="class_name" * 표시는 "모든"을 의미합니다. col 이란 class를 가진 모든 attr을 선택합니다.
[class*="col"] {
background: #ff0;
}
, 를 이용할 때에는 주의해야 합니다. 아래의 경우
section 안의 ul, 그리고 모든 div 입니다.
section안의 ul과 section안의 div가 아닙니다,
section ul,
div {
background: #ddd;
}
section 안의 ul과 div 를 선택하는 올바른 형태는 아래와 같습니다. 착각하기 쉬우니 주의합니다.
section ul,
section div {
background: #ddd;
}
input 기본 테두리는 border / focus 상태에서 가장 밖에 나타나는 테두리는 outline 입니다.
다단메뉴를 만들기 전에 고정 메뉴를 구현해봅니다.
우선은 헤더의 로고, 메뉴 틀을 만듭니다.
#header {
line-height: 100px;
background: #ddd;
}
#header .container {
display: flex;
width: 1200px;
margin: 0 auto;
}
logo와 메뉴 사이를 벌립니다.
nav {
margin: 0 0 0 auto;
}
메뉴 사이의 간격을 벌립니다.
nav > ul > li > a {
display: block;
padding: 0 40px;
}
작은 메뉴의 위치를 absolute와 inset으로 조절합니다.
nav > ul > li {
position: relative;
}
nav > ul > li ul {
/* top, right, bottom, left 대신에 inset: 0 0 0 0; 을 사용할 수 있습니다. */
position: absolute;
inset: 0 auto auto 0;
background: #fff;
z-index: 999;
width: 100%;
}
hover를 적용해봅니다. display: none;을 주어 고정되어 나타나던 메뉴창을 보이지 않게 합니다.
nav > ul > li ul {
position: absolute;
inset: 90px auto auto 0;
background: #fff;
z-index: 999;
display: none;
width: 100%;
}
hover가 될 경우 block을 주어 나타나도록 합니다.
nav > ul > li:hover ul {
display: block;
}
가상요소 선택자로 메뉴의 윗부분을 뾰족하게 만들어 봅니다.
우선 박스를 만듭니다.
nav > ul > li ul::before {
content: "";
position: absolute;
inset: -10px auto auto 50%;
transform: translateX(-50%) rotate(45deg);
width: 20px;
height: 20px;
border: 1px solid #333;
background: #fff;
}
다음으로 박스를 가리기 위해 li에 position: relative; 와 background를 줍니다.
nav > ul > li ul li {
position: relative;
background: #fff;
border-bottom: 1px solid #ddd;
}
동그랗게 만들어 주기도 합니다.
nav > ul > li:nth-child(2) ul::before {
content: "";
position: absolute;
inset: -10px auto auto 50%;
transform: translateX(-50%) rotate(45deg);
width: 20px;
height: 20px;
border: 3px solid #f00;
border-radius: 50%;
background: #fff;
z-index: 999;
}
가상요소선택자 ::before는 box-sizing: border-box; 가 적용되어 있지 않습니다. 별도로 속성을 줍니다.
box-sizing: border-box;
아래에서 위로 나타나는 애니메이션을 적용해봅니다.
display: none;과 같이 수치가 없는(중간 값이 없는) 경우에는 애니메이션이 적용되지 않습니다.
dispaly 속성을 없애고, inset으로 높이와 opacity로 보이지 않게 합니다.
nav > ul > li ul {
position: absolute;
inset: 150px auto auto 50%;
z-index: 999;
width: 200px;
transform: translateX(-50%);
background: #fff;
border: 4px solid #369;
opacity: 0;
}
opacitiy: 0; 의 경우에는 화면 상에 보이지만 않을 뿐 실제로는 위치하고 있기 때문에 메뉴가 있을 자리에 hover를 하면 메뉴가 나타나버립니다.
visibility로 아래에 위치해 있을 때 선택되지 않도록 합니다.
nav > ul > li ul {
...
+visibility: hidden;
}
inset으로 높이를 조절하고 opacity로 다시 나타나게 합니다. 그리고 transition을 줍니다.
nav > ul > li:hover ul {
inset: 90px auto auto 50%;
opacity: 1;
visibility: visible;
transition: 0.5s;
}
이중 다단메뉴를 구현해봅니다.
우선 ul > li 로 header 라인의 메뉴버튼을 만듭니다. (ul > li)
그 안에 a로 menu01 버튼을 만든 뒤 같은 인덴트에 ul > li 로 sub menu01을 만듭니다. (ul > li ul > li)
마찬가지로 같은 인덴트에 ul > li > a 를 만들면 html구조는 완성됩니다. (ul > li ul > li ul > li)
css를 작업합니다. 위에서와 동일한 방법으로 sub 메뉴를 구현합니다.
position: relative;
}
nav > ul > li > ul {
position: absolute;
inset: 100px auto auto 50%;
width: 100%;
transform: translateX(-50%);
background: yellow;
opacity: 0;
transition: 0.2s;
visibility: hidden;
}
nav > ul > li:hover ul {
opacity: 1;
visibility: visible;
}
hover의 기준이 되어 줄 "sub menu" 01~05에 position: relative 속성을 적용합니다.
위의 ul>li 바로 아래의 ul>li 가 되어야 합니다. 헷갈리지 않도록 클래스를 주어도 됩니다.
position: relative;
}
position: absolute;
inset: 0 auto auto 100%;
width: 100%;
opacity: 0;
}
a 에 배경을 주었습니다. a를 보이지 않도록 합니다.
nav > ul > li > ul > li > ul > li > a {
display: none;
}
hover의 기준은 "sub menu" 01~05가 되어야 합니다. 두번째 ul의 li가 01~05입니다.
nav > ul > li > ul > li:hover ul > li > a {
display: block;
}
14일차
5:5 화면분할 슬라이드
filter : grayscale;을 통해서 img를 흑백으로 바꿀 수 있습니다. (0~1)
brightness는 이미지 밝기를 조절할 수 있습니다. (0~1)
letter-spacing: 1em;
글자 사이의 간격을 띄울 때 사용합니다.
event.preventDefault(); 함수는 기본적으로 설정된 기능을 작동하지 않도록 합니다.
a 를 클릭하면 해당 href 로 이동되거나 url이 없을 경우 새로고침 되는 것이 default 인데, 이 기능을 없앱니다.
button의 submit을 실행하면 submit을 하는 동시에 새로고침을 하는 것이 default 인데, 이 기능을 없애고 submit만을 보낼 수 있습니다.
let idx = $(this).parent().index();
부모의 index를 가져옵니다.
.sticky는 모든 section의 class 입니다. section의 높이는 100vh로 설정이 되어 있습니다.
여기에 html에 대하여 scrollTop 애니메이션 효과를 줍니다.
높이({ scrollTop: (idx + 1) * h })와 시간(1000ms)을 인자로 받습니다.
'프론트엔드 국비교육' 카테고리의 다른 글
| 6월13일19일차 - 슬라이드, 상단 이동버튼 복습 (0) | 2022.06.13 |
|---|---|
| 4주차 정리 (0) | 2022.06.11 |
| 6월10일18일차(2) - git설치부터 커밋, react 설명 (0) | 2022.06.10 |
| 6월10일18일차 - 다단메뉴 반응형 구현 (0) | 2022.06.10 |
| 6월9일17일차 - header 5가지, 포토샵 logo (0) | 2022.06.09 |
