코린이[코딩 어린이]

로컬에서 CORS 에러가 발생하는 문제 해결방법입니다.

Access to script at 'file:///E:/~/12.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

위와 같은 에러 문구가 나왔습니다.

import & export를 html에서 사용하기 위해 <script type="module"></script>을 사용했는데 모듈은 HTTP를 통해서만 작동하므로 로컬 웹 서버를 사용해야 한다는 내용이었던 것 같습니다.

여러 선택 방법이 있던데 그중 노드 라이브 서버를 사용했습니다. ( 간단해서 사용했습니다. )

라이브 서버 바로가기

$ npm install -g live-server
$ live-server

먼저 live-server를 글로벌로 설치를 해주고, 디렉터리 파일에서 live-server를 실행해줍니다.

- 끝 -

다른방법

VS Code에서 라이브 서버 설치하기 바로가기

노드 정적 서버 설치하기 바로가기

Stack overflow에서 해결한 내용 ( 바로가기 )

테이블의 테두리를 설정하는 것은 기본적이면서도 중요한 요소 중 하나입니다. 일반적으로 HTML과 CSS를 사용해서 테이블의 테두리를 제어할 수 있습니다.

아래는 테이블 테두리를 설정하는 간단한 방법에 대한 내용입니다.

See the Pen Untitled by JunHyeok Noh (@JunHyeok-Noh) on CodePen.

위 예시처럼 border속성을 tr요소에 테두리를 추가하고 있습니다. border-collapse속성은 인접한 테두리를 병합할지 여부를 제어합니다.

table태그는 특이하게 border속성만 추가하면 보이지 않고 border-collapse속성과 함께 사용해야 tr요소에 테두리를 추가 할 수 있습니다.

CSS3에서 리스트에서 특정 리스트만 색을 주지 않거나, 밑줄을 빼고 싶을때 사용합니다.

선택자 :not() 사용법

:not() 선택자는 ()안에 선택자를 제외한 나머지에게 일괄적으로 적용시킨다는 의미입니다.

HTML

<ul>
  <li>1번입니다.</li>
  <li>2번입니다.</li>
  <li class="work">3번입니다.</li>
  <li>4번입니다.</li>
  <li>5번입니다.</li>
  <li>6번입니다.</li>
</ul>

CSS

li {
  list-style: none;
}
li:not(.work) {
  color: green;
}
li:not(:first-child) {
  border-bottom: 1px solid #ddd;
}
li:not(:last-child) {
  font-weight: bold;
  font-size: 1.2rem;
}
li:not(:nth-child(4)) {
  font-style: italic;
}

위 코드에 li태그들을 살펴보면 하나의 태그만 제외하고 나머지에는 모두 CSS적용이 된 것을 확인 할 수 있습니다.

클래스로 적용시키기

li:not(.work) { color: green; } // .work 클래스를 제외한 나머지 <li></li>태그에 컬러를 초록색으로 바꿔줍니다.

첫번째 li만 빼고 적용시키기

li:not(:first-child) { border-bottom: 1px solid #DDD; } // 첫번째 <li></li>태그만 빼고 아래 선을 추가해줍니다.

마지막 li만 빼고 적용시키기

li:not(:last-child) { font-weight: bold; font-size: 1.2rem; } // 마지막 <li></li>태그만 빼고 글씨를 굵게, 글씨 크기를 1.2rem으로 늘려줍니다.

특정 순서에 있는 li만 빼고 적용시키기

li:not(:nth-child(4)) { font-style: italic; } // 4번째 <li></li>태그만 빼고 기울임을 추가해줍니다.

이외에도 가상선택자 ( ::before, ::after )에도 사용이 가능합니다.

li:not(:first-child)::before { content: "#"; } // 첫번째 <li></li>태그만 빼고 #을 추가해줍니다.

이렇게 :not()선택자 하나만으로 여러가지 가능성을 발견 할 수 있었습니다.

select option을 사용할 때 Down 화살표를 제거하는 방법입니다.

/* 익스플로러 */
select::-ms-expand {
    display: none;
}

/* 기본 */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

<input type="number" />를 사용할 때 Up / Down 화살표를 제거하는 방법입니다.

/* 크롬, 사파리, 엣지, 오페라 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 파이어폭스 */
input[type=number] {
    -moz-appearance: textfield;
}

가로 스크롤 만드는 도중에 스크롤바 모양이 나와서 지져분해 보이는 현상이 있었습니다.

그래서 가로 스크롤을 제거하기 위해 사용한 내용입니다.

_reset.css

ul {
    -ms-overflow-style: none; /* IE, Edge를 위한 내용입니다. */
    scrollbar-width: none; /* FireFox를 위한 내용입니다. */
}

ul::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera를 위한 내용입니다. */
}

