Publishing

반응형 사이트 setting 하기

oodada 2023. 9. 11. 21:30

list

https://eehd80.github.io/-setting/!list.html

main

https://eehd80.github.io/-setting/

Setting

프로젝트 시작시 사용할 수 있는 setting 파일입니다.

main(master) 브랜치로 이동

signin 브랜치로 이동

list

DEMO

Naming Case (BEM)

kebab-case(케밥 표기법)

kebab-case, header-container, btn-list, menu-list ...
(하이픈)으로 단어를 연결하는 표기법
HTML 태그의 class 속성으로 흔히 사용됨

camelCase(카멜 표기법)

camelCase, typeName, lightBox, darkBox ...
기본적으로 변수명을 모두 소문자로 씀
여러 단어가 이어지는 경우 첫 단어를 제외하고 각 단어의 첫글자만 대문자로 지정

PascalCase(파스칼 표기법)

PascalCase, TypeName, LightBox, DarkBox ...
카멜 표기법과 같으나, 파스칼 표기법은 첫번째 글자도 대문자로 선언

Snake_case(뱀 표기범)

snake_case, background_color, light_box, main_container ...
단어를 _(언더바)로 구분하는 표기법

BEM (Block Element Modifier)

HTML 클래스 속성의 작명법

핵심 요약

요소__일부분 : Underscore(Lodash) 기호로 요소의 일부분을 표시

<div class="section">
    <div class="section__name"></div>
      <div class="item">
          <div class="item__name"></div>
      </div>
</div>

요소--상태 : Hyphen(Dash) 기호로 요소의 상태를 표시

<button class="btn btn--primary"></button>
<button class="btn btn--success"></button>
<button class="btn btn--error"></button>

block (블록)

Naming

문자, 숫자, 대시(-)로 조합

HTML

<div class="tabs">
  <h2 class="tit-tab"></h2>
  <div class="cont-tab">
    ...
  </div>
</section>

CSS

클래스 이름만 사용한다.
태그 이름, ID 중첩 사용 금지
다른 블록에 대한 종속성이 없다.

// good
.tabs {
  color: #e5e5e5;
}

// bad
div.tabs {
    color: #e5e5e5;
}

Element (요소)

블록의 하위 요소이고 상위 블록과 연결된다.

Naming

문자, 숫자, 대시(-) 및 밑줄(_)로 구성될 수 있다.
블록이름__요소이름의 형태로 작성한다.

<div class="tabs">
  <div class="tabs__item"></div>
  <div class="tabs__item"></div>
</div>

// bad
.box .box__apple {
  background-color: red;
}

// good scss
.tabs {
    &.__item {}
}

Modifier (수식어)

수식어의 이름은 문자, 숫자, 대시(-) 및 밑줄(_)로 구성
블럭이름--수식어이름 혹은 요소이름--수식어 형태로 작성
수식어의 이름이 길거나 공백이 있다면 하나의 대시를 사용 블럭이름--border-black

<div class="tabs">
  <div class="tabs__item--on"></div>
  <div class="tabs__item"></div>
</div>

문자 인코딩(Character Encoding) 설정

문자가 인코딩되는 방식을 설정합니다.

<meta charset="UTF-8" />

UTF-8: 초성, 중성, 종성으로 구분하여 문자를 작성(권장)
EUC-KR: 하나의 완성된 글자를 인식

뷰포트(Viewport) 렌더링 방식 설정

웹페이지가 화면(Viewport)에 표현되는 방식을 설정합니다.

모바일 환경에서 적용됩니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

width=device-width: 화면의 가로 너비를 각 디바이스(Device)의 가로 너비와 동일하게 적용
initial-scale=1.0: 화면의 초기 화면 배율(확대 정도)을 설정
user-scalable=no: 사용자가 디바이스 화면을 확대(yes)/축소(no)할 수 있는지 설정
maximum-scale=1: 사용자가 화면을 확대할 수 있는 최댓값
minimum-scale=1: 사용자가 화면을 축소할 수 있는 최솟값

오픈 그래프(The Open Graph protocol)

웹페이지가 소셜 미디어(페이스북 등)로 공유될 때 우선적으로 활용되는 정보를 지정합니다.

Slack -

KakaoTalk -

더 많은 오픈 그래프 속성 보기

<meta property="og:type" content="website" />
<meta property="og:title" content="페이지 제목" />
<meta property="og:description" content="페이지 설명" />
<meta
  property="og:image"
  content="http://www.mysite.com/article/article1_featured_image.jpg"
/>
<meta property="og:url" content="http://www.mysite.com/article/article1.html" />

