lucy.log https://velog.io/ Wed, 10 May 2023 09:02:30 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed lucy.log https://velog.velcdn.com/images/lucy_leee/profile/0224280a-b728-4d81-8bd3-7b89859b3216/image.JPG https://velog.io/ Copyright (C) 2019. lucy.log. All rights reserved. <![CDATA[제곱 미터는 어케 설정함?]]> https://velog.io/@lucy_leee/%EC%A0%9C%EA%B3%B1-%EB%AF%B8%ED%84%B0%EB%8A%94-%EC%96%B4%EC%BC%80-%EC%84%A4%EC%A0%95%ED%95%A8 https://velog.io/@lucy_leee/%EC%A0%9C%EA%B3%B1-%EB%AF%B8%ED%84%B0%EB%8A%94-%EC%96%B4%EC%BC%80-%EC%84%A4%EC%A0%95%ED%95%A8 Wed, 10 May 2023 09:02:30 GMT <td>20m<sup>2</sup></td>

그럼 텍스트 높이가 달라지잖아..?

그럼.. 우짜뇽...

<td>20<span class="exponent">2</span></td>
.exponent {
  font-size: 0.7em;
  vertical-align: super;
  line-height: 1;
}

캬캬캬캬 성공 했구만 : )

]]> <![CDATA[slack reminder 사용해보기]]> https://velog.io/@lucy_leee/slack-reminder-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0 https://velog.io/@lucy_leee/slack-reminder-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0 Mon, 06 Feb 2023 01:50:43 GMT Slack은 효율적인 팀 커뮤니케이션을 지원하는 메신저 어플리케이션입니다. Slack에서 "/remind" 명령어를 사용하여 미래의 중요한 일정을 쉽게 기억할 수 있습니다. 이 블로그에서는 Slack에서 "/remind" 명령어를 사용하는 방법에 대해 자세히 설명하겠습니다.

  1. Slack 채널 또는 대화창에서 "/remind" 명령어를 입력합니다.
  2. 알림이 필요한 날짜와 시간, 알림 내용을 입력합니다.
  3. 알림이 설정되어, 지정한 날짜와 시간에 Slack에서 알림이 표시됩니다.
/remind @who to “what” at time 반복일정

[누구에게] : me, @맨션, #채널명 설정 가능

[무엇을] : 리마인드할 내용을 자유롭게 서술

[언제] : 언제 메시지를 통지할 것인지 설정.

(시간을 설정하지  않으면 기본으로 오전 9시로 설정)

10초 후 45분 뒤
3분 뒤 in 3 minitus
16시 20분 at 16:20
1월 1일 6시 30분 on January 1 at 06:30
평일 weekday
내일 tomorrow
매주 월요일 every Monday
격주 월요일 every other Monday
매주 월요일 11시 0분 at 11:00 every Monday

/remind list

remind 설정된 리스트를 한눈에 확인해볼수 있으며, 삭제가 가능합니다

이와 같이 "/remind" 명령어를 사용하여 Slack에서 미래의 알림을 설정할 수 있습니다.

]]> <![CDATA[WELCOME 2023]]> https://velog.io/@lucy_leee/WELCOME-2023 https://velog.io/@lucy_leee/WELCOME-2023 Mon, 16 Jan 2023 04:57:29 GMT 2022를 돌아보며... 
2022년 회고를 하면서 느낀 점은
생각보다 많은 일을 했지만 남긴 건 많이 없어 보인다.

2022년은 진로를 정하며 그 분야에서 많이 성장하고,
인간관계와 사회생활을 넓혀보는 시간을 가졌다고 생각한다.

2023을 시작하면서...

이번 2023년도는 그것들을 활용하여 나를 발전시키고,
나 자신을 돌아보며 인생을 성장시키고 싶다는 생각도 가지게 되었다.

목표

첫번째. 블로그 꾸준히 작성하기

  • 지금까지 노션, 벨로그, 티스토리, 네이버 블로그 등등 여기저기 많이 뿌려져 있는 글들을 모아 한곳에 정리해 보려고 한다.
  • 나는 뭘 해도 성장하는 주니어 개발자 배운것들을 예쁘게 정리해서 두고두고 보려고 한다.
  • 내가 가진 정보나 지식이 많이 부족하다는것을 깨닳았다. 앞으로는 더 성장하기 위해 글을 쓰고 피드백을 받을까 한다.

두번째. 성장하기

  • 2022년도는 정말 많이 놀았다. 2023년도는 보다 적게 놀고 더 많이 성장하고 싶은 욕심이 있기에 계획을 세우고 실천하며 나 자신을 발전시키고 싶다.
  • 내가 뭘 좋아하는지, 나는 무엇을 하면서 스트레스를 풀고 싶은지, 앞으로 어떤 방향을 살고 싶은지 알아보는 시간을 가지려고 한다. 나는 소듕하니깐 ⭐️

세번째. 건강지키기

  • 생각해 보니 나는 생각보다 생활습관이 좋지 못한 거 같다. 잠을 많이 자긴 하지만 너무 많이 자고, 식습관도 좋지 못한 거 같다. 회사에서 지원해 주는 건강검진을 받고 부족한 부분을 채워 더 건강해지려고 노력해야겠다.
  • 자세. 진짜 중요한데 잘 못 지키고 있어서 항상 허리와 손목이 아작나는 경험을 하고 있다. 앉는 습관부터 일하는 중간에 스트레칭도 꾸준히 해보려고 한다 ㅎㅎ

네번째. 충분한 휴식과 여행

  • 2022년도에는 많은 여행을 다녔고 그에 따라 많은 경험을 토대로 발전하는 경험을 했던 것 같다. 2023년에도 꾸준히 많은 경험을 통해 성장하는 내가 되고 싶다
  • 12월에 2주 정도 쉬면서 느꼈지만 인간은 충분한 휴식이 필요하다고 생각한다. 가만히 쉬면서 내 인생도 돌아보고 멘탈케어를 하는 시간을 종종 가져보려고 한다.
