[3주차] 패스트캠퍼스 프론트엔드 8주 완성 with React : 예제를 만들면서 학습하기

View

[3주차] 패스트캠퍼스 프론트엔드 8주 완성 with React : 예제를 만들면서 학습하기 - react강의

special 2022. 8. 22. 17:47

파비콘(favicon, favorite icon)

티스토리에서도 확인할 수 있는 파비콘은 따로 설정없이도 화면에 표시된다. 프로젝트의 루트(/)경로에 favicon.ico 라는 이름으로 파비콘으로 설정되길 원하는 아이콘을 저장해 두면 해당 아이콘이 위 티스토리 파비콘처럼 실제로 표시되게 된다.

파비콘을 고해상도(PNG)로 제공하기 위해서는 link 태그로 제공가능하다. (<head>내부에 삽입)

<link rel="icon" href="./favicon.png" />

브라우저 스타일 초기화

jsdeliver, cdnjs등에서 link태그로 reset.css를 연결해서 사용할 수 있다. (Eric Meyer's CSS reset.)

오픈 그래프

소셜미디어로 웹페이지를 공유할때 보여지는 정보

<meta property="og:type" content="website" />
<meta property="og:site_name" content="사이트이름" />
<meta property="og:title" content="제목 - 페이지에 대한 제목을 뜻함" />
<meta property="og:description" content="사이트에 대한 설명" />
<meta property="og:image" content="대표이미지로 표시될 이미지 URL" />
<meta property="og:url" content="사이트 주소" />

여기서 og란 open graph를 뜻한다.

트위터 카드

트위터의 개발자 문서(https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards)를 참고

🔗 참고링크 : https://blog.outsider.ne.kr/922

특정 소셜미디어는 오픈그래프보다 우선하여 트위터 카드의 정보를 표시하기도 한다.

오픈그래프, 트위터카드는 <head>태그 내부에 작성하는데

소셜미디어가 사이트의 정보를 최대한 빨리 간단하게 얻어가고, 그 아래 내용들은 확인하지 않아도 되므로 상단에 작성하는 것이 좋다.

SEO (검색엔진 최적화, Search Engine Optimization)

구글, 네이버, 다음 등 검색 엔진에서 웹사이트를 노출시키기 위한 정보를 최적화 시키는 것

SEO가 잘 되어있으면 상단에 노출 시킬수도 있을 것이다

🔗 참고링크 : https://yozm.wishket.com/magazine/detail/1540/

Google Meterial Icons

🔗 참고링크 : https://fonts.google.com/icons

🔗 참고링크 : https://material.io/resources

🔗 참고링크 : https://material.io/develop/web/getting-started

기본 icon들은 아래와 같은 형태로 원하는 아이콘 이름을 태그 안에 입력한다(꼭 span태그일 필요는 없다).

<span class="material-icons">
arrow_drop_down
</span>

기본 font-size: 24px; 로 설정되므로 아이콘의 크기를 조정하고 싶은 경우에는 이 font-size속성을 바꾸어준다.

Google Fonts

🔗 참고링크 : https://fonts.google.com/

폰트는 용량이 크므로, 원하는 두께 및 사이즈 폰트를 사용하자

font-family로 선택하여 사용

<link> 병렬로 html에서 외부의 css 파일을 가져옴
@import 직렬로 css에서 외부의 css를 가져옴

font-family: 'Nanum Gothic', sans-serif;

적용을 위해서 css 속성을 지정

요소를 수직 가운데에 위치시키기

.container {
  width: 400px;
  height: 250px;
  background-color: royalblue;
  position: relative;
}

.item {
  width: 100px;
  height: 100px;
  background-color: orange;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

반드시 필요한 속성은 아래와 같다.

height: 100px;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;

내 부모요소(position: relative;)의 top, bottom으로 기준점을 잡아두고, margin-top, margin-bottom을 auto로 설정하여 수직 가운데로 정렬하게 한다.
👉 따라서 이 경우 반드시 가운데에 배치시킬 요소의 height도 알 수 있어야하므로 height속성도 필요하게 된다.

이 방법을 활용하여 정가운데에 요소를 위치시킬수도 있다.

이 경우에는 left, right, width값이 추가적으로 필요해진다.

.item {
  width: 100px;
  height: 100px;
  background-color: orange;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

A tag로 href속성에 임시 값 삽입

"#" hash 사용
"javascript:void(0)"사용(권장) : 아무 동작도 일어나지 않음

A tag는 사용자가 클릭할 수 있는 영역이므로 inline영역 크기만큼 차지하는 기본값으로 두기보다, 조금 더 크기를 키워주는 것이 사용자 경험상 좋다.

::after, ::before 의 가상요소선택자는 inline요소이므로 가로세로 값(width, height)을 부여하고 싶은 경우에는 display:block; 을 추가해준다.
position:absolute, position:fixed의 경우에는 해당 요소는 display: block;으로 변경되므로 중복선언을 없애주어도 된다.

input이 focus될 경우 outline표시

표시하고 싶지 않은 경우 CSS 속성 outline:none;을 적용한다.

document.querySelector

document는 HTML자체 doctype HTML선언해주는것처럼

window.addEventListener("scroll", 이벤트핸들러);

window 객체

window는 브라우저 창(탭)

우리가 보고있는 화면 자체

JavaScript를 이용한 placeholder등 attribute 추가

$input.setAttribute("placeholder", "통합검색");

background-repeat의 기본값 : repeat이므로 이미지 패턴으로 별다른 설정없이 적용할 수 있다.

.item 자식요소 중 .item__name, .item__contents

BEM(Block Element Modifier)

HTML 클래스 속성의 작명법

요소__일부분 Underscore(Lodash)기호로 요소의 일부분을 표시한다
요소--상태 Hyphen(Dash)로 요소의 상태를 표시한다.

<div class="container">
    <div class="name"></div>
</div>
<div class="item">
    <div class="name"></div>
</div>

<div class="container">
    <div class="container__name"></div>
</div>
<div class="item">
    <div class="item__name"></div>
</div>

HTML을 확인하지 않아도 어떤 요소의 일부분인지 확인 가능함

<div class="btn btn--primary"></div>
<div class="btn btn--error"></div>

버튼의 상태를 의미하는 클래스명을 추가하여 종속된 상태임을 나타낼 수 있다.

box-shadow: x축 y축 blur 색상

position: fixed, position:absolute에서는 가로(width)를 최소한으로 사용하려고 한다.

기존에는 block요소인 경우 화면 전체를 사용하려고 하지만, fixed, absolute가 적용되면 요소 크기만큼을 차지한다.

Lodash사용하여 throttle 적용

🔗 참고링크 :https://cdnjs.com/libraries/lodash.js

🔗 참고링크 :https://lodash.com/

_.throttle(함수, ms단위 시간)

window.addEventListener(
  "scroll",
  _.throttle(() => {
    // 원하는 작업
    console.log("scroll");
  }, 300)
);

JS로 애니메이션 적용하기 - GSAP 사용

🔗 참고링크 : https://cdnjs.com/libraries/gsap

gsap.to(요소, s단위 지속시간, 옵션);

gsap.to($element, 0.6, {
    opacity: 0,
    display: "none",
});

opacity와 같이 값이 숫자인 속성은 중간값이 존재하므로 자연스러운 전환효과를 나타낼 수 있지만, display 속성처럼 숫자가 아닌 경우에는 그렇지 않기 때문에 자연스러운 전환 효과를 적용하기 어렵다.

Share Link

Fasebook
Twitter

reply

be special ✨

View