한줄 지식

한줄로 끝나는 지식들을 잠시 모아둔다. 추후에 더 많은 내용을 알게된다면 글로도 쓸 수 있는 내용들이다.

시멘틱(Semantics) - MDN

프로그래밍에서 시맨틱은 코드 조각의 의미를 나타낸다.

예를 들어 "이게 어떻게 시각적으로 보여질까?"보다 "이 Javascript 라인을 실행하는 것은 어떤 효과가 있는가?", 혹은 "이 HTML 엘리먼트가 가진 목적이나 역할은 무엇인가?"

HTML은 채워질 데이터를 나타내도록 코딩해야합니다. 기본 프리젠테이션 스타일기반이 아니라요. 프레젠테이션(어떻게 보여져야만 하는가)은 CSS만의 단독 역할입니다.

의미론적인 마크업을 사용하면 아래와 같은 이점이 있다:

• 검색 엔진은 의미론적 마크업을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다(SEO 참조).

• 시각 장애가 있는 사용자가 화면 판독기(스크린리더)로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있다.

• 의미없는 클래스 이름이 붙여져있거나 그렇지 않은 끊임없는 div들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽다.

• 개발자에게 태그 안에 채워질 데이터 유형을 제안한다

• 의미있는 이름짓기(Semantic naming)는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기(namimg)를 반영합니다.

사용할 마크업에 접근할 때 스스로에게 물어보세요. "내가 채울 데이터를 가장 잘 설명하고 나타내는 요소는 무엇일까?" 예를 들어, 그 데이터는 정렬된 목록입니까? 정렬되지 않은 목록입니까?, 관련된 정보가 제외된 섹션이 있는 아티클(article)입니까?, 정의의 나열입니까?, 캡션이 필요한 그림 또는 이미지입니까?, 사이트 전체 머리글(header) 및 바닥글(footer) 외에 또 다른 머리글과 바닥글이 있어야합니까? 등등

.someclass { cursor: pointer } vs someclass:hover { cursor: pointer } 차이

실질적인 차이는 없고, 작은 성능의 차이만 있을 수 있다.

• :hover를 사용하면 약간의 성능 저하가 있을 수 있다. 이는 :hover 상태 가 DOM을 통해 위쪽으로 전파되는 반면 cursor: pointer 속성은 자식 요소에 의해 상속되기 때문이다.

• 여기서 핵심은 브라우저가 :hover 상태를 관리해야 하지만, 로드시 cursor: pointer 속성만 초기화하면 된다는 것이다.

하지만 이 성능의 차이는 정말 미미하기 때문에, 성능보다는 스타일의 가독성이 .someclass {cursor : pointer}가 더 좋기 때문에 이렇게 작성하는 편이 더 낫다.

void tag

대부분의 HTML 요소들은 여는 태그와 닫는 태그를 가지고 있다. 하지만, 일부 태그의 경우 내용이 없기 때문에 "self-closing"이 가능한 태그들이 존재하는데 이것을 void tag 라고 한다. (참고)

<!-- void tag 종류 -->
area, base, br, col, embed, hr, img, input,
link, meta, param, source, track, and wbr.

Open and Close 위젯 쉽게 만들기

details 태그와 summary를 이용하면 쉽게 만들 수 있다.

<details>
  <summary>제이콥은?</summary>
  <p>
    트와일라잇에 나오는 제이콥입니다.
  </p>
</details>

details에 open 속성을 준다면, 기본적으로 내용이 표시된다.

summary::-webkit-details-marker { display: none; } 삼각형 마커에 대한 커스텀을 위해 참고용으로 남겨둔다.

자주 까먹는 flex

flex: grow shrink basis

• flex-grow - 다른 flex 아이템과 관련하여 여유 공간이 있을때 flex 아이템이 커질 수 있는 양이다.