2023년은 보다 행복한 내가 되기를 바라며 글을 마친다.
]]> <![CDATA[[TIL] useEffect 에서 2번씩 호출될때]]> https://velog.io/@lucy_leee/TIL-useEffect-%EC%97%90%EC%84%9C-2%EB%B2%88%EC%94%A9-%ED%98%B8%EC%B6%9C%EB%90%A0%EB%95%8C https://velog.io/@lucy_leee/TIL-useEffect-%EC%97%90%EC%84%9C-2%EB%B2%88%EC%94%A9-%ED%98%B8%EC%B6%9C%EB%90%A0%EB%95%8C Wed, 11 Jan 2023 10:54:02 GMT next.js 를 사용하고 있는데 useEffect가 두번씩 호출이 되는 문제가 있었다.

   useEffect(() => {
       console.log("bbbddd")
   }, [])

React.StrictMode 가 설정되어 있을 경우 그렇다.

react

  <React.StrictMode>
    <App />
  </React.StrictMode>,

next

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,  // true -> false 변경
};

module.exports = nextConfig;
]]> <![CDATA[상속 & 우선순위]]> https://velog.io/@lucy_leee/%EC%83%81%EC%86%8D-%EC%9A%B0%EC%84%A0%EC%88%9C%EC%9C%84 https://velog.io/@lucy_leee/%EC%83%81%EC%86%8D-%EC%9A%B0%EC%84%A0%EC%88%9C%EC%9C%84 Tue, 19 Apr 2022 05:07:02 GMT CSS를 상속하는 속성과 상속하지 않는 속성이 있다.

  • 상속하는 속성은 자식 요소에 영향을 끼친다.
  • 상속하지 않는 속성은 자식 요소에 영향을 끼지지 않는다.
property 상속 property 상속
width/height no visibility yes
margin no opacity yes
padding no font yes
border no color yes
display no line-height yes
background no text-align yes
vertical-align no white-space yes
text-decoration no
position no

캐스캐이딩

💡 요소는 하나 이상의 CSS 선언에 영향을 받을 수 있다.
이것을 피하기 위해 캐스캐이딩이 필요!

중요도

CSS가 어디에 선언되었는지에 따라 우선순위가 달라진다.

  1. head 요소 내의 style 요소
  2. head 요소 내의 style 요소 내의 @Import
  3. 로 연결된 CSS 파일
  4. 로 연결된 CSS 파일 내의 @import 문
  5. 브라우저 디폴트 스타일시트

명시도

대상은 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아진다.

p { color: red !important; } // 1
#thing { color: blue; } // 2
div.food { color: chocolate; } // 3
.food { color: green; } // 4
div { color: orange; } // 5
]]> <![CDATA[Table]]> https://velog.io/@lucy_leee/Table https://velog.io/@lucy_leee/Table Tue, 19 Apr 2022 05:00:12 GMT table { width: 100%; } 

table {
    width: 100%;
    border: 1px solid #555;
}

table {
  width: 100%;
  border: 1px solid #555;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #555;
}

table {
  width: 100%;
  border: 1px solid #555;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #555;
  padding: 10px;
}

table {
  width: 100%;
  border-top: 1px solid #555;
  border-collapse: collapse;
}
th, td {
  border-bottom: 1px solid #555;
  padding: 10px;
}

table {
  width: 100%;
  border-top: 1px solid #444444;
  border-collapse: collapse;
}
th, td {
  border-bottom: 1px solid #444444;
  border-left: 1px solid #444444;
  padding: 10px;
}
th:first-child, td:first-child {
  border-left: none;
}

HTML

<body>
    <table>
      <thead>
        <tr>
          <th>Lorem</th><th>Ipsum</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Lorem</td><td>Ipsum</td>
        </tr>
        <tr>
          <td>Lorem</td><td>Ipsum</td>
        </tr>
        <tr>
          <td>Lorem</td><td>Ipsum</td>
        </tr>
        <tr>
          <td>Lorem</td><td>Ipsum</td>
        </tr>
        <tr>
          <td>Lorem</td><td>Ipsum</td>
        </tr>
      </tbody>
    </table>
  </body>

| Reference

https://www.codingfactory.net/10510

]]> <![CDATA[RESET.CSS]]> https://velog.io/@lucy_leee/RESET.CSS https://velog.io/@lucy_leee/RESET.CSS Tue, 19 Apr 2022 04:48:18 GMT 스타일 초기화 // 브라우저마다 기본적으로 제공하는 스타일값 이 있어 기본값으로 초기화 시켜주기 위해 설정

Reset CSS란 브라우저 간의 차이를 최대한 없애는 코드를 넣어서, 브라우저 요소들의 스타일이 “0”인 상태에서 디자인을 만들기 위해 사용하는 코드이다.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

적용방법

@import "reset.css"; // 맨 위에 적어야 한다

.newbox
{
    padding: 5px;
}
<head>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
</head>
// 다른 CSS와 함께 HTML 파일 안에서 불러와서 사용 가능하다.]]> <![CDATA[기초 문법 정리]]> https://velog.io/@lucy_leee/%EA%B8%B0%EC%B4%88-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC https://velog.io/@lucy_leee/%EA%B8%B0%EC%B4%88-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC Tue, 19 Apr 2022 04:44:16 GMT CSS(Cascading style Sheets)

CSS의 문법은 선택자(selector)와 선언부(declaratives)로 구성됩니다.

CSS의 문법은 선택자(selector)와 선언부(declaratives)로 구성됩니다.

선택자 - CSS를 적용하고자 하는 HTML 요소(element)

선언부 - 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함할 수 있으며, 중괄호({ })를 사용하여 전체를 둘러쌉니다.

선언방식

인라인(in-line) 방식

HTML 요소(태그)의 style 속성에 직접 작성하는 방식

<body>
    <p style="width:100px; height:100px; margin:5px;">
</body>

내장(embedded) 방식

HTML 안에 작성하는 방식

<head>
    <style type="text/css">
        .logo {
                        color: #22a2a2a;
                        width:100px;
                        height:100px; 
                    }
    </style>
</head>

링크(link) 방식

HTML 를 사용하여 외부문서에서 CSS를 불러와 적용하는 방식

<head>
    <link href="./style.css" rel="stylesheet" type="text/css">
</head>