og:type: 페이지의 유형(E.g, website, video.movie)
og:site_name: 속한 사이트의 이름
og:title: 페이지의 이름(제목)
og:description: 페이지의 간단한 설명
og:image: 페이지의 대표 이미지 주소(URL)
og:url: 페이지 주소(URL)

트위터 카드(Twitter Cards)

웹페이지가 소셜 미디어(트위터)로 공유될 때 우선적으로 활용되는 정보를 지정합니다.

더 많은 트위터 카드 보기

<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="페이지 제목" />
<meta name="twitter:description" content="페이지 설명" />
<meta
  name="twitter:image"
  content="http://www.mysite.com/article/article1.html"
/>
<meta name="twitter:domain" content="사이트 명" />

twitter:card: 페이지(카드)의 유형(E.g. summary, player)
twitter:site: 속한 사이트의 이름
twitter:title: 페이지의 이름(제목)
twitter:description: 페이지의 간단한 설명
twitter:image: 페이지의 대표 이미지 주소(URL)
twitter:url: 페이지 주소(URL)

Favicon(파비콘, favorites icon)

웹페이지를 나타내는 아이콘, 웹페이지의 로고를 설정합니다.

대부분의 경우 루트 경로에 favicon.ico 파일을 위치하면 자동으로 로딩하기 때문에 <link /> 를 작성할 필요가 없습니다.
favicon.png 파일을 사용하려면 다음과 같이 <link />를 작성하세요.

파비콘 이미지는 루트 경로에 있어야 합니다!

<!--<link rel="shortcut icon" href="favicon.ico" />-->
<link rel="icon" href="./favicon.png" />

favicon.ico 64 x 64 (px) 또는 32 x 32 또는 16 x 16
favicon.png 500 x 500 (px)

https://www.naver.com/favicon.ico?1

.ico 파일 제작

이미지를 업로드하면 손쉽게 .ico 파일을 제작할 수 있습니다.

iconifier.net

Reset.css

각 브라우저의 기본 스타일을 초기화합니다.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"
/>

Google Fonts

기본으로 사용할 폰트를 지정합니다.
저는 최근 인기가 많은 pretendard 폰트를 사용할 예정입니다.

폰트 라이선스를 꼭 확인해야 합니다!

Google Fonts에서 고른 폰트 파일을 가져옵니다.

<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css" />

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");

페이지에 폰트를 적용(CSS 상속)합니다.
시스템에 가능한 맞추고자 한다면 아래와 같은 font-family 구성을 추천합니다.

font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

어디서든 동일한 환경을 가지고자 한다면 아래와 같은 font-family 구성을 추천합니다.

font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

Google Material Icons

구글에서 제공하는 머터리얼 아이콘을 무료로 사용할 수 있습니다.

Getting started for web

<!-- icons -->
<link
  href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round"
  rel="stylesheet"
/>

<!-- symbols -->
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@NaN,0,0,0"
/>

다음과 같이 사용할 수 있습니다.

<div class="material-icons">upload</div>

font awesome

사용 빈도가 높은 아이콘을 유료 버전과 무료 버전이 있습니다.

Getting started for web

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>

다음과 같이 사용할 수 있습니다.

<i class="fa-solid fa-house"></i>

GSAP & ScrollToPlugin

GSAP(The GreenSock Animation Platform)은 자바스크립트로 제어하는 타임라인 기반의 애니메이션 라이브러리입니다.
ScrollToPlugin은 스크롤 애니메이션을 지원하는 GSAP 플러그인입니다.

자바스크립트 지식이 뛰어나지 않아도 충분히 사용할 수 있습니다!

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"
  integrity="sha512-IQLehpLoVS4fNzl7IfH8Iowfm5+RiMGtHykgZJl9AWMgqx0AmJ6cRWcB+GaGVtIsnC4voMfm8f2vwtY+6oPjpQ=="
  crossorigin="anonymous"
></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js"
  integrity="sha512-nTHzMQK7lwWt8nL4KF6DhwLHluv6dVq/hNnj2PBN0xMl2KaMm1PM02csx57mmToPAodHmPsipoERRNn4pG7f+Q=="
  crossorigin="anonymous"
></script>

.to() 사용법
GSAP Easing

gsap.to(요소, 시간, 옵션);
// 또는
TweenMax.to(요소, 시간, 옵션);

gsap.to(window, 0.7, {
  scrollTo: 0,
});

Swiper

Swiper는 하드웨어 가속 전환과 여러 기본 동작을 갖춘 현대적인 슬라이드 라이브러리입니다.

Getting Started With Swiper

<!-- in HEAD -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