저는 ul 한곳에서만 없애기 위해 이렇게 작성을 했지만 SCSS에서는 아래처럼 적용을 하거나 변수명을 준다음 따로따로 주는 방법도 있습니다.

_reset.scss

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 {
	// 스크롤바 제거
	-ms-overflow-style: none;
	scrollbar-width: none;
	&::-webkit-scrollbar {
		display: none;
	}
}

noopener ( 노오프너 ), noreferrer ( 노리퍼러 ) 란?

HTML코드를 작성할 때 <a href="~~" target="_blank">이동</a>같은 내용을 작성하는 경우가 있습니다.

여기서 target="_blank"를 사용하면 보안상 취약점이 생기며, 퍼포먼스가 떨어질 우려가 있습니다.

target="_blank"의 문제점

• 보안상 취약점이 생깁니다.
  target="_blank"가 사용된 링크를 사용자가 클릭하면 새로운 탭에서 페이지가 생성됩니다. 그런데 noopener 속성을 사용하지 않고 사용을 하게되면 연결중인 페이지는 연결 페이지에 부분적으로 액세스가 가능하게 됩니다.
  target="_blank"로 이동을 한 후, window.opener를 console창에 입력해보면 객체가 존재하는 모습을 확인할 수 있습니다. 해당 부분은 연결 페이지에서 이전 페이지를 제어할 수 있는 권한이 있다는 것입니다. 최악의 경우 window.opener 객체를 활용해서 악의적인 동작을 일으킬 수 있습니다.
• 퍼포먼스가 떨어질 수 있습니다.
  target="_blank"가 사용된 링크에 의해 열린 페이지와 같은 프로세스를 통해 실행됩니다. 그렇기 때문에 링크된 페이지에서 높은 부하를 유발하는 JS가 실행되고 있으면 링크를 건 페이지에도 영향이 미쳐 의도하지 않게 퍼포먼스가 떨어질 수 있습니다.

target="_blank"의 문제해결 방법

• noopener
  noopener를 지정하면, 링크된 페이지에서 window.opener를 사용해서 링크를 건 페이지를 참조할 수 없게 됩니다. 또한 링크된 페이지와 링크를 건 페이지는 별개의 프로세스로 취급되기 때문에 서로 연결되어 퍼포먼스가 떨어지지도 않게 됩니다.
• noreferrer
  noreferrer를 지정하면, 다른 페이지로 이동할 때 링크를 건 페이지의 주소 등의 정보를 브라우저가 HTTP Header Referrer로서 송신하지 않습니다.

noopener, noreferrer 사용하기

<a href="https://www.naver.com" target="_blank" rel="noopener noreferrer">이동</a>

사용하기 어렵지 않기 때문에 꼭 사용해야 하는 경우가 오면 넣어주도록 합시다

HTML

<div class="box_wrap">
    <div class="box__">안녕하세요.</div>
</div>

<div class="box__">안녕하세요.</div>

CSS

.box_wrap {
    position: relative;
    width: 150px;
    height: 150px;
    background: #DDD;
}
.box_wrap:hover .box__ {
    opacity: 1;
}
.box__ {
    opacity: 0;
}

위처럼 box_wrap 내부에 마우스를 가져다대면 안쪽에 있는 box__ 내부에 텍스트가 불투명 상태가 됩니다. 바깥에 있는 box__는 box_wrap 내부에 포함되지 않기 때문에 불투명 상태가 되지 않습니다.

특수코드표입니다.

HTML

<div class="card">
    <div class="card_img">
        <img src="image" alt="이미지" />
    </div>
    <div class="card_info">
        <div class="card_title">title</div>
        <div class="card_contents">contents</div>
        <div class="card_nick">nick</div>
    </div>
</div>

SCSS

.card {
    .card_img {
        position: relative;
        width: 50%;
        &::after {
            content: '';
            display: block;
            padding-bottom: 100%;
        }
        > img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            padding: .5rem
        }
    }
}

.card_img : 감싸주는 div의 크기를 설정해주고, 부모 포지션을 설정해줍니다.

::after : 가상요소를 만들어주고 content: '', display: block, padding-bottom: 100%를 설정해줍니다.

위처럼 해주면 정사각형이 만들어집니다.

이후 내부에 이미지등을 추가시켜주려면 아래에 내용을 더 추가해주면 됩니다.

img : 자식 포지션을 설정해주고, 크기를 꽉차게 해주기 위해서 크기 설정을 해줍니다.