README.md

1. 웹퍼블리싱 개발환경 설정

• 회사에서 당황하지 않고 업무환경 설정이 가능하셔야 합니다.
• 아래 순서대로 퍼블리싱 셋팅하시면 문제없이 진행됩니다.
• 추천 프로그램 ㄴ Byeond Compare 코드 비교 도구 (상용버전) : 비용지불 -https://www.scootersoftware.com/

1.1. Node.js 설치

• node.js

• Node.js는 로컬PC 및 서버PC 에서 JS를 실행하는 환경 구성.

  ㄴ 서버는 대표적으로 웹 서버(PC), 데이터베이스 서버(PC) 등이 있음. ㄴ 서버는 고객들이 인터넷으로 접속해서 자료를 사용하는 PC

• 추후 React에서 NVM(Node version Manage) 을 통환 관리 예정

1.2. VSCode 설치

-VSCode

1.3. VSCode Extenstion 설치

• 아래 목록을 위주로 설치 한다.

- PostCSS Sorting : 추후 설정 (css 코드 순서 정렬 도구 - 설정 필요)
- Auto Colse Tag
- Auto Rename Tag
- Bracket Pari Clor DLW
- CSS Peak
- HTML CSS Support
- HTML to CSS autocompletion
- Image preview
- indent-rainbow
- Korean Language Pack for... (VSCode 재실행 후 확인)
- Live Server
- Markdown Preview Enhanced
- Material Icon Theme
- Night Owl (테마)
- Prettier - Code formatter (별도 참조)

1.4. Prettier 셋팅

• 줄맞춤, 들여쓰기, 따옴표, 세미콜론 등에 대한 문서의 포맷(컨벤션)을 맞추어 줌
• 설정 버튼(VScode의 모서리 왼쪽 아이콘) 클릭 > Settings 메뉴 선택
• 검색 내용으로 format 으로 작성
• Editor:Default Formatter 설정(Prettier 선택)
• Editor:Format On Save 설정
• VSCode 재실행 추천합니다.

2. 웹퍼블리싱 개발 구조 설정

• 반드시 프로젝트명은 영어소문자, 단어_단어 등의 특수기호 추천
• git 셋팅 먼저 진행 필요 : GitHub 포함해서

2.1. 추천 폴더 구조

• images : 파일명.jpg, 파일명.png, 파일명.gif, 파일명.svg

• jpg : 사진

• gif : 그림(애니메이션 그림 가능, 배경 투명 가능)

• png : 사진 + 배경 투명

• svg : 디지털 숫자로 (벡터) 계산해서 그림을 만듦(아이콘, 반응형 등에 적극 활용)

• css 폴더 : 모듈별.css 파일들

• js 폴더 : 모듈별.js 파일들

• assets 폴더 : 기타 파일들(영상, 음악, 계약서, 연락처..포함)

• apis 폴더 : 백엔드 데이터 연동관련 파일들(파일명.json, 데이터 요청 등)

• json : JavaScript Object Notation (자바스크립트 객체 문법적용된 파일)

2.2. 기본 파일

• index.html 약속 됨.(파일명 변경 불가 : 엔트리포인트)
• 부가적으로 index 만 작업하는 이유가 가장 어렵고, 복잡하고, 비주얼 합니다.
• 단축키 : ! + tab 키로 html 기본형을 생성하자.(반드시 파일 저장 후)

3.HTML 태그의 이해

• 웹브라우저가 알아볼수 있는 문법구조

• DOM 구조로 해석 : Document Object Model

• https://velog.io/@clydehan/HTML-DOCTYPE%EC%9D%B4%EB%9E%80

• <!DOCTYPE html>

• html 을 해석할 때 최신 html5 규칙으로 해석하라.

• 수정은 주의해서 해야합니다.

• 유지 보수를 하시는 경우에는 html의 첫 줄을 반드시 문의하고 수정해야합니다.

• head 태그

• 문서의 필요로한 정보를 작성하는 곳