<!-- in BODY -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">1</div>
    <div class="swiper-slide">2</div>
    <div class="swiper-slide">3</div>
  </div>
</div>

Swiper API(옵션)을 확인하세요!

new Swiper(요소, 옵션);

new Swiper(".swiper-container", {
  direction: "vertical", // 수직 슬라이드
  autoplay: true, // 자동 재생 여부
  loop: true, // 반복 재생 여부
});

Youtube API

IFrame Player API를 통해 YouTube 동영상을 제어할 수 있습니다.

유튜브 영상이 출력될 위치에 요소를 지정(생성)합니다.

<!-- in HEAD -->
<script defer src="./js/youtube.js"></script>

<!-- in BODY -->
<div id="player"></div>

onYouTubePlayerAPIReady 함수 이름은 Youtube IFrame Player API에서 사용하는 이름이기 때문에 다르게 지정하면 동작하지 않습니다!

그리고 함수는 전역(Global) 등록해야 합니다!

플레이어 매개변수(playerVars)에서 더 많은 옵션을 확인할 수 있습니다.

// Youtube IFrame API를 비동기로 로드합니다.
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubePlayerAPIReady() {
  // <div id="player"></div>
  new YT.Player("player", {
    videoId: "An6LvWQuj_8", // 재생할 유튜브 영상 ID
    playerVars: {
      autoplay: true, // 자동 재생 유무
      loop: true, // 반복 재생 유무
      playlist: "An6LvWQuj_8", // 반복 재생할 유튜브 영상 ID 목록
    },
    events: {
      // 영상이 준비되었을 때,
      onReady: function (event) {
        event.target.mute(); // 음소거!
      },
    },
  });
}

ScrollMagic

ScrollMagic은 스크롤과 요소의 상호 작용을 위한 자바스크립트 라이브러리입니다.

대표적으로 어떤 요소가 현재 화면에 보이는 상태인지를 확인할 때 사용합니다.

ScrollMagic API

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>

new ScrollMagic.Scene({
  // 감시할 장면(Scene)을 추가
  triggerElement: spyEl, // 보여짐 여부를 감시할 요소를 지정
  triggerHook: 0.8, // 화면의 80% 지점에서 보여짐 여부 감시
})
  .setClassToggle(spyEl, "show") // 요소가 화면에 보이면 show 클래스 추가
  .addTo(new ScrollMagic.Controller()); // 컨트롤러에 장면을 할당(필수!)

저작자표시 비영리 동일조건

'Publishing' 카테고리의 다른 글

웹사이트 제작 후 체크리스트 (0)	2023.09.11
쇼핑몰 사이트 폴더 경로 설정 (0)	2023.09.11
HTML, CSS 첫걸음, vscode 셋팅 (0)	2023.09.11
사이트 폴더 경로 (0)	2023.07.24
체크리스트 (0)	2020.11.11

현재글반응형 사이트 setting 하기

odada

반응형 사이트 setting 하기

list

main

Setting

Naming Case (BEM)

kebab-case(케밥 표기법)

camelCase(카멜 표기법)

PascalCase(파스칼 표기법)

Snake_case(뱀 표기범)

BEM (Block Element Modifier)

핵심 요약

block (블록)

Naming

HTML

CSS

Element (요소)

Naming

Modifier (수식어)

문자 인코딩(Character Encoding) 설정

뷰포트(Viewport) 렌더링 방식 설정

오픈 그래프(The Open Graph protocol)

트위터 카드(Twitter Cards)

Favicon(파비콘, favorites icon)

.ico 파일 제작

Reset.css

Google Fonts

Google Material Icons

font awesome

GSAP & ScrollToPlugin

Swiper

Youtube API

ScrollMagic

'Publishing' 카테고리의 다른 글

'Publishing'의 다른글

티스토리툴바

반응형 사이트 setting 하기

list

main

Setting

Naming Case (BEM)

kebab-case(케밥 표기법)

camelCase(카멜 표기법)

PascalCase(파스칼 표기법)

Snake_case(뱀 표기범)

BEM (Block Element Modifier)

핵심 요약

block (블록)

Naming

HTML

CSS

Element (요소)

Naming

Modifier (수식어)

문자 인코딩(Character Encoding) 설정

뷰포트(Viewport) 렌더링 방식 설정

오픈 그래프(The Open Graph protocol)

트위터 카드(Twitter Cards)

Favicon(파비콘, favorites icon)

.ico 파일 제작

Reset.css

Google Fonts

Google Material Icons

font awesome

GSAP & ScrollToPlugin

Swiper

Youtube API

ScrollMagic

'Publishing' 카테고리의 다른 글

'Publishing'의 다른글

관련글

티스토리툴바