@import 방식

CSS @import 방식을 이용하여 외부 문서로 CSS를 불러와 적용하는 방식

<head>
    <style type="text/css">
        @import url(style.css);
    </style>
</head>

선택자

HTML 요소 선택자

CSS를 적용할 대상으로 HTML요소의 이름을 직접 사용하여 선택할 수 있습니다.

<style>
    h2 { color: teal; text-decoration: underline; }
</style>
...
<body>
    <h2>이 부분에 스타일을 적용합니다.</h2>
</body>

아이디(id) 선택자

아이디 선택자는 CSS를 적용할 특정 요소를 선택할 때 사용합니다. [#을 써서 구분함]

<style>
    #heading { color: teal; text-decoration: line-through; }
</style>
...
<body>
    <h2 id="heading">이 부분에 스타일을 적용합니다.</h2>
</body>

클래스(class) 선택자

클래스 선택자는 특정 집단의 여러 요소를 한번에 선택할때 사용합니다 

<head>
    <meta charset="UTF-8">
    <title>CSS Syntax</title>
    <style>
        .head{
                color: lime;
                text-decoration: overline;
        }
    </style>
</head>
<body>
    <h1>클래스 선택자를 이용한 선택</h1>
    <h2 class="head">이 부분에 스타일을 적용합니다.</h2>
    <h3 class="head">이 부분에도 같은 스타일을 적용합니다.</h3>
</body>

스타일 적용 우선순위

  1. 인라인 선언방식
  2. 아이디 선택자
  3. 클래스 선택자
  4. 태그 선택자
  5. 전체 선

| Reference

http://tcpschool.com/css/css_intro_syntax

]]> <![CDATA[Slideshow Gallery 3]]> https://velog.io/@lucy_leee/Slideshow-Gallery-3 https://velog.io/@lucy_leee/Slideshow-Gallery-3 Tue, 12 Apr 2022 08:19:07 GMT

Slideshow Gallery 2의 내용을 고도화 시켜 컴포넌트화 시키는 작업을 진행했다.

JAVASCRIPT

function button1_click() {
    init();

    var strPath  = "https://via.placeholder.com/325x260/0A174E/0A174E,";
        strPath += "https://via.placeholder.com/325x260/07553B/07553B,";
        strPath += "https://via.placeholder.com/325x260/50586C/50586C,";
        strPath += "https://via.placeholder.com/325x260/DCE2F0/DCE2F0,";
        strPath += "https://via.placeholder.com/325x260/815854/815854,";
        strPath += "https://via.placeholder.com/325x260/F9EBDE/F9EBDE";

    setNavImage(strPath); 
    showSlides(slideIndex);
    setBtnoff(strPath);
}

// 이제 strIndex를 직접 입력해줄 필요가 없다. strPath를 사용하여 자동으로 계산해준다.

function setNavImage(strPath) {
    console.log("setNavImage 실행: "); 
    var aPath = strPath.split(','); 
    arrPath = aPath; 

    var strIndex = ""
    for ( var i = 1 ; i <= aPath.length; i++ ) {
        strIndex += i+",";
    }
    strIndex = strIndex.slice(0, -1);
    // 주소 갯수 받아와서 그 앞까지 , 로 숫자 추가해준 뒤 마지막 , 삭제

    var aIndex = strIndex.split(','); 
    var tagStr = ""; 

    totalLen = aPath.length;
    for (var i = 0; i < totalLen; i++) {
        tagStr += '<div class="column"> <img class="demo " src="' + aPath[i] + '" onclick="currentSlide(' + aIndex[i] + ')"> </div> \n';
    }

    var navImg = document.getElementById("NavImg");
    navImg.innerHTML = tagStr; 
}

// 주소가 담긴 데이터의 갯수를 "," 문자열로 구분해 준 뒤, 마지막 ","는 삭제 한다.

function plusSlides(n) {
    console.log("plusSlides 실행: ");
    if (n > 0) {
        slideIndex += 1;
        if (slideIndex > totalLen) {
            slideIndex = totalLen;
            document.getElementById('next').style.color="#ffff0000";
        }
    } else {
        slideIndex -= 1;
        if (slideIndex < 1) {
            slideIndex = 1;
            document.getElementById('prev').style.color="#ffff0000";
        }
    }

    showSlides(slideIndex);

    if (n > 0) {
        var _scrollX = $('.row').scrollLeft();
        $('.row').scrollLeft(_scrollX + moveDistance);
    } else {
        var _scrollX = $('.row').scrollLeft();
        $('.row').scrollLeft(_scrollX - moveDistance);
    }
}

// 만약 slider 갯수가 없거나, 1개이면 prev, next 버튼을 투명화 시켜준다.

- 끝 -

]]> <![CDATA[Text Tag]]> https://velog.io/@lucy_leee/Text-Tag https://velog.io/@lucy_leee/Text-Tag Tue, 12 Apr 2022 08:09:47 GMT

<h1> ~ <h6> : 제목: <h1>이 글자가 제일 크고, <h6>으로 갈수록 크기가 작아진다.

이것은 h1 tag 입니다.

이것은 h2 tag 입니다.

이것은 h3 tag 입니다.

이것은 h4 tag 입니다.

이것은 h5 tag 입니다.
이것은 h6 tag 입니다.

<hr> : 긴 가로선 표시

<br> : 줄 바꿈 // 닫는 태그는 없다

<p>: 단락, paragraph

<b> : bold, 진하게 <em> : 내용의 강조를 위해 기울임 꼴로 표시하는 경우 사용 <i> : 의미 없이 기울임 꼴로 표시하는 경우

<strong> : 중요한 내용 강조

<strike> , <del> : 취소선 텍스트

<u>, <ins> : 밑줄 텍스트

<mark> : highlighted text를 지정한다.

<sup>: sup 태그는 superscripted(위에 쓰인) text를 지정한다. <sub> : sub 태그는 subscripted(아래에 쓰인) text를 지정한다.

<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>

<q> : 짧은 인용문(quotation)을 지정한다.

]]> <![CDATA[Semantic Tag]]> https://velog.io/@lucy_leee/Semantic-Tag https://velog.io/@lucy_leee/Semantic-Tag Tue, 12 Apr 2022 08:02:39 GMT

