html, js , css

- @import

@import CSS @규칙은 다른 스타일 시트에서 스타일 규칙을 가져올 때 쓰입니다. 이 규칙은 @charset 규칙을 제외하고 모든 다른 종류의 규칙보다 선행해야 합니다. 

 

- #HTML 문서를 작성하면서 HTML 문서의 디자인을 담당할 스타일시트(CSS) 파일을 로드 하는 방법은 link 태그를 사용하는 방법과 @import 를 사용하는 방법 등 두가지가 있습니다.

사실 HTML 문서 내부에 자체적으로 style 을 정의해 사용할 수 있지만, 관리적인 측면에서 아무래도 #CSS 파일을 외부에 따로 로드 하는 방법이 좋습니다. 아래는 HTML 문서 외부에 존재하는 CSS 파일을 로드하는 방법입니다.

 

-@import vs Link 방식 

1. import

병렬방식이 아닌 직렬방식으로 다운로드 하기때문에 전체 로딩시간이 길어지는 문제점이 있기에, 추천하는 방법은 아니다.

 

2. link 방식

직렬방식이 아닌 병렬방식으로 다운로드 하기에 로딩속도가 빠르고, CSS파일 여러개를 Link 방식으로 다운로드 하더라도 익스플로러에서 순서가 동일하게 작동한다.

 

-가상 클래스(pseudo-class)란

css 의사클래스, (가상 클래스) 는 선택자에 추가하는 키워드로,

선택한 요소가 특별한 상태여야 만족할수 있다.

즉 id 선택자나 class 선택자로 사용할 수 없는 요소들을 선택하는 선택자다.

가상 클래스는 요소의 속성 값, 상태, 상대적 위치 등을 이용하여 요소를 선택할 수 있다.

ex) :hover, :active, :nth-child(n)

 

-

:root 가상 클래스

웹 문서 구조에서 특정 위치에 있는 요소를 선택하는 가상 클래스이다.
:root 선택자는 웹 문서 구조에서 가장 상위 요소를 선택할 때 사용한다.

즉, html 에서 root는 항상 html을 가리킨다

그러나 html 보다 :root 가상 클래스의 스타일 적용 우선순위가 더 높다.

문서 전반적으로 재사용할 임의가 있는 값을 작성한다.

:root를 이용해 최상위 요소에 변수를 선언하면 모든 요소에서 이 변수를 사용할 수 있다.

:root를 사용하여 변수를 사용하게 되면 한 번에 요소 조작하는데 용이하다.

 

- preventDefault()? 

 Event 인터페이스의 preventDefault() 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정합니다

 

<a>태그나 <submit>과 같은 태그처럼 몇몇 태그는 특정 기능을 가지고 있다.

a태그는 href를 통해 특정 사이트로 이동하거나, submit태그는 값을 전송하면서 창이 새로고침(reload)된다.

이런 태그의 이벤트 기능을 preventDefault를 통하여 동작하지 않도록 막을 수 있다.

 

https://pewww.tistory.com/12   ( map, foreach) 

 

- 정규 표현식 

정규표현식의 사전적인 의미로는 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식 언어입니다. 주로 Programming Language나 Text Editor 등 에서 문자열의 검색과 치환을 위한 용도로 쓰이고 있습니다. 입력한 문자열에서 특정한 조건을 표현할 경우 일반적인 조건문으로는 다소 복잡할 수도 있지만, 정규표현식을 이용하면 매우 간단하게 표현 할 수 있습니다. 하지만 코드가 간단한 만큼 가독성이 떨어져서 표현식을 숙지하지 않으면 이해하기 힘들다는 단점도 가지고 있습니다

 

- <p>태그란 무엇인가?

- <p>...</p>는 paragraph(문단) 의 약자로, 하나의 문단을 만들 때 쓰인다.

 

- JSON은 JavaScript Object Notation의 약자로서 데이터를 문자열의 형태로 나타내기 위해서 사용됩니다. 

 

- classList , className 이란?

