스벅 예제 메모

다시 공부 중...·2021년 10월 18일

패캠-프론트앤드

대부분의 브라우저는 루트의 favicon.ico를 찾아 아이콘으로 사용한다.
- 고해상도 png 이미지를 대신 사용하고 싶으면 <link rel="icon" href="./favicon.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)

<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)

다시 공부 중...

인공지능, 개발 공부

이전 포스트

JavaScript 선행

다음 포스트