https://guiyomi.tistory.com/101

 

Javascript - script 로딩 시 async vs defer

HTML 파일에서 외부 js 파일을 가져오는 방법은 다음과 같다. 그럼 여기서 궁금한 점이 발생한다. script 태그의 위치는 어디에 위치해야 할까? 보통 브라우저는 HTML 문서를 파싱할 때, 위에서부터

guiyomi.tistory.com

 

<style> 요소는 문서의 <head> 안에 위치해야 합니다. 그러나, 일반적으로 스타일은 외부 스타일 시트에 작성하고, <link> 요소로 연결하는 편이 좋습니다.

문서가 다수의 <style>과 <link> 요소를 포함하면 서로의 순서대로 DOM에 스타일을 적용합니다. 따라서 예상치 못한 종속 문제를 피하려면 올바른 순서를 따라 <style> 및 <link> 요소를 배치해야 합니다.

 검색하기 위해서는 F12 개발자도구가 켜진 상태에서 (윈도우) Ctrl + Shift + F  (맥) Command + Option + F 를 누릅니다. 그러면 하단 Console 탭 옆에 "Search"가 생기고 검색할 수 있는 인풋 박스가 나타납니다

여기서 원하는거 검색하면끝~ 

Path

Path 는 아마 SVG에서 사용할 수 있는 가장 일반적인 형태일 것이다. path 요소를 사용해서 당신은 사각형(둥근 모서리가 있거나 없는), 원, 타원, 폴리라인 및 다각형을 그릴 수 있다. 기본적으로 다른 모든 종류의 모양, 베지에 곡선, 2차원 곡선 등이 가능하다. 그러한 이유로, paths 는 튜토리얼의 the next section 에 들어가지만, 지금은 모양을 제어하는 데 사용되는 단일 속성이 있음을 알려주겠다.

<path d="M 20 230 Q 40 205, 50 230 T 90230"/>

패스의 모양은 d 속성 하나로 정의된다(basic shapes 참조). "d" 속성은 여러 개의 명령어와 그 파라미터들로 이루어진다.

각각 명령은 특정 알파벳으로 시작한다. 예를 들면 현재 그려지는 위치를 XY 좌표계의 (10, 10)으로 이동할 때 "Move To" 명령을 사용하게 되는데, 이 명령은 알파벳 M으로 호출한다. SVG 처리기가 이 문자를 읽게 되면 다른 위치로 이동하라는 명령으로 이해하게 된다. 즉, (10, 10)으로 이동하려면 명령어 "M 10 10"을 쓰면 된다. 이후에 처리기는 다음 명령어를 읽기 시작한다.

한국어 -- ko 

일본 -- ja 

영어 -- en

중국어 -- zh-cn

  • elements에서는 HTML(왼쪽)과 CSS(오른쪽) 구조를 확인, 수정, 테스트가 가능하다.
  • CSS인 style 목록 순서는 CSS 파일의 우선 순위에 따라 정해지게 된다.
  • 오른쪽을 자세히 살펴보면 스타일 속성이 밑줄 표시로 그어진 스타일들이 있다. 속성을 적용했지만 중복된다면 우선 순위에 따라 스타일이 적용되므로 반영되지 않는 스타일 속성이다.

// 줄바꿈 제거  str.replace(/\n/g, "");

// 엔터 제거 str.replace(/\r/g, "");

// 공백 제거 str.replace(/\s*/g, "");

// 개행문자 모두 제거 str.replace(/\n|\r|\s*/g, "");

null 병합 연산자(??)는 왼쪽 값이 null 혹은 undefined 인경우 오른쪽 값을 반환하는 연산자입니다.

언뜻 보면 OR 연산자의 단축 평가와 매우 유사하지만 두 연산자에는 중요한 차이점이 있습니다.

 

우선 왼쪽값이 null 혹은 undefined의 경우 OR 연산자와 똑같이 동작합니다.

console.log(null || 100)
console.log(null ?? 100)

console.log(undefined || 200)
console.log(undefined ?? 200)
100
100
200
200

 

하지만 null과 undefined를 제외한 false로 평가되는 모든 값의 경우 OR 연산자는 오른쪽 값을 반환하지만 

null 병합 연산자의 경우 왼쪽값을 반환하게 됩니다.

console.log(0 || 100)
console.log(0 ?? 100)

console.log(false || 200)
console.log(false ?? 200)

console.log("" || 200)
console.log("" ?? 200) // 빈 문자열이라 출력 결과가 없음
100
0
200
false
200

 

따라서 null 과 undefined만 체크하고 싶은 경우 null 병합 연산자를 사용하면되고 

false로 평가되는 모든값을 체크하고 싶은 경우 OR 연산자를 사용하면 될 것 같습니다.

+ Recent posts

티스토리툴바