공부하면서 배운것들 >> HTML/CSS
HTML 처음
<link rel="icon" href="./favicon.ico" />
<!-- 다른 로고 쓰고싶으면 명시 해주면된다. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />
<!-- reset.css cdn url 추가-->
<link rel="stylesheet" href="./css/main.css" />
<!-- CSS 연결 -->오픈 그래프
소셜미디어에 공유될때 우선적으로 활용되는 정보
<meta property="og:site_name" content="Starbucks" />
<meta property="og:title" content="Starbucks Coffee Korea" />
<meta property="og:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
<meta property="og:image" content="./images/starbucks_seo.jpg" />
<meta property="og:url" content="https://starbucks.co.kr" />og:type: 페이지의 유형(E.g,website,video.movie)og:site_name: 속한 사이트의 이름og:title: 페이지의 이름(제목)og:description: 페이지의 간단한 설명og:image: 페이지의 대표 이미지 주소(URL)og:url: 페이지 주소(URL)
material icon
https://material.io/develop/web/getting-started
img 태그 // 인라인요소
이미지는 margin auto를 하면 자동으로 가운데 정렬이 된다.
빈태그
인라인 요소이다. 인라인은 가로세로패딩값이 없음 : 글자를 다루는 요소
xyz 로 쓰면 y가 선을 넘어서 내려가있음 기준이 되는선이 baseline이다.
공간을 가질 수있는 구조를 가지고 있다.
이미지 요소도 inline요소이므로 이미지 공간 밑에 공간이 있을 수 있음
img {
display: block;
/*인라인 요소가 아닌 이미지를 하나의 화면을 구성하는 레이아웃으로 취급하겠다.
가로 세로 값이 있음 */
}
이렇게 된다.
수직 가운데로 배치
header .logo {
height: 75px
position: absolute; /*(1)*/
top: 0; /*(2)*/
bottom: 0;
margin: auto; /*(3)*/
} 1) 부모요소 기준으로 배치를 하겠다
2) 위에서 0px지점 아래부터 0px지점
3) 중간으로 정렬
4) 구조적인 부모요소에 position: relative;를 추가해주어야한다.
—> 정확한 너비 크기가 지정되어있어야 중간으로 간다.
a태그
<li>
<a href="javascript:void(0)"> </a>
/*자바스크립트 기능이 아무것도 동작하지 않겠다.*/
</li>a태그는 인라인 요소이다.
header .sub-menu ul.menu li a{
background-color: white;
font-size: 12px;
padding: 11px 16px;
display: block;
}패딩(내부여백)을 사용하기 위해 display:block를 넣는다.
a태그 밑줄 없애기
a {
text-decoration: none;
}수평으로 정렬
display: flex;가상요소
before : 인라인 요소 (가로세로 값이 없음)
header .sub-menu ul.menu li::before {
content: "";
display: block; /*삭제*/
width: 1px;
height: 12px;
background-color: black;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}1) content: "";는 가상요소에 없으면 값이 만들어지지 않는다.
2) position: absolute는 display: block; 로 자동으로 변하기 때문에 따로 넣어줄 필요가 없다. (fixed 도 마찬가지)
첫번째 요소에 구분선이 필요없다면?
header .sub-menu ul.menu li:first-child::before {
display: none;
}input
input박스 파란색 속성 사라지게하기
outline: none;transition
특정 요소만 전환하기
ex> width만 전환
transform: width .4s;defer 속성
<script defer src="./js/main.js"></script>HTML구조가 모두 해석되면 js가 동작하도록한다.
포커스 일 때 아이콘을 사라지게 한다.
header .sub-menu .search.focused .material-icons {
/* 포커스 일 때 아이콘을 사라지게 한다. */
opacity: 0;
}아래 밑줄 긋기
header {
background-color: #f6f5f0;
border-bottom: 1px solid #c8c8c8;
}특정 방향에만 border-radius 주기
border-radius: 6px 6px 0 0;CSS 자식선택자
header .main-menu .item .item__contents .contents__menu > ul {
}> ul 이런식으로 사용 // 모든 ul태그말고 해당 class안에 ul만 적용하기 위해서
cursor
cursor: pointer;해당 요소에 갖다대면 마우스 포인터 처럼 보인다.
background image
repeat이면 이미지를 반복적으로 출력한다.
BEM
HTML클래스 속성의 작명법
요소__일부분 underscore 기호로 요소의 일부분을 표시
요소--상태 hypen 기호로 요소의 상태를 표시
1) container 의 name을 선택할때 item의 name도 같이 선택 되기때문에 bem을 사용해 네이밍을 지칭한다.
컨테이너의 일부분(name)
아이템의 일부분(name)이다.
2) primary / success / error 별개의 단어로 보인다. 상태를 알기위해 btn—primary이런식으로 버튼상태가 primary이다. 상태를 알려준다.
position
fixed/ absoluted 는 가로 너비가 최소한으로 줄어드려고 한다. (width : auto 일때)
그러기 떄문에
width: 100%로 설정해 주어야한다.
block 요소는 가로요소가 최대로 늘어나려고 한다.
fixed는 뷰포트 기준으로 고정되기 때문에 스크롤이 있어도 화면 자체에 고정이 된다.
loadsh throttle
vanila js에서 사용하기
cdn에서 추가
https://cdnjs.com/libraries/lodash.js
window.addEventListener('scroll', _.throttle(function(){
console.log("scroll")
}, 300));0.3초단위로 부하를 준다.
_.throttle(함수, 시간)
gsap
js로 애니메이션 주기
cdn 추가
https://cdnjs.com/libraries/gsap
[gsap.to](http://gsap.to/)(요소, 지속시간, 옵션)
gsap.to(badgeEl, .6 , {
opacity: 0,
display: 'none'
});0.7초마다 이미지 나오게 하기
const fadeEls = document.querySelectorAll('.visual .fade-in');
fadeEls.forEach(function(fadeEl, index){
gsap.to(fadeEl, 1, {
delay: (index + 1) * .7, //0.7초에 한번씩 실행 0.7, 1.4 , 2.1 ....
opacity: 1
});
})css선택자로 세팅하기
//버튼 보이기 , css선택자로도 선택 가능하다.
gsap.to('#to-top', .2 , {
x: 0
});scroll 에 따른 엘리먼트 제어
/**
* 페이지 스크롤에 따른 요소 제어
*/
// 페이지 스크롤에 영향을 받는 요소들을 검색!
const badgeEl = document.querySelector('header .badges')
const toTopEl = document.querySelector('#to-top')
// 페이지에 스크롤 이벤트를 추가!
// 스크롤이 지나치게 자주 발생하는 것을 조절(throttle, 일부러 부하를 줌)
window.addEventListener('scroll', _.throttle(function () {
// 페이지 스크롤 위치가 500px이 넘으면.
if (window.scrollY > 500) {
// Badge 요소 숨기기!
gsap.to(badgeEl, .6, {
opacity: 0,
display: 'none'
})
// 상단으로 스크롤 버튼 보이기!
gsap.to(toTopEl, .2, {
x: 0
})
// 페이지 스크롤 위치가 500px이 넘지 않으면.
} else {
// Badge 요소 보이기!
gsap.to(badgeEl, .6, {
opacity: 1,
display: 'block'
})
// 상단으로 스크롤 버튼 숨기기!
gsap.to(toTopEl, .2, {
x: 100
})
}
}, 300))
// 상단으로 스크롤 버튼을 클릭하면,
toTopEl.addEventListener('click', function () {
// 페이지 위치를 최상단으로 부드럽게(0.7초 동안) 이동.
gsap.to(window, .7, {
scrollTo: 0
})
})css 구성1
.notice .notice-line {
position: relative;
}
.notice .notice-line .bg-left {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #333;
}
.notice .notice-line .bg-right{
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-color: #f6f5f0;
}
.notice .notice-line .inner {
height: 62px;
border: 2px solid red;
}position에 따라 높이 값이 한없이 줄어드려고 하는데 inner의 높이가 62px라 bg-left bg-right영역 둘다 62px가 된다.
swiperjs
// new Swiper(선택자, 옵션)
new Swiper('.notice-line .swiper-container',{
direction:'vertical'
});다양한 swiper 처리
new Swiper('.promotion .swiper-container', {
// direction: 'horizontal', // 수평 슬라이드 //기본값이라 따로 명시할 필요 없음
autoplay: { // 자동 재생 여부
delay: 5000 // 5초마다 슬라이드 바뀜
},
loop: true, // 반복 재생 여부
slidesPerView: 3, // 한 번에 보여줄 슬라이드 개수
spaceBetween: 10, // 슬라이드 사이 여백
centeredSlides: true, // 1번 슬라이드가 가운데 보이기
pagination: { // 페이지 번호 사용 여부
el: '.promotion .swiper-pagination', // 페이지 번호 요소 선택자
clickable: true // 사용자의 페이지 번호 요소 제어 가능 여부
},
navigation: { // 슬라이드 이전/다음 버튼 사용 여부
prevEl: '.promotion .swiper-prev', // 이전 버튼 선택자
nextEl: '.promotion .swiper-next' // 다음 버튼 선택자
}
})css 브라우저 크기에 따라 중간 배치
.notice .promotion {
height: 693px;
background-color: #f6f5ef;
position: relative;
}
.notice .promotion .swiper-container {
width: calc(819px * 3 + 20px);
height: 553px;
background-color: orange;
text-align: center;
font-size: 200px;
position: absolute;
top: 40px;
left: 50%;
margin-left: calc((819px * 3 + 20px) / -2);
/*margin-left: -1238.5px;*/
}
왼쪽기준 50%로 놓고 요소의 반의 크기만큼 margin을 줌 (18강의)
CSS 부모/자식 비율
.container {
width: 500px;
}
.container .item {
width: 100%;
height: 0;
padding-top: 50%;
}container클래스의 width의 50%에 해당하는 값을 height 로 갖는다.
자식 item요소는 가로 2: 세로 1의 형태를 갖는다.
16:9는? padding-top : 56.25%
floating 띄우기
function floatingObject(selector) {
gsap.to(selector, 1, {
y: 20, //내려가는 값
repeat: -1, // 반복여부
yoyo: true //위로올라가는것
});
}
floatingObject('.floating')gsap easing
background
background-attachment: fixed
뷰포트에서 고정 , 스크롤 될때 같이 요소가 움직이지 않는다.background-size: cover
뷰포트에 넓은 부분에 맞춰서 커진다.
flex
flex-wrap: wrap 줄바꿈 처리
3D
backface-visivility: hidden;뒤집어진 요소 hidden 처리하기
scrollMagic
https://cdnjs.com/libraries/ScrollMagic
HTML 기호
https://dev.w3.org/html5/html-author/charref
글마다 점찍기(before 사용)
footer .menu li::before {
content: "";
width: 3px;
height: 3px;
background-color: #555;
position: absolute;
top: 0;
bottom: 0;
right: -1px;
margin: auto;
}
footer .menu li:last-child:before {
display: none;
}마지막 요소는 점 표시가 없다 >> last-child 속성에 display:none 속성을 추가한다.