• flex-shrink - 사용 가능한 공간이 충분하지 않을 때, 다른 flex 아이템과 비교하여 flex 아이템이 축소될 수 있는 양이다.

• flex-basis - flex 아이템의 크기가 조정되는 기본 크기이다.

attribute selector

넓은 범위

긍정

img[alt] {
  border: 1px solid #333;
}

부정

img:not([alt]),
img[alt=""] {
  border: 1px solid #ff0000;
}

속성이 있는 모든 엘리먼트 선택

[alt] {
  border: 1px solid #red;
}

좁은 범위

정확히 일치

img[alt="jacob"] {
  border: 10px solid yellow;
}

beginning start

img[alt^="jacob"] {
  border: 10px solid yellow;
}

beginning with

img[alt*="jacob"] {
  border: 10px solid yellow;
}

beginning end

img[alt$="jacob"] {
  border: 10px solid yellow;
}

다중

[data-name="jacob"][data-age="30"] {
  border: 10px solid yellow;
}

empty selector

동적으로 UI를 그릴때, 내용이 없는 경우에 유용. 단 공백도 내용으로 인식한다는 점을 유의(주석은 있어도 empty로 인식이 가능하다).

// <div class="card"></div>

.card:empty {
  display: none;
}

CSS 변수

의사 클래스를 이용하여 루트에 사용자 정의 속성을 등록하고, 하위에서 var() 표기법을 통해 사용할 수 있다.

:root {
  --Red700: #ff0000;
}

.error-text {
  color: var(--Red700);
}

조건부 규칙

이렇게 할 수는 있으나 다음 tab을 보세요

@supports (display: grid) {
  .item {
    display: inline-grid;
  }
}
@supports not (display: grid) {
  .item {
    display: inline-flex;
  }
}

Best

@supports를 지원한다면 앞에 tab처럼 구현해도 상관없으나, 저 기능을 지원하지 않는 브라우저라면 아무런 스타일이 적용되지 않는다는 단점이 있다.

따라서 아래와 같이 기본 스타일은 먼저 선언하고, 그 아래에 @supports를 이용한 선언을 추가하는 것이 좋다.

.item {
  display: inline-flex;
}
@supports (display: grid) {
  .item {
    display: inline-grid;
  }
}

And 조건

@supports ((display: flex) and (pointer: fine)) {
  .item {
    background-color: #ff0000;
  }
}

Or 조건

@supports ((display: flex) or (pointer: fine)) {
  .item {
    background-color: #ff0000;
  }
}

특정 기기별 스타일 타켓팅하는 법

/* 스마트폰, 터치 스크린 */
@media (hover: none) and (pointer: coarse) {
  /* ... */
}
/* 스타일러스 기반 스크린 */
@media (hover: none) and (pointer: fine) {
  /* ... */
}
/* 닌텐도 윌 컨트롤러, 마이크로소프트 Kinect */
@media (hover: hover) and (pointer: coarse) {
  /* ... */
}
/* 마우스와 터치 패드 */
@media (hover: hover) and (pointer: fine) {
  /* ... */
}

텍스트 그림자

오른쪽 / 아래 / 퍼짐의 양(생략 가능) / 색상

.text {
  text-shadow: 2px 2px 1px #808080;
}

왼쪽 / 위 / 퍼짐의 양(생략 가능) / 색상

.text {
  text-shadow: -2px -2px 1px #808080;
}

고해상도 배경 이미지

.bg {
  background-image: url("bg.jpg");
}
@media (min-resolution: 1.5dppx) {
  .bg {
    background-image: url("bg@1_5x.jpg");
  }
}
@media (min-resolution: 2dppx) {
  // 2배 해상도
  .bg {
    background-image: url("[e-mail]");
  }
}

img tag vs css background-image

사실 가장 간단한 대답은, 내가 선택한 이미지가 콘텐츠의 일부인지 디자인의 일부인지를 확인하면 되는 것이다.

이럴때는 img tag!