Semantic은 '의미의', '의미론적인'이라는 뜻을 가진 형용사이다. 따라서 시맨틱 태그란 의미가 있는 태그를 말한다.

div나 span과 같이 의미가 없는 태그는 태그 이름만 보고는 어떤 내용인지 전혀 유추할 수가 없는 반면, form, table, article 등 의미가 있는 태그는 내용을 명확하게 정의한다.

검색엔진최적화(SEO) : 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 따라서 제목은 h1, 중요한 단어는 strong 또는 em을 사용하는 등 의미에 맞는 올바른 태그를 사용하는 것이 중요하다.

시맨틱 태그를 사용하면 애플리케이션, 기업, 커뮤니티에서 데이터를 공유하고 재사용할 수 있다.
- W3C -

<header> : 도입부에 해당하는 콘텐츠나 네비게이션 메뉴와 같은 정보를 포함한다

  • 하나 이상의 제목 요소(h1~h6)
  • 로고(logo), 아이콘(Icon)
  • 저자(author) 정보

<nav> : 페이지의 네비게이션 영역이며 보통 메뉴,목차에 사용 (사이트 내부, 외부로 이동)

<aside> : 간접 컨텐츠, 보조 콘텐츠 라고 칭하며 문서와 관련된 내용을 나타냄

  • 블로그 옆에 광고, 링크등 필수요소가 아닌 보조 콘텐츠 삽입(본문 이외의 내용)

<section>: 본문의 여러 내용(article)로 구성된 부분을 의미

<article>: 본문의 내용이 삽입된 독립적으로 구성된 요소를 의미

  • 게시물
  • 잡지
  • 기사
  • 블로그 작성글
  • 제품 카드

<footer>: 하단 바닥글을 의미함. 섹션에 대한 아래와 같은 정보를 포함한다.

  • 저자(author)의 정보
  • 저작권
  • 연관 페이지
  • 사이트맵
  • 연락처

<article>은 실제 내용이 들어가고 <section>은 각 태그별로 구분하기 위해 사용

ETC 강조할 땐 em, strong <p> 태그는 글의 단락에 사용된다 하지만 막 쓰는건 비추

  • 리스트는 <li>
  • 링크라면 <a>
  • 제목이면<h1 ~ h6>

]]> <![CDATA[Meta Tag]]> https://velog.io/@lucy_leee/Meta-Tag https://velog.io/@lucy_leee/Meta-Tag Tue, 12 Apr 2022 07:53:58 GMT

하이퍼텍스트(Hypertext) 생성 언어 HTML 문서 맨 위에 <head>사이에 위치한 브라우저와 검색엔진을 사용할수있도록 웹 문서의 정보를 포함하는 태그이다.

<meta> 요소가 제공하는 속성에는 4가지 유형이 있다.

  • <name>을 지정하면 전체 페이지에 적용되는 ‘문서 레벨 메타데이터’를 제공합니다
  • <charset>을 지정하면 문자 인코딩을 나타내는 ‘문자 집합 선언’을 할 수 있다,
  • <itemprop>을 지정하면 ‘사용자 정의 메타데이터’를 제공한다
  • <http-equiv>를 지정하면 유사한 이름의 HTTP 헤더가 제공하는 정보와 동일한 ‘프라그마 지시문’이 된다.

프라그마 지시문은 컴파일러의 동작(변수와 함수용 메모리 할당 방법, 확장 키워드의 허가/금지, 경고 메시지의 표시/ 숨김 등)를 제어한다.

메타데이터란 사용자가 정의, 배포, 패키지 업그레이드를 할 수 있는 데이터이다. 이 데이터는 원하는 정보를 효율적으로 찾아 이용하기 위해 일정한 규칙을 가지고 있다.

<charset>

  • 페이지의 문자 인코딩을 선언합니다. 이 특성이 존재할 경우, 반드시 문자열 "utf-8"의 ASCII 표현이어야 한다.

<name> <content>

  • name과 content를 함께 사용하면 문서의 메타데이터를 한쌍으로(이름-값) 제공할 수 있다.

content는 meta정보의 내용을 지정하고, http-equiv 또는 name 특성의 값을 담는다.

<http-equiv>

  • 프라그마 지시문을 정의함.
  • content-security-policy : 페이지의 콘텐츠 정책을 정의할 수 있다.
  • content-type : 지정할경우, content 특성 값은 반드시 "text/html; charset=utf-8"이어야 한다.
  • default-style : 기본 CSS 스타일 시트 세트의 이름을 지정한다.
  • x-ua-compatible : 지정할 경우, content 특성의 값은 반드시 "IE=edge"이다.
  • refresh : content 특성에 양의 정수 값을 설정한 경우, 새로고침시 대기시간 지정, 만약 그 뒤에 URL이 온다면 이동 전까지의 대기시간을 지정할 수 있다.

메타태그 종류

검색 엔진에 의해 검색되는 단어를 지정

<meta name="keywords" content="검색단어" />

검색 결과에 표시되는 문자를 지정

<meta name="description" content="웹에대한 간략한 설명 또는 소개" />

검색 로봇 제어

<meta name="robots" content="noindex, nofollow" />
1. All(기본값) : 'index, follow' 를 지정한 것과 같다
2. None : 'noindex, nofollow' 를 지정한 것과 같다.
3. Index : 그 페이지를 수집 대상으로 한다.
4. Noindex : 그 페이지를 수집대상에서 제외한다.
5. Nofollow : 그페이지를 포함해 링크가 걸린 곳을 수집 대상으로 하지 않는다.
6. Follow : 그 페이지를 포함해 링크가 걸린 곳을 수집 대상으로 한다.

제작일 입력

<meta name="Date" content="2020-06-05T07:45:37+09:00" />

웹페이지에 쓰인 언어 입력

<meta http-equiv="Content-Script-Type" content="Text/javascript" />

X-UA-Compatible (브라우저 호환성)

<meta http-equiv="X-UA-Compatible" content="IE-edge" />

제목

<meta http-equiv="Title" content="HTML meta 공부" />