• 추후 icon 및 sns 연동 부분에서 주로 활용(meta 태그)

• SEO ( 색엔진 최적화 내용)

• js 파일, css 파일을 연결 배치 활용

• 반드시 tittle 태그 내용 작성 필요

• GA4 설정 내용을 작성하는 곳 (Google Analytics)

• body 태그

• 실제 화면에 보여질 내용을 배치함

• <태그>내용</태그>

• 반드시 소문자로 모두 구성함.

3.1. div 태그

• 내용

• 내용 배치의 레이아웃을 담당함.

• 기본적으로 <div class="wrap"></div> 를 배치하고 내용 작성함

• 최초 구성 필수(경험-경력이 필요함.)

• 내용을 충분히 분석(Figma, PRD 분석)분석하고 난 이후에 주석을 명시 후 div 사용

• div 태그에 역할에 맞는 이름을 class 로 지정 함.

3.2. 시멘틱 태그

• 시멘틱 태그는 태그 단어 자체가 내용을 유추하도록 한다.
• div 로 내용을 구분 후 아래 영역은 태그를 변경하기를 추천합니다.
• header 태그 : 검색엔진에서 내용을 기대함(로고, 타이틀, 주메뉴, 검색, 회원기능 ...)
• main 태그 : 컨텐츠 모음
• footer 태그 : 검색엔진에서 내용을 기대함(카피라이터, 주소, 연락처, 사이트 맵 등)

3.3. 필수 태그

3.3.1. a 태그 : anchor

• 현재 웹브라우저 내용 갱신(페이지 이동) : <a href="주소">글자/그림</a>
• 웹브라우저 탭 생성(새탭 페이지) : <a href="주소" target="_blank">글자/그림</a>

3.3.2. form 태그 : 사용자 입력양식

• 추천 UI 라이브러리 ㄴshadCN : https://ui.shadcn.com/docs/components ㄴAntDesign : https://ant.design/components/overview/ ㄴMUI : https://mui.com/material-ui/all-components/

• action 과 method 의 이해

• <form action="백엔드주소"></form>

• <form action="백엔드주소" method="get"></form>

• 데이터 공개됨 http://127.0.0.1:5500/good.html?id=is&pass=1234

• <form action="백엔드주소" method="post"></form>

• 데이터 공개됨 http://127.0.0.1:5500/good.html

• input 태그 예제

<form action="good.html" method="post">
  <!-- 기본정보 -->
  <fieldset>
    <legend>기본정보</legend>
    <label for="userid">아이디(4자~12자)</label> <br />
    <input
      type="text"
      id="userid"
      name="id"
      minlength="4"
      maxlength="12"
      required
      placeholder="아이디를 입력하세요."
    />
    <button>아이디 중복확인</button>
    <br />
    <br />
    <label for="useremail">이메일</label> <br />
    <input
      type="email"
      id="useremail"
      name="email"
      required
      placeholder="example@example.com"
    />
    <br />
    <br />
    <label for="userpass">비밀번호(6자~16자)</label> <br />
    <input
      type="password"
      id="userpass"
      name="pwd"
      minlength="6"
      maxlength="16"
      required
      placeholder="비밀번호를 입력해주세요."
      autocomplete="off"
    />
  </fieldset>
  <!-- 상세정보 -->
  <fieldset>
    <legend>상세정보</legend>
    <label for="country">국가 선택:</label>
    <select id="country" name="country">
      <option value="kr">한국</option>
      <option value="us">미국</option>
      <option value="cn">중국</option>
      <option value="jp">일본</option>
    </select>
    <br />
    <br />
    <label>성별</label> <br />
    <input type="radio" id="male" name="gender" value="male" checked />
    <label for="male">남성</label>
    <input type="radio" id="female" name="gender" value="female" />
    <label for="female">여성</label>
    <br />
    <br />
    <label>취미(다중선택가능)</label> <br />

    <input type="checkbox" id="coding" name="hobby" value="coding" checked />
    <label for="coding">코딩</label>

    <input type="checkbox" id="tour" name="hobby" value="tour" checked />
    <label for="tour">여행</label>

    <input type="checkbox" id="music" name="hobby" value="music" checked />
    <label for="music">음악</label>
    <br />
    <br />
    <label for="birthday">생년월일</label> <br />
    <input type="date" id="birthday" name="birthday" />
    <br />
    <br />
    <label for="file">첨부파일</label> <br />
    <input type="file" id="file" name="file" />
    <br />
    <br />
    <label for="intro">자기소개 : </label> <br />
    <textarea
      id="intro"
      name="intro"
      rows="5"
      cols="40"
      placeholder="자기소개를 입력하세요."
    ></textarea>
  </fieldset>
  <!-- 정보입력 -->
  <fieldset>
    <legend>정보입력</legend>
    <input type="reset" value="재작성" />
    <input type="submit" value="등록" />
  </fieldset>
