스벅 예제 메모
- 대부분의 브라우저는 루트의 favicon.ico를 찾아 아이콘으로 사용한다.
- 고해상도 png 이미지를 대신 사용하고 싶으면
<link rel="icon" href="./favicon.png">
명시
- 고해상도 png 이미지를 대신 사용하고 싶으면
- css 초기화: https://www.jsdelivr.com/package/npm/reset-css
- 빈 태그는 /를 넣어 마무리하자.
<link ... />
- the open graph protocol: 소셜미디어에 사이트가 공유될 때 표시되는 정보 지정.
<meta property="og:속성" content="내용" />
- og:type: 페이지 유형 / website, ...
- og.site_name: 사이트 이름
- og.title: 페이지 이름
- og.description: 페이지 설명. 너무 긴 경우 일부 매체에서는 악성 사이트로 분류
- og.image: 페이지 대표 이미지 url
- og.url: 페이지 주소. 소셜 미디어에 올린 주소와 다를 수 있다.
- twitter cards: 오픈 그래프와 같은 기능으로 트위터에 공유되는 형식.
- SEO: 검색 엔진 최적화(Search Engine Optimization), 포털에 사이트가 노출할 수 있도록 정보를 최적화하는 작업
- 내가 작성한 css는 head의 가장 마지막에 놓도록하자. 외부에서 들여오는 다른 link 태그들이 우선시될 수 있도록
google fonts
- https://fonts.google.com/
- 폰트는 용량이 크기에 페이지 내에 다수를 사용하지 말자.
- 폰트를 선택하고 여러 굵기 중 사용하고자하는 폰트 굵기 선택 -> link 요소를 복사해 html에서 css 파일을 연결하는 link 요소 위에다가 배치 -> css font-family 속성을 가져다가 사용
google material icons
- https://fonts.google.com/icons
- 직접 아이콘들을 제작하기 힘들다면 코드를 통해 구글에서 제공하는 아이콘을 이용
- 사용법: https://developers.google.com/fonts/docs/material_icons#icon_font_for_the_web
- link 태그 추가:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
- "material-icons" 클래스를 갖는 태그의 요소 내용에 아이콘 이름을 명시한다.
<span class="material-icons">login</span>
: login 이라는 이름의 아이콘을 가져온다.
- 아이콘 사이즈는
font-size
속성을 통해 조절 (기본값: 24px)
- link 태그 추가:
<header></header>
: html 중 헤더 영역을 의미하기위해 존재하는 태그. 별다른 기능은 없다.<a href="/"> ~ </a>
: 링크를 "/"로 건다면 루트의 index.html을 의미.- css 색상값 지정시에 16진수 색상값 입력시에 여섯개의 같은 문자를 나열한다면 3개만 입력해도 된다. ex) #ffffff는 #fff로 작성할 수 있다.
- div 태그에 또 다른 div 태그를 만들고
margin: auto;
를 통해 가운데 정렬시키는 방식이 많이 사용된다. - img 태그는 인라인요소. 문자를 다루는 인라인 요소는 베이스라인 아래에 어느정도의 공간을 가지게된다. 따라서 img 태그의 이미지 하단에 의도치않은 여백이 조금 생기게 된다.
display: block;
를 통해 블록요소로 취급하면 여백이 사라진다.
css를 통한 요소 가운데 정렬
.item {
width: 100px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
부모요소는 position 속성이 선언되어있어야함.
요소에 position: absolute 선언, 정렬하려는 축으로의 크기(width)를 명시, 정렬하려는 축의 양끝으로부터의 거리(left, right)를 0으로 선언, margin을 auto로 설정하면 자동으로 양끝으로부터의 거리를 계산하여 가운데정렬하게된다.
- html / a 태그에 넣을 페이지 주소를 아직 마련하지 못했다면
#
또는javascript:void(0)
를 넣는다.javascript:void(0)
은 자바스크립트 코드를 실행시키는데 void(0)은 어떤 동작도 하지 않는다. - html / a 태그의 font-size를 줄이면 그만큼 클릭할 영역이 작아진다. display: block; / padding을 통해 클릭할 수 있는 영역을 적절하게 조절하자. 배치에 flex등을 이용.
- css /
position: absolute 또는 fixed;
는 요소를 블록 요소로 변환.display: block;
를 선언하지 않아도 된다.
BEM, Block Element Modifier
html 클래스 속성의 작명법
- 요소__구성요소: 요소가 무엇의 구성요소인지를 표시함
<div class="container">
<div class="name"></div>
<div class="item">
<div class="name"></div> <!-- '.container .name' 선택자에 걸려버림.-->
</div>
</div>
<!--명시적으로 요소의 부모요소를 명시함-->
<div class="container">
<div class="container__name"></div>
<div class="item">
<div class="item__name"></div>
</div>
</div>
- 요소--상태
<div class="btn primary"></div>
<div class="btn success"></div>
<div class="btn error"></div> <!--btn과 상태를 나타내는 단어가 연관성이 없어보임-->
<div class="btn btn--primary"></div>
<div class="btn btn--success"></div>
<div class="btn btn--error"></div> <!--btn의 상태를 나타내는것이 명확.-->
width: auto;
&position: (Fixed|absolute);
: 가로 너비를 최소한으로 잡음. 가로 너비를 명시해주자.- 페이지에 너무 많은 기능이 실행되면 버벅일 수 있다. 따라서 그 양을 제한하기도 하는데 자바스크립트의 경우 lodash를 이용. lodash를 통해 함수가 실행될 수 있는 주기를 정해 연속으로 너무 많은 호출이 일어나지 않도록 제한한다. (https://cdnjs.com/libraries/lodash.js) 사이트에서 태그를 복사해서 자바스크립트를 연결하는 script 태그 위에 붙여넣는다.
window.addEventListener('scroll', _.throttle(function () {
console.log('scroll!')
}, 300)); /* 300: 300ms, 0.3s */
- 자바스크립트 애니메이션: gsap (https://cdnjs.com/libraries/gsap)
els.forEach(function (el, index) {
gsap.to(요소, 애니메이션지속시간, {
애니메이션 설정을 담은 오브젝트
});
});
- 페이지 구성시에 가로로 나뉜 층들을 section이라 한다. 예제에서 작성한 header도 section. header 태그처럼 section 태그가 존재한다. 역시 별 기능 없음.
- swiperjs: https://swiperjs.com/
- css의 calc: css에 수학식 계산을 통해 속성값을 입력할 수 있다.
.class {
...
width: calc(100% - 20px);
...
}
- 화면 크기에 상관없이 요소 가운데 정렬하기:
코드는 색상을 통해서 어떤 방식인지 보이기위해서 블록을 나눈 것. 따로 블록을 나눌 필요없이 가운데 정렬하려는 요소에position: absolute;
&left: 50%
속성을 선언하고margin-left
를 요소 크기의 반만큼으로 선언한다.
<div class="container">
<div class="parents">
<div class="child">ho</div>
</div>
</div>
.container {
position: relative;
}
.parents {
width: 800px;
height: 300px;
background-color: orange;
position: absolute;
left: 50%;
}
.child {
width: 100%;
height: 50%;
background-color: royalblue;
margin-left: -400px;
font-size: 100px;
text-align: center;
}
- 클릭할 수 있는 요소를 눌렀을 때 요소 주변에 테두리가 생기는건 css에
outline: none;
을 선언해 제거할 수 있다.
- css / 다중선택자
꼭 줄바꿈해서 혼동하지 않도록 하자.
.notice .promotion .swiper-prev,
.notice .promotion .swiper-next {
...
}
- 부모 요소의 세로크기가 없는 상태에서 자식 요소의 세로 크기는 0으로 선언했을 때 padding-top을 % 단위로 선언하면 부모요소의 가로 크기를 기준으로 삼는다. 일정한 비율을 가진 요소를 생성해야할 때 유용하다.
.container {
width: 250px;
height: 450px;
background-color: royalblue;
}
.item {
background-color: orange;
width: 100%;
height: 0;
padding-top: 50%;
}
- youtube 영상 삽입: youtube iframe api
(https://developers.google.com/youtube/iframe_api_reference?hl=ko)
Author And Source
이 문제에 관하여(스벅 예제 메모), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@canlion/바닐라-예제-메모저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)