-> https://happygunja.tistory.com/321?category=976905 

JavaScript 입문 : className과 classList 사용법 - 기본문법

 

 

elem.className에 무언가를 대입하면 클래스 문자열 전체가 바뀝니다. 그런데 이렇게 속성값 전체를 바꾸는 게 아니고 클래스 하나만 추가하거나 제거하고 싶은 경우도 있기 마련입니다.

이럴 때 elem.classList라는 프로퍼티를 사용할 수 있습니다.

이렇게 클래스 속성값 전체를 바꾸고 싶을 때는 className으로, 개별 클래스를 조작하고 싶을 때는 classList를 사용하면 됩니다. 필요에 따라 취사선택하면 되죠.

요약

클래스를 관리할 수 있게 해주는 DOM 프로퍼티:

• className – 클래스 전체를 문자열 형태로 반환해주는 프로퍼티로 클래스 전체를 관리할 때 유용합니다.
• classList – 클래스 하나를 관리할 수 있게 해주는 메서드입니다. add/remove/toggle/contains가 구현된 객체를 반환합니다. 개별 클래스를 조작할 때 유용합니다.

 

https://ko.javascript.info/styles-and-classes

참조 

스타일과 클래스

- !important

-> css작성시 !important; "다른것보다 가장 최우선으로 적용해라 " 정도의 의미 

 

- 반응형 웹디자인의 기본이되는 CSS의 미디어 쿼리(Media Query) ? 

-> 미디어 쿼리는 CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용합니다. 다른 프로그래밍 언어의 if 조건문과 비슷한 개념이라고 생각하시면 이해가 쉬우실 겁니다.

@media 키워드로 시작하는 미디어 쿼리의 문법 구조는 아래와 같습니다.

@media (조건) {
  스타일
}

스타일 부분에는 일반적인 CSS 코드가 들어가는데, 조건 부분이 만족될 때는 스타일이 적용되고, 만족되지 않을 때는 스타일이 무시됩니다.

 

- flex? 

웹페이지의 레이아웃을 잡을 때 보통 display, float, position과 같은 css 속성들을 이용한다. 그런데 이러한 속성들로 레이아웃을 구현하는 게 몹시 복잡하거나 어려울 때가 있다. 그 한계를 극복하기 위해서 css3에 flex라는 방식이 새롭게 추가되었다. flexible box, flexbox라고도 부르는 flex는 레이아웃 배치 기능에 중점을 맞추어 고안되었기 때문에 기본 방식보다 훨씬 더 수월하게 퍼블리싱이 가능하다.

 

출처: https://heinafantasy.com/78 [디지털 노마드:티스토리]

 

 

- flex-grow

Item의 증가 너비 비율을 설정합니다.
숫자가 크면 더 많은 너비를 가집니다.
Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없습니다.

 

- flex-basis

Item의 (공간 배분 전) 기본 너비를 설정합니다.
값이 auto일 경우 width, height 등의 속성으로 Item의 너비를 설정할 수 있습니다.
하지만 단위 값이 주어질 경우 설정할 수 없습니다.

 

-

- grid-template-rows

명시적 행(Track)의 크기를 정의합니다.
동시에 라인(Line)의 이름도 정의할 수 있습니다.
fr(fraction, 공간 비율) 단위를 사용할 수 있습니다.
repeat() 함수를 사용할 수 있습니다.

 

https://heropy.blog/2019/08/17/css-grid/

CSS Grid 완벽 가이드

 

- http://www.tcpschool.com/javascript/js_dom_node 

코딩교육 티씨피스쿨

( 노드란?)

 

- ex)

const chess = [1, 1, 2, 2, 2, 8];

let answer = input.map((k, inden) => {

  return chess[inden] - k;

})

console.log(...answer)

에서 answer만 하면 [ ] 에 결과가나옴

 

- 

백슬래시(\)를 출력할 때는 백슬래시를 두 번(\\) 써야 출력 할 수 있다.

 

- console.log(input[0].split(' ')[0]) 도 가능