</form>

3.3.3 ul 태그 : unOrderList (목록태그)

• 동일한 형태의 레이아웃이 반복된다면 묶어서 활용
• 동일한 기능이 반복된다면 묶어서 활용

3.3.4 image 태그

• 아이콘은 https://react-icons.github.io/react-icons 활용
• <img src="이미지경로/파일명.확장" alt="대체글" />

3.3.5. 태그(Heading)

• 문서의 타이틀 역할을 함을 표현함.
• h1~h6 로 구성
• html 문서에서 h1 은 한번만 사용하기를 권장
• 각 영역별로 h2 도 한번만 사용하기를 권장

3.3.6

태그(parpagraph)

• 글자로 된 문단 작성시 활용
• display : block;

3.3.7
태그

• 한 줄 내림

3.3.8. 태그

• 문자를 굵게 표현함

3.3.9

태그

• 시멘틱 태그로서 내용 영역 구분

4. CSS 의 이해

-css 선택자

태그 {
}
.클래스 {
}
#아이디 {
}
태그태그태그 {
}
.클래스 태그 태그 {
}

4.1. CSS 코딩 자리 3가지

• 인라인 CSS (추후 React 에서는 인라인 방식을 많이 활용함 : css 우선순위 적용)

<태그 style=""></태그>

• style 태그 CSS ( 추후 React에서는 objec t방식으로 많이 활용함)

<style></style>
<태그></태그>

• style 파일 link 방식(추후 React에서는 많이 필요함 : 파일명. ,module . css)

<link rel="stylesheet" href="css/header.css" />

4.2. header css 실습

-css/header.css파일

<link rel="stylesheet" href="css/header.css" />

4.3. display 의 이해

• block, inline, inline-block, none, flex ...

4.2.1. block

• 하나의 침범할 수 없는 가로 영역
• div, ul, li, h1~h6, p 등등
• 기본적으로 width: 100%
• css 의 모든 값을 활용할 수 있다.(width, height, margin, padding 등)

4.3.2. inline

• 한개의 글자처럼 처리됩니다.
• width, height, maring, padding 을 적용 못함
• a, img, span, b, strong 등등

4.3.3. inline-block

• inline 과 block 을 조합한다.
• 가로로 배치되면서 , width, height 등을 자유롭게 활용함.
• 엔터키에 의한 공백 한칸이 작성됨.(원하지 않는 공백이 영역에 들어감)

4.3.4. flex

• block 이면서 inline 이면서, 가로 정렬, 세로 정렬, 여백조절이 가능함
• 가로로 레이아웃 배치 시 최적화
• https://studiomeal.com/archives/197
• justify-content, align-items, gap, flex: 숫자 등등

4.3.5. grid(추후 파악)

• block 이면서 inline 이면서, 가로 정렬, 세로 정렬, 여백조절이 가능함
• 표처럼 레이아웃 배치 시 최적화
• https://studiomeal.com/archives/533

4.3.6. none