subject (홈페이지 주제 지정)

<meta http-equiv="Subject" content="기술블로그" />

Author (페이지 작성 제작자명)

<meta http-equiv="Author" content="인파_" />

제작 도구

<meta http-equiv="Generator" content="Visual Studio Code" />

메일주소

<meta http-equiv="Email" content ="test@gmail.com" />

Distribution(배포자)

<meta http-equiv="Distribution" content="name" />

Copyright (저작권)

<meta http-equiv="Copyright" content="LUCY" />

imagetoolbar (그림에 마우스 오버 시 이미지 관련 툴바 생기지 않게 하기)

<meta http-equiv="imagetoolbar" content="no" />

Cache-Control / Pragma(Cache가 되지 않도록 하기)

<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-chche" />
<!-- 수정사항이 빠르게 반영 되지만, 로딩시간이 오래 걸린다는 단점이 있음 —>

Refresh (새로고침)

<meta http-equiv="refresh" content="60" />
<!-- 입력한 주소로 5초 후 이동 -->
]]> <![CDATA[Head Tag]]> https://velog.io/@lucy_leee/Head-Tag https://velog.io/@lucy_leee/Head-Tag Tue, 12 Apr 2022 07:47:14 GMT <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="favicon.ico"> <title>Document</title> </head>

<meta>

  • html 문서에 대한 정보.
  • 문자 인코딩 및 문서 키워드, 요약 등등등

<title>

  • 문서 제목

<link>

  • 외부 파일을 연결할 때 사용한다.

<style>

  • 스타일 정보를 정의할 때 사용하는 태그
<style>
.mybox {
   border: 5px outset red;
   background-color: black; 
   font-size: #ffcc85;
}
</style>

<script> html 파일에서 JS는 2가지 방법으로 사용할 수 있습니다,

  • 외부에 있는 파일을 불러오는 방법
  • html파일 내부에서 사용하는 방법
    <script type="text/javascript" src="./js/imjsfile.js"></script>
<script>
    document.write("Hello World !");
</script>
]]> <![CDATA[Cross Origin Resource Sharing]]> https://velog.io/@lucy_leee/Cross-Origin-Resource-Sharing https://velog.io/@lucy_leee/Cross-Origin-Resource-Sharing Thu, 07 Apr 2022 08:45:00 GMT Origin 💬
  • Origin(출처): <Protocol> "://" <hostname> [ ":" <port> ]
    • Protocol + Host + Port
    • <Protocol> : [ HTTP, HTTPS ]
    • <hostname> : 서버의 고유한 이름 또는 IP
    • <port> : 서버와 연결을 맺기 위한 TCP 포트 번호, [ Default : 80 ]

🚨 Access to fetch at https://blah.blah.blah/yadda Visit Website from origin http://localhost:1234 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

🚨 원본http://localhost:1234에서 https://blah.blah.blah/yadda 웹사이트를 가져오는도중 CORS정책에 의해 차단되었습니당. 요청한 리소스에 Access-Control-Allow-Origin 헤더가 없습니다. 만약 응답이 필요한 경우 request’s 모드를 no-cors로 변경해서 CORS가 비활성화된 리소스를 가져와주세여!

이런 오류가 생기는 이유는 HTTP요청에서 어떤 요청을 하냐에 따라 다른 정책을 따르기 때문!

<HTML> 👉🏻 Cross-Origin 정책을 따름

<Script> 👉🏻 Same-Origin 정책을 따름

  • JS는 서로 다른 도메인에 대한 요청을 보안상 제한한다.

    Cross-Origin Resource Sharing 💬

다른 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. - MDN

  • 웹 애플리케이션이 외부 리소스를 요청할 때는 HTTP 프로토콜을 사용해서 보낸다. 이때 브라우저는 Origin에 출처를 함께 담아서 보낸다.

Preflight Request💬

  1. 만약 내가 자바스크립트의 Fetch API를 사용하여 브라우저에게 리스소를 받아와! 라고 시킨다면

- Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있다. 2. 브라우저는 서버에게 예비 요청(Preflight)을 보낸다.
3. 서버는 이 예비 요청에 대한 응답으로 정책을 담은 정보를 브라우저로 다시 보내준다. 4. 이후 브라우저는 자신이 보낸 예비요청과 서버가 보내준 정보를 토대로 비교후 본 요청을 보낸다. 5. 이후 서버가 본 요청에 대한 응답을 하면 최종적으로 응답 데이터를 JS로 넘겨준다 .

Simple Request💬

특정 조건을 만족하면 예비요청을 생략할수 있다. 하지만 이 조건이 까다로워서 일반적인 방법으로 웹 어플리케이션 아키텍처를 설계한다면 거의 충조시키기 어려워 거의 사용되지 않는다.

요청의 메소드는 GET, HEAD, POST 중 하나여야 한다. Fetch가 "CORS-safelisted request-header"로 정의한 헤더만 사용할 수 있다.

  • Content-Language Content-Type Accept Accept-Language
  • Save-Data Viewport-Width DPR Downlink Width

만약 Content-Type를 사용하는 경우에는 아래 값들만 허용된다.

  • application/x-www-form-urlencoded multipart/form-data text/plain

Credentialed Request💬

이 방법은 다른 방법보다 좀 더 보안을 강화하고 싶을 때 사용하는 방법이다. 기본적으로 브라우저가 제공하는 비동기 리소스 요청 API인 XMLHttpRequest 객체나 fetch API는 별도의 옵션 없이 브라우저의 쿠키 정보나 인증과 관련된 헤더를 함부로 요청에 담지 않는다. 만약 요청에 인증과 관련된 정보를 담아야 한다면 credentials 옵션을 사용해야한다.
Credentials 옵션

  • same-origin(기본값): 같은 출처 간 요청에만 인증 정보를 담을 수 있다.
  • include: 모든 요청에 인증 정보를 담을 수 있다.
  • omit: 모든 요청에 인증 정보를 담지 않는다.

