on
HTML/CSS
HTML/CSS
공부하면서 배운것들 >> HTML/CSS
HTML 처음
오픈 그래프
소셜미디어에 공유될때 우선적으로 활용되는 정보
og:type : 페이지의 유형(E.g, website , video.movie )
: 페이지의 유형(E.g, , ) og:site_name : 속한 사이트의 이름
: 속한 사이트의 이름 og:title : 페이지의 이름(제목)
: 페이지의 이름(제목) og:description : 페이지의 간단한 설명
: 페이지의 간단한 설명 og:image : 페이지의 대표 이미지 주소(URL)
: 페이지의 대표 이미지 주소(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태그
/*자바스크립트 기능이 아무것도 동작하지 않겠다.*/
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 속성
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
https://swiperjs.com
// 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 속성을 추가한다.
from http://genie247.tistory.com/208 by ccl(A) rewrite - 2021-11-30 22:28:05