• 화면에 html 태그가 없는 것처럼 처리
• js 에서도 없다고 판단하여 초기 처리 코드 불가

4.4. 반응형의 이해

• 넓은 화면부터 html, css작업
• 좁은 화면으로 html, css 마무리 권장

4.4.1 반응형 체크 사항

• html 에 반드시 아래 코드가 있어야 합니다.

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

4.4.2. 미디어 쿼리

• 큰 사이즈 부터 작은 사이즈로 max-width 를 추천합니다.
• 공백을 주의해야 합니다.
• 반드시 {} 안쪽에 원하는 css 코드 하셔야 합니다.

@media and (max-width: 1280px) {
  원하는 css 작성
}
@media and (max-width: 1024px) {
  원하는 css 작성
}
@media and (max-width: 960px) {
  원하는 css 작성
}
@media and (max-width: 540px) {
  원하는 css 작성
}

4.5 글꼴 셋팅하기

• 모든 css 및 html 작업전엔 결정하여야 합니다.
• 디자이너 및 기획자에게 문의해야 합니다.
• css 의 body 에 기본 글꼴 배치 권장함.
• 절대 유료폰트 확인하고 활용

4.5.1. 구글 웹폰트 활용하기(무료)

• https://fonts.google.com/

4.5.2. 눈누 웹폰트 활용하기(라이선스 확인)

• https://noonnu.cc/font_page/pick

4.6 position 의 이해

• relative, absolute, fixed

4.6.1 absolute 주의사항

• 픽셀로 정확한 위치를 지정하는 경우 사용
• 반드시 상위 태그에 position 이 명시되어야 함

.엄마 {
  position: relative;
}

.자식 {
  position: absolute;
}

4.6.2 fixed 란

• 무조건 웹브라우저를 기준으로 위치 설정

.대상 {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 50px;
  z-index: 999;
}

4.7. before, after 의 이해

• 대표적으로 아이콘 출력하는 경우 많이 활용

<대상> before 내용 after </대상>

대상::after {
  content: "";
}
대상::before {
  content: "";
}

4.8. CSS의 우선순위 (아주중요.)

• 어느 css가 마지막에 적용 되는가?
• 기본 : 태그(작성순서 비교) ===> 클래스(작성순서 비교) ===> 아이디
• 범위(공백) 선택자 CSS로 다시 적용된다.
• 경로(>) 선택자 CSS로 다시 적용된다.
• css 문제해결 : F12 개발자 도구에서 확인(아래에서 윗방향으로 해결)
• 도저히 해결이 안된다면 !important 옵션 사용

4.9. PostCSS Sorting 설치 및 설정

• CSS 속성 정렬하기
• 단축키 생성 : shift + alt + p 등록
• 참고