• page 인쇄시 기본적으로 배경 이미지를 포함하고 싶을 때 사용한다.

• 경고 아이콘 처럼 이미지가 중요한 의미인 경우 img 태그를 사용하여, 스크린 리더에게 이미지의 의미를 전달할 수 있다(with alt text).

• img가 콘텐츠의 일부인 경우(with alt text)

• 텍스트 크기에 비례하여 이미지를 렌더링하기 위해 브라우저 크기 조정에 의존하는 경우

• 배경에서 background-image를 사용하는 것보다 img 태그를 사용하면 애니메이션 성능을 크게 높일 수 있다.

이럴때는 background-image!

• 이미지가 콘텐츠의 일부가 아닌 경우

• 텍스트 요소의 이미지 대체를 하는 경우

• page 인쇄시 기본적으로 배경 이미지를 포함하고 싶지 않을 경우

• css sprites 같이 다운로드 시간을 개선해야 하는 경우

• css sprites 같이 이미지의 일부만 표시해야 하는 경우

• 전체 창을 채우도록 배경 이미지를 늘리는 경우(background-image + background-size: cover)

script 태그를 본문의 마지막에 넣는 이유

HTML을 읽는 과정 중간에 스크립트를 만나면, 스크립트 로드와 실행을 위해 중단점이 생기고 그만큼 화면에 표시되는 것이 지연되게 된다. 또한 HTML 파싱이 끝나고 DOM 트리가 생기기 전에 자바스크립트가 실행되어 DOM 조작을 할 경우 에러가 발생할 수 있다.

여기에는 3가지 대안이 있다.

<body>
  <form>
    <!-- form -->
  </form>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>

• 기존에 해왔듯이 본문의 맨 마지막에 스크립트 태그를 작성한다. (이 방법은 HTML이 현저하게 긴 경우에는 눈에 띄게 지연될 수도 있다.)

• script태그에 async 속성을 추가한다. (스크립트 태그를 중간에 만나도 HTML 파싱이 중단되지 않고 스크립트 로드와 HTML 파싱이 함께 비동기적으로 동시에 실행된다. 그리고 스크립트가 로도되고 실행되는 시점에만 HTML 파싱을 막고 실행이 끝나면 HTML 파싱이 재개된다.)

• script태그에 defer 속성을 추가한다. (스크립트 태그를 중간에 만나도 HTML 파싱이 중단되지 않고 스크립트 로드와 HTML 파싱이 함께 비동기적으로 동시에 실행된다. 그리고 HTML 파싱이 모두 끝난 후에 스크립트가 실행된다.)

script defer

• defer의 경우 상대적 순서를 유지한다는 점도 추가로 있다. 브라우저는 페이지에서 스크립트를 검색하고 병렬로 다운로드하여 성능을 향상시킨다. 여러 스크립트가 있으며 defer를 사용했다면 뒤에 스크립트가 먼저 로드되더라도 내가 사용한 순서에 따라 스크립트가 실행된다.

• 따라서 스크립트간 의존성이 있는 경우 defer를 사용하면 더 좋다.

• defer는 외부 스크립트를 위한 속성으로, src 속성이 있는 스크립트 태그에서는 무시된다.

script async

• 완전히 독립적인 스크립트 일때 주로 사용한다.

• 작성 순서에 따라 실행되던 defer와 달리, async는 로드 순서에 따라 스크립트가 실행된다.

• async는 외부 스크립트를 위한 속성으로, src 속성이 있는 스크립트 태그에서는 무시된다. (defer와 동일)

• e.g. Google Analytics, 카운터, 광고

파일을 업로드 하고 싶다면?

• <input type="file" /> 요소를 추가하고, 여러 파일을 업로드 하고 싶다면 multiple 속성을 추가한다.

• <form method="post"> 태그에 enctype 속성을 multipart/form-data로 설정해야 한다.(기본값: application/x-www-form-urlencoded)