만약 same-origin , include 옵션을 사용해 리소스 요청에 인증 정보가 포함된다면 한다면 브라우저는 빡빡한 조건들을 추가하여 검사해야한다.

  • Access-Control-Allow-Origin: 모든 요청을 허용하는 (*)은 사용불가, 명시적인 URL 요구
  • 응답 헤더에는 반드시 Access-Control-Allow-Credentials: true가 존재해야함

Chrome 확장프로그램은 CORS 문제를 해결하기 위한 확장 프로그램인 Allow CORS 을 제공한다.

Reference: CORS는 왜 이렇게 우리를 힘들게 하는걸까?

]]> <![CDATA[URL ]]> https://velog.io/@lucy_leee/URL https://velog.io/@lucy_leee/URL Thu, 07 Apr 2022 06:12:34 GMT 🤔 Origin

Origin = [프로토콜]://[Host의 IP주소 또는 Domain]:[포트번호]

만약 Origin이 다르다는 것은, 주소가 다르거나, HTTP, HTTPS 프로토콜 혹은 포트번호가 다른것이다.



🤔 URL

URL주소는 네트워크 상에서 자원이 어디 있는지 알려주기 위한 규약이며, 리소스의 위치와 프로트콜을 가리킨다

  1. 프로토콜 : 네트워크 상의 서버로 부터 웹 정보와 이미지 등의 리소스를 받아올 통신 방식을 미리 정해 놓은 것으로 [ HTTP, HTTPS, FTP, FILE, MAILTO ]가 있다.

  2. 도메인 : 인터넷에서 사용 가능한 모든 웹 서버에 대해 사람이 읽을 수 있는 주소를 제공한다.

  3. Port : 네트워크, 인터넷을 사용하여 통신하는 프로그램의 논리주소 [ 0 ~ 65535 ]

  4. path to the file : 웹 자원에 대한 경로. 과거에는 물리적인 파일 위치였지만 현재는 추상화하여 나타낸다.

  5. Query String : &기호로 구분된 키/값으로 짝을 이룬 리스트 입니다. 각각의 웹서버는 파라미터들을 언급하는 자신의 규칙을 가지고 잇고, 웹서버 소유자 이외에 파라미터 사용여부는 아무도 알 수 없습니다.



🤔 Same Origin Policy(SOP)

  • SOP는 프로세스 혹은 작업을 처리하는 데 품질을 보증할 수 있도록 단계별로 할 행동을 규정해 놓은 것이다.

  • SOP는 한 Origin에서 로드된 문서 또는 스크립트가 다른 Origin의 리소스와 상호 작용할 수 있는 방법을 제한하는 중요한 보안 메커니즘이다.

]]> <![CDATA[React-SideBar]]> https://velog.io/@lucy_leee/React-SideBar https://velog.io/@lucy_leee/React-SideBar Tue, 05 Apr 2022 08:45:28 GMT

사용한 라이브러리

$ npm i styled-components
$ npm install react-icons —save

styled-components?

styled-components는 JS에서 CSS를 사용할 수 있도록 도와주는 스타일링 프레임워크입니다. React Component에 특정 스타일링을 할 수 있기 때문에 재사용성을 더 높일 수 있고, javascript에 영향을 받는 스타일링을 간편하게 구현할 수 있습니다.

기존 React에서 사용하던 CSS 방식

  const divStyle = {
    backgroundColor: "black",
    width: "100px",
    height: "100px"
  };
  return <div style={divStyle}></div>

Styled-Components를 사용한 방식

  const StyledDiv = styled.div`
    background-color: black;
    width: 100px;
    height: 100px;
  `;
return <StyledDiv></StyledDiv>

styled-components는 style이 적용된 Component를 직접 생성하기 때문에, 스타일링을 위한 코드 사용량이 줄어드는 효과가 있습니다.

React Icon

웹페이지를 구현할때 react-icons을 사용하면 빠르게 아이콘을 넣을 수 있습니다.

import { 아이콘 이름 } from 'react-icons/아이콘 카테고리';
class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}

React-SideBar 파일구조

📂 node_modules

  • package.json에 있는 모듈이 의존하고 있는 모듈 전부를 포함하고 있습니다

📂 public

  • index.html (가상 DOM을 위한 html 파일)
  • data (mock data관리)

📂 src

📄 index.js 📄 App.js 📄 reportWebVitals.js 📄 App.css 📁 components 📄 Sidebar.js 📄 SidebarData.js 📄 Overview.js 📁 pages 📄 Reports.js 📄 Reports.js 📄 Team.js

오류수정

react-router-dom이 버전 6로 업그레이드되면서, Switch를 더이상 지원을 안한다.
또한 component도 element로 바꼈다.

import { BrowserRouter as Router, Routes, Route }from 'react-router-dom';

function App() {  
  return (
    <Router>
      <Sidebar />
      <Routes> // Switch -> Routes
        <Route path='/overview' exact element={<Overview />} />
        <Route path='/reports' exact element={<Reports/>} />
        <Route path='/reports/reports1' exact element={<ReportsOne/>} />
        <Route path='/reports/reports2' exact element={<ReportsTwo/>} />
        <Route path='/reports/reports3' exact element={<ReportsThree/>} />
        <Route path='/team' exact element={<Team/>} />
      </Routes>
    </Router>
  );
}

export default App; 

function App() {
  return (
    <Router>
      <Sidebar />
      <Routes>
          <!-- React Router Dom v6 - 함수는 React 자식으로 유효하지 않습니다.-->
        <!-- <Route path='/overview' exact element={Overview} />        
        <Route path='/reports' exact element={Reports} />
        <Route path='/reports/reports1' exact element={ReportsOne} />
        <Route path='/reports/reports2' exact element={ReportsTwo} />
        <Route path='/reports/reports3' exact element={ReportsThree} />
        <Route path='/team' exact element={Team} />
      </Routes>
    </Router>
  );
}
export default App;

// element={Overview} -> element={<Overview />} // 참고: React Router Dom v6 - Functions are not valid as a React child

]]> <![CDATA[Mouse Cursor]]> https://velog.io/@lucy_leee/Mouse-Cursor https://velog.io/@lucy_leee/Mouse-Cursor Thu, 31 Mar 2022 00:40:57 GMT See the Pen Mouse Cursor by RAMI (@garam-leee) on CodePen.

]]> <![CDATA[object-fit]]> https://velog.io/@lucy_leee/object-fit https://velog.io/@lucy_leee/object-fit Tue, 29 Mar 2022 03:01:13 GMT object-fit 속성은 <img>나 <video>같은 콘텐츠 크기를 어떤 방식으로 조절할지 결정할 수 있습니다!

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