"postcssSorting.config": {
   "properties-order": [
      /* Layout */
      "display",
      "grid",
      "grid-column-gap",
      "grid-row-gap",
      "grid-auto-flow",
      "grid-auto-rows",
      "grid-auto-columns",
      "justify-items",
      "align-content",
      "place-items",
      "gap",
      "align-items",
      "justify-content",
      "flex-wrap",
      "flex-basis",
      "flex-grow",
      "flex-shrink",
      "flex",
      "align-self",
      "flex-direction",

      /* Box */
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "border",
      "border-top",
      "border-bottom",
      "border-right",
      "border-left",
      "border-style",
      "border-color",
      "border-top-width",
      "border-right-width",
      "border-bottom-width",
      "border-left-width",
      "border-top-style",
      "border-right-style",
      "border-bottom-style",
      "border-left-style",
      "border-top-color",
      "border-right-color",
      "border-bottom-color",
      "border-left-color",
      "border-top-left-radius",
      "border-top-right-radius",
      "border-bottom-right-radius",
      "border-bottom-left-radius",
      "outline",
      "outline-width",
      "outline-style",
      "outline-color",
      "outline-offset",
      "box-shadow",
      "overflow",
      "overflow-x",
      "overflow-y",
      "clip",
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",
      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height",
      "float",
      "clear",
      "visibility",
      "vertical-align",

      /* Background */
      "background",
      "background-color",
      "background-image",
      "background-repeat",
      "background-attachment",
      "background-position",
      "background-clip",
      "background-origin",
      "background-size",

      /* Font */
      "font-family",
      "font-size",
      "font-style",
      "font-weight",
      "line-height",
      "color",
      "text-align",
      "text-decoration",
      "text-transform",
      "letter-spacing",
      "text-shadow",
      "white-space",
      "word-spacing",
      "word-break",
      "word-wrap",
      "text-indent",
      "direction",
      "unicode-bidi",
      "hyphens",

      /* Animation and Transition */
      "animation",
      "animation-name",
      "animation-duration",
      "animation-timing-function",
      "animation-delay",
      "animation-iteration-count",
      "animation-direction",
      "animation-fill-mode",
      "animation-play-state",
      "transition",
      "transition-property",
      "transition-duration",
      "transition-timing-function",
      "transition-delay",

      /* Other */
      "content",
      "counter-reset",
      "counter-increment",
      "quotes",
      "list-style",
      "list-style-position",
      "list-style-type",
      "caption-side",
      "empty-cells",
      "table-layout",
      "pointer-events",
      "cursor",
      "resize",
      "overflow-wrap",
      "scroll-snap-type",
      "scroll-padding",
      "scroll-padding-top",
      "scroll-padding-right",
      "scroll-padding-bottom",
      "scroll-padding-left",
      "scroll-behavior",
      "scroll-snap-align",
      "scroll-snap-margin",
      "scroll-snap-stop",
      "scrollbar-width",
      "scrollbar-color"
    ]
  }

4.10. 한줄 말 줄임 코드 (...처리)

선택 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

4.11. Gradient 온라인도구

• https://cssgradient.io/

4.12. 두줄 말 줄임 코드 (...처리)

대상 {
  /* 2줄 말줄이기 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

5. javaScript 의 이해

• Java 는 객체지향 프로그래밍, javaScript 는 스크립트 프로그래밍
• 웹브라우저용 js 가 원본인데, V8 엔진만 추출해서 Node.js 만듬
• PC용 즉, 로컬용 js 가 Node.js 입니다. (DB 제어, 네트워크, 소프트웨어, 앱 개발 등)

5.1. 기본적인 js 의 역할 (개인 주관)

• html, css 제어 js
• 데이터 연동 js

5.2. js 코딩 자리

• 가장 아랫 줄이 제일 좋은 코드 자리 입니다

5.2.1. 인라인 방식

<태그 onload="" onclik=""></태그>

5.2.2. 태그 방식

<script></script>
<태그></태그>

5.2.3. 파일 방식

<script src="경로/파일명.확장자"></script>
<태그></태그>

5.3. js 가 실행되는 시점 유의 사항(html, css 제어 시)

-html과 js 가 모두 준비가 되면 실행되길 원함.

window.addEventListener("DOMContentLoaded", function () {
  //할일
});

• 이미지 등의 용량이 큰 리소스가 모두 준비되면 실행되길 원함.

window.addEventListener("load" function () {
   //할일
});

5.4. js를 이용한 태그 선택하기

const tag = document.querySelector("태그")
const class = document.querySelector(".클래스")
const id = document.querySelector("#아이디")
const tags = document.querySelectorAll("태그 태그 태그")
const tags2 = document.querySelectoAll(".클래스 태그 태그")

5.5. 백틱을 이용한 변수값 출력

const age = 20;
const tag = `<div>나이는 ${age} </div>`;

5.6. 문자를 html 로 출력하기

const tag = `<div>안녕</div>`;
const pos = doucment.querySelector(".hi");
pos.innerHTML = tag;

5.7. 원시(primitive) 데이터 종류의 이해

• js 에서 이해할 수 있는 자료의 종류를 데이터타입 또는 데이터 형 이라고 합니다.
• 영어로는 Data Type 이라고 합니다.

5.7.1. 문자열

• 문자와 문자열은 다릅니다.

const 변수명 = 변수값;
const nickName1 = "홍길동";
const nickName2 = '홍길동'';
const nickName3 = `홍길동`;

5.7.2. 숫자

• 정수(양수, 음수), 실수(양의 소수, 음의 소수)

const 변수명 = 변수값;
const age = 10;
const height = 180.5;

5.7.3. 불리언(참, 거짓)

-true, false

const isLogin = true;
const isMember = false;

5.7.4 undefind

• 모든 변수의 초기값;
• 변수값이 정의가 안되었어요

let nickName;

5.7.5. null

• 개발자가 정말 값이 없다고 명시함.

const isLogin = null;

5.7.6. symbol

• 절대로 js 코드에서 절대로 중복이 안되는 내용 만드는 경우

5.8. 원시 데이터를 모아서 만드는 데이터 종류의 이해

• 복합데이터 또는 참조형 데이터(Reference Data Type)

5.8.1. 배열(Array)

• 기호로는 [] 사용합니다.
• 배열은 순서(index)가 중요하므로 순서 값 즉 인덱싱을 관리합니다.
• 인덱스는 자동으로 0번 부터 , 마다 증가합니다.
• 변수명[인덱스번호] 를 통해서 원하는 값 추출 함.
• 배열은 변수명.length가 주어집니다.

const arr = [1, 2, 3, "안녕", true, false, null, undefined, symbol];
arr[3]; // true 추출
arr.length; // 8출력

5.8.2. 객체

const obj = {
  속성명: 1,
  속성명2: "과학",
  속성명3: false,
};

obj.속성명; //1
obj.속성명2; //"과학"
obj.속성명; //:falcs"

5.9. 반복문

• for 문, while 문, do while 문
• 우선 for 문이 활용율 90% 이상일 듯 합니다.
• for 문의 특징은 몇 번 반복해야 할지 횟수를 아는 경우 활용

for( 초기값; 조건식; 증감식;){
  // 할일
}

for(let i = 0; i < 10; i ++){
  console.log(i);
  }

5.10. 조건문

• if, switch
• 웹퍼블리싱에서는 if 문이 코드에 90% 이상일 듯..?

if(true냐 false 냐 조건 판단){
  // true 면 실행
}else{
  // false 면 실행
}

6. Swiper 슬라이드의 이해

• 대표적인 슬라이드 라이브러리
• Swiper 주소 (https://swiperjs.com/)
• Slick 주소 (https://kenwheeler.github.io/slick)
• BxSlider (반응형, 모바일 지원 안됨) 주소 (https://bxslider.com/)

6.1. Swiper 슬라이드 사용하는 이유

• 안전성, 반응형, 모바일 터치 지원
• React(Next.js), Vue, Svlet 등의 FrontEnd 기술 지원
• TypeScript 지원 및 예제 지원

6.2 기본적인 기능은 예제에서 확인 후 활용

• https://swiperjs.com/demos
• Core 소스와 : 웹퍼블리싱 참조
• React 소스 : FE 에서 참조

6.3. 아주 특별한 가능을 구현하는 경우(예제에 없는 기능)

-API 문서 참조 : (https://swiperjs.com/swiper-api)

6.4. Core 샘플 활용하기 (웹퍼블리싱)

6.4.1. html에 반드시 배치하기(2줄)

• 반드시 우리의 css 와 js 파일 연결 코드 보다 윗줄에 있어야 합니다.

<!-- Link Swiper's CSS -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

6.4.2. div 클래스 명에서 절대로 수정 하면 안됨

<!-- 개발자 클래스와 내용 부분 수정 가능 -->
<div class="swiper 개발자 클래스">
  <div class="swiper-wrapper">
    <dix class="swiper-slide">1</dix>
    <dix class="swiper-slide">2</dix>
    <dix class="swiper-slide">3</dix>
    <dix class="swiper-slide">4</dix>
    <dix class="swiper-slide">5</dix>
    <dix class="swiper-slide">6</dix>
    <dix class="swiper-slide">7</dix>
    <dix class="swiper-slide">8</dix>
  </div>
</div>

6.4.3. swiper 슬라이드 작동되는지 확인 부터 하기

• load 는 이미지 등의 용량이 큰 파일이 로드되면 실행하도록 함.

window.addEventListener("load", function () {
  // swiper 만들기 실행
  new Swiper(".개발자 클래스", {});
});

6.4.4. 옵션들

• slidesPerView : 화면당 보여줄 슬라이드 수
• spaceBetween : 슬라이드의 간격 (픽셀단위)
• slidesPerGroup : 한번 이동시 몇개의 슬라이드 이동개수
• breakpoints: 웹브라우저 너비(픽셀) 계산 후 슬라이드 배치

window.addEventListener("load", function () {
  new Swiper(".sw_tour", {
    slidesPerView: 1,
    spaceBetween: 26,
    slidesPerGroup: 1,
    // 반응형
    breakpoints: {
      760: {
        slidesPerView: 2,
        slidesPerGroup: 2,
      },
      1280: {
        slidesPerView: 3,
        slidesPerGroup: 3,
      },
    },
  });
});

-그리드를 이용한 2줄 이상 출력하기(인터파크예제)

window.addEventListener("load", function () {
  new Swiper(".sw_tour", {
    slidesPerView: 5,
    grid: {
      rows: 2,
      fill: "row",
    },

    spaceBetween: 26,
    slidesPerGroup: 1,

    // 반응형
    breakpoints: {
      1024: {
        slidesPerView: 2,
        slidesPerGroup: 2,
        grid: {
          rows: 1,
          fill: "row",
        },
      },
      1280: {
        slidesPerView: 3,
        slidesPerGroup: 3,
        grid: {
          rows: 1,
          fill: "row",
        },
      },
    },
  });
});

• 좌측, 우측 슬라이드 이동버튼
• 첫 페이지와, 마지막 페이지에서 버튼 숨기기 적용
• 원본 swiper 예제의 버튼의 클래스 명을 꼭 알아내서 활용하자.

.swiper-button-disabled {
  display: none !important;
}

    navigation: {
        nextEl: ".버튼 클래스명",
        prevEl: ".버튼 클래스명",
      },

7. SCSS

7.1. VSCode 컴파일 플러그인 설치

• live sass compiler 설치

7.2. 실습 환경

• scss 폴더 만들기
• scss 폴더/test.scss 파일 만들기
• 반드시 VSCode 의 하단 바에 watch Sass를 Watching..으로 변경 (클릭시 변경)

7.3. 환경 셋팅

• 파일명.scss 는 scss 폴더에 보관
• 파일명.css 는 css 폴더에 보관

환경 설정

• settings 메뉴 선택

• 다음의 코드를 추가한다.

  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/css",
      "savePathReplacementPairs": null
    }
    ],

7.4. 기초 문법

• 참조 : https://www.heropy.dev/p/Y7OrPe
• 중첩(Nesting)

7.4.1. 중첩(Nesting)

// 중첩 (Nesting)
.card {
  border: 1px solid #000;
  .title {
    position: relative;
    font-weight: 700;
    &:hover {
      color: aqua;
    }
    &:active {
      color: olive;
    }
    &::after {
      content: "";
      position: absolute;
      width: 32px;
      height: 32px;
      background-color: red;
      left: 0;
      top: 0;
    }
  }
  .content {
    color: orange;
    button {
      border: 1px solid green;
      &:hover {
        background-color: red;
      }
    }
  }
}

.card {
  border: 1px solid #000;
}
.card .title {
  position: relative;
  font-weight: 700;
}
.card .title:hover {
  color: aqua;
}
.card .title:active {
  color: olive;
}
.card .title::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  background-color: red;
  left: 0;
  top: 0;
}
.card .content {
  color: orange;
}
.card .content button {
  border: 1px solid green;
}
.card .content button:hover {
  background-color: red;
} /*# sourceMappingURL=test.css.map */

7.4.2. 변수

// 변수 만들기

$width-screen: 960px;
$pc-w: 760px;

.wrap {
  position: relative;
  // 변수 사용하기
  width: $width-screen;
  .header {
    // 변수 사용하기
    width: $width-screen;
    .inner {
      // 변수 사용하기
      width: $pc-w;
    }
  }
  .main {
    // 변수 사용하기
    width: $width-screen;
  }
  .footer {
    // 변수 사용하기
    width: $width-screen;
  }
}

7.4.3. 변수를 모으고 다른 scss 에서 사용하기

• css 로 생성할 필요가 없는경우 _파일명.scss로 생성
• scss 폴더에 val.scss 파일 만들기(파일명은 자유)

$width-screen: 960px;
$pc-w: 760px;

• 변수 사용시 @import "val"; _반드시 제거하고 파일명만 적기!

@import "val";

.wrap {
  position: relative;
  // 변수 사용하기
  width: $width-screen;
  .header {
    // 변수 사용하기
    width: $width-screen;
    .inner {
      // 변수 사용하기
      width: $pc-w;
    }
  }
  .main {
    // 변수 사용하기
    width: $width-screen;
  }
  .footer {
    // 변수 사용하기
    width: $width-screen;
  }
}

7.4.4 함수(Mixins) 사용하기

• 파일명을 _를 활용하자. (scss/_mixins.scss)

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
@mixin border-fn($cc) {
  border: 5px solid $cc;
}

• 아래처럼 불러들임

@import "val";
@import "mixins";

@import "val";
@import "mixins";

.wrap {
  position: relative;
  // mixins 사용
  @include flex-center;
  // 변수 사용하기
  width: $width-screen;
  .header {
    // mixins 사용
    @include flex-center;
    // 변수 사용하기
    width: $width-screen;
    .inner {
      @include border-fn(red);
      height: 100px;
      // 변수 사용하기
      width: $pc-w;
    }
  }
  .main {
    @include border-fn(#fff);
    // 변수 사용하기
    width: $width-screen;
  }
  .footer {
    // 변수 사용하기
    width: $width-screen;
  }
}

8. 파비콘 및 아이콘 만들기

• https://realfavicongenerator.net/

9. SEO

• Search Engine Optimization : 검색 엔진 최적화
• 구글, 네이버 : 검색어를 입력시 관련 순위로 목록 제시함.

9.1. 기본적인 SEO 작성 목록

• <title>타이틀</title> : 고정된 글자. 검색 결과 타이틀
• <meta name = "description" content = "서비스 설명"/> : 요약 설명, 검색 결과 내용
• <meta name = "keyword" content = "키워드"/> : 핵심 키워드
• <meta property = "og : title" content = "제목"/> : sns 공유 시 표현 제목
• <meta property = "og : description" content = "서비스 설명"/> : sns 공유 시 설명
• <meta property = "og : image" content = "https~"/> : 미리보기 이미지 url

9.2 검색 엔진 로본 을 위한 설정

• robots.txt 파일 생성

User-agent: *
Allow: /
Sitemap: https://til-basic-dusky.vercel.app/Sitemap.xml

• sitemap.xml 파일 생성(기본구조)

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

    <url>
        <loc>https://til-basic.vercel.app</loc>
        <lastmod>2025-06-27</lastmod>
        <changefreq>daily</changefreq>
        <priority>1.0</priority>
    </url>

    <url>
        <loc>https://til-basic.vercel.app/ceo</loc>
        <lastmod>2025-06-27</lastmod>
        <changefreq>yearly</changefreq>
        <priority>0.0</priority>
    </url>

</urlset>

9.3 네이버와 구글 검색엔진 등록해 보기