fill : 기본값. 주어진 너비와 높이에 딱 맞도록 사이즈를 조절. 비율 유지 X

contain : 이미지와 컨테이너 간의 비율이 맞지 않는 경우엔 자리가 남음 비율유지 O

cover : 비율이 맞지 않더라도 이미지를 확대해 컨테이너를 완전히 채움 비율 유지 X

none : 아무것도 하지 않지만, 가운데 정렬함

scale-down : none 또는 contain 중에 더 적절한 방향으로 이미지 사이즈를 조절

]]> <![CDATA[Slideshow Gallery 2]]> https://velog.io/@lucy_leee/Slideshow-Gallery-2 https://velog.io/@lucy_leee/Slideshow-Gallery-2 Mon, 28 Mar 2022 05:54:28 GMT

Slideshow Gallery1을 컴포넌트화 시켜서 자바스크립트만 호출해서 사용할 수 있게 제작했다. https://codepen.io/garam-leee/pen/popPwyW

HTML

// 이전 게시글인 Slideshow Gallery1 보다 훨씬 간결한 코드를 볼 수 있다.
// 메인 이미지는 서브이미지 주소만 받아와서 보여준다

JAVASCRIPT

init()

var totalLen = 0;
var slideIndex = 1;
var moveDistance = 80;
var arrPath = [];

window.onload = function () {
    init();
};

function init() {
    console.log('초기화');
    slideIndex = 1;
    arrPath = [];
}

// 윈도우를 실행하면 초기화를 한다.

button1_click()

function button1_click() {
    init();

    var strPath  = "https://via.placeholder.com/400x300/a5b9e6/000000/?text=Temporary+Image,";
        strPath += "https://via.placeholder.com/500x300/a5b9e6/000000/?text=Temporary+Image,";
        strPath += "https://via.placeholder.com/300x200/a5b9e6/000000/?text=Temporary+Image,";
        strPath += "https://via.placeholder.com/300x500/a5b9e6/000000/?text=Temporary+Image,";
        strPath += "https://via.placeholder.com/350x170/a5b9e6/000000/?text=Temporary+Image,";
        strPath += "https://via.placeholder.com/300x300/a5b9e6/000000/?text=Temporary+Image";

    var strIndex = "1,2,3,4,5,6";
    setNavImage(strPath, strIndex); 
    showSlides(slideIndex);
}
// strPath : 이미지 주소
// strIndex: 이미지 번호
// 값을 담아서 setNavImage와 showSlides에 전송해준다

setNavImage()


function setNavImage(strPath, strIndex) { 
    var aPath = strPath.split(','); 
    arrPath = aPath; 

    var aIndex = strIndex.split(','); 

    var tagStr = ""; 

    totalLen = aPath.length;
    for (var i = 0; i < totalLen; i++) {
        tagStr += '<div class="columnex"> <img class="demo " src="' + aPath[i] + '" onclick="currentSlide(' + aIndex[i] + ')"> </div>\n';
    }

    var navImg = document.getElementById("NavImg");
    navImg.innerHTML = tagStr; 
}
// split을 사용해 strPath, strIndex를 ','을 기준으로 짤라서 배열로 보관한다.
// for문을 사용해서 이미지 주소가 끝날때까지 html을 생성하여 tagStr에 담는다.
// 서브 이미지 HTML을 구현한 뒤 tagStr에 저장하고 .innerHTML을 사용해서 삽입한다.

showSlides();

function showSlides(n) { 
    var dots = document.getElementsByClassName("demo");

    for (var i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", ""); 
    }

    dots[slideIndex - 1].className += " active"; 

    x = dots[slideIndex - 1].src    
    document.getElementById("MainIMG").src = x;                
}
// demo 이미지를 찾아 dots에 보관하고 값에 따라 active 스타일 값을 조정한다.
// 활성화 되어있는 이미지 src를 메인 이미지로 넘겨준다

plusSlides()

function plusSlides(n) { 
    if (n > 0) {
        slideIndex += 1;
        if (slideIndex > totalLen) {
            slideIndex = 1;
        }
    } else {
        slideIndex -= 1;
        if (slideIndex < 1) {
            slideIndex = totalLen;
        }
    }

    showSlides(slideIndex);

    if (n > 0) {
        var _scrollX = $('.row').scrollLeft();
        $('.row').scrollLeft(_scrollX + moveDistance);
    } else {
        var _scrollX = $('.row').scrollLeft();
        $('.row').scrollLeft(_scrollX - moveDistance);
    }
}
// prev, next 버튼을 눌렀을때 slideIndex값을 계산하여 showSlides에게 넘겨준다.
// 버튼에 따라서 스크롤바를 조정해준다

currentSlide()

function currentSlide(n) { 
    slideIndex = n;
    showSlides(slideIndex); 
}
//서브 이미지를 클릭했을때 slideIndex값을 지정해준다.

CSS


    /* 이미지 컨테이너를 배치합니다(왼쪽 및 오른쪽 화살표를 배치하는 데 필요). */
    .container_img {
        position: relative;
        padding:  20px;
        border: 1px solid #000;
        background-color: #f0f0f0;
        width: 488px; 
        height: 422px;

    }

    /* 기본적으로 이미지 숨기기 */
    .mySlide {
        display: none;
        background-color: rgb(255, 255, 255);
        text-align : center;
        overflow: hidden;
        height: 293px;
        width: 486px;
        margin-bottom: 20px;
    }

    .mainimg{
        width: 100%;
        height: 100%;
        object-fit: contain; 
    }


    /* 다음 및 이전 버튼 */
    .prev,
    .next {
        cursor: pointer;
        position: absolute;
        top: 29%;
        width: 48px; 
        font-weight: bold; 
        font-size: 50px; 
    }

    /* '다음 버튼'을 오른쪽에 배치합니다*/
    .next {
        right: 0;
        border-radius: 3px 0 0 3px;
    }

    /* 호버 위에 검은색 배경색 추가 */
    .prev:hover,
    .next:hover {
        color: rgba(0, 0, 0, 0.8);
    }
    .row{ 
        width: 486px;
        height: 109px;
        object-fit: contain;
        overflow-y: hidden; 
        display: flex; 
        flex-direction: row; 
        flex-wrap: nowrap; 
        background-color: white;
    }

    .row:after {
        content: "";
        display: table;
        clear: both;
    }

    .column {
        float: left;
        width: 100px; 
    }

    .column img{
        width: 100px;
        height: 100px;
        object-fit: contain;
        background: rgb(255, 255, 255);
    }

    /* Thumnbail 이미지에 투명 효과 추가 */
    .demo {
        width: 100px;
        height: 100px;
        object-fit: contain;
        background: rgb(255, 255, 255);
        opacity: 0.4;
        cursor: pointer;
    }

    .active,
    .demo:hover {
        opacity: 1; 
    }


    ::-webkit-scrollbar {
        height:  8px;
    } 

    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 2px grey; 
    }  
    ::-webkit-scrollbar-thumb {
        background: #A2CAD8; 
    } 

    .button_b{
        width: 70px;
        height: 30px;
        background-color: aliceblue;
        color: #1a5663;
        position: relative;
        border: none;
        display: inline-block; 
        font-family: "paybooc-Light", sans-serif; 
        text-decoration: none;
        font-weight: 600; 
        margin: 5px;
        border: 3px solid #ff5f2eaf;

    }

- 끝 -

]]> <![CDATA[Slideshow Gallery 1]]> https://velog.io/@lucy_leee/Slideshow-Gallery https://velog.io/@lucy_leee/Slideshow-Gallery Mon, 28 Mar 2022 04:30:40 GMT

기본 소스: https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp

w3schools에서 지원해주는 Slideshow Gallery를 사용하려고 했지만 코드가 뭔가 맘에 안들기도 하고, 기능적인 부분에서 추가할 사항이 있어서 코드 분석을 시작했다.

예제는 mySlides, column에 각각 이미지를 넣어주고 JS로 순서를 맞춰 띄워주는 방식이었지만 나는 조금 더 효율적인 방법으로 코드를 개선하고 싶었다.

HTML

JS로 처리하면 이미지 경로는 한번만 지정해주고 column에서 결정된 src 주소만 mySlides로 보내주면 끝 아닌감..?

JAVASCRIPT

plusSlides()

var slideIndex = 1;                                                    
showSlides(slideIndex);

function plusSlides(n) {                                   
    showSlides(slideIndex += n); 
    if(n>0){
        var _scrollX = $('.row').scrollLeft();
        $('.row').scrollLeft(_scrollX + 80);  
    }else{
        var _scrollX = $('.row').scrollLeft();
        $('.row').scrollLeft(_scrollX - 80);   
    }
}

prev, next 버튼을 누르면 plusSlides 함수가 onclick으로 호출된다. plusSlides()는 버튼을 눌렀을 때 slideIndex에 (+1), (-1) 계산해 주는 함수이다. 나는 여기에 버튼을 누를 때마다 스크롤을 움직일 수 있게 scrollLeft를 사용하여 코드를 추가해 주었다.

currentSlide()

function currentSlide(n) {
    showSlides(slideIndex = n);
}

만약 사용자가 버튼이 아닌 하단에 있는 썸네일 이미지를 누른다면 currentSlide 함수가 onclick으로 인하여 호출되고, 그 안에는 이미지 번호가 들어있다. 이미지 번호를 바로 slideIndex로 넣어주어 계산한다.

showSlides()

function showSlides(n) {
    var i;
    var x;
    var slides = document.getElementsByClassName("mySlides"); 
    var dots = document.getElementsByClassName("demo");

    if(n > dots.length){
        slideIndex = 1;
    }else if(n < 1){
        slideIndex = dots.length;
    } 

    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", ""); 
    }  

    dots[slideIndex - 1].className += " active";                     
    x = dots[slideIndex - 1].src    
    document.getElementById("myimg").src = x;                                           
}

slides는 mySlides(메인 이미지), dots는 demo(섬네일 이미지), x는 src(mainimg로 보내줄 주소)로 정의를 해준 뒤 만약 slideIndex가 슬라이더 길이보다 길면 처음으로 돌아가고, 슬라이더 길이보다 짧으면 끝으로 돌아갈 수 있게 처리해 주고, for 문을 통해 이전 썸네일 이미지에 있는 active 클래스를 지워준다.

또한 선택된 이미지 경로를 가지고 와서 x에 담아 둔 뒤, 그 경로를 메인 이미지로 전송해 준다.

그럼 HTML로 돌아와서 mySlides src 안에는 x가 들어있고, 만약 경로를 받지 못했을 때 onError를 사용해 임시 이미지를 생성해 준다.

CSS

.container_img {
        position: relative;
        padding:  20px;
        border: 1px solid #000;
        background-color: #f0f0f0;
        width: 488px;
        height: 422px; 
}

.mySlides {
        display: none;
        background-color: rgb(255, 255, 255);
        text-align : center;
        overflow: hidden;
        height: 293px;
        width: 486px;
        margin-bottom: 20px;
}

  .mainimg{
        width: 100%;
        height: 100%;
        object-fit: contain;
  }


.prev,
.next {
        cursor: pointer;
        position: absolute;
        top: 29%;
        width: 48px; 
        font-weight: bold; 
        font-size: 50px; 
}

.next {
        right: 0;
        border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
        color: rgba(0, 0, 0, 0.8);
}

.row{
        display: flex;
        flex-wrap: wrap;
        height: 109px;
        overflow-y: hidden;
        flex-direction: column;
}

.row:after {
        content: "";
        display: table;
        clear: both;
}

.column {
        float: left;
        width: 25%; 
}

.column img{
        width: 100%;
}

.demo {
        opacity: 0.5;
        cursor: pointer;
}

.active,
.demo:hover {
        opacity: 1;
        background-color: black;
}

- 끝 -

]]>