컨테이닝 블록 구분하기

카테고리 Daily

컨테이닝 블록

  • 요쇼의 크기, 위치를 결정하는 요인이다.
  • width, height, padding, margin 속성값과 절대적 위치(absolute, fixed)로 설정된 요소의 offset 속성값은 자신의 컨테이닝 블록으로부터 계산된다.
  • 대부분의 경우 요소의 컨테이닝 블록이 가장 가까운 블록 레벨 조상의 컨텐츠 영역이지만 예외가 있다.

컨테이닝 블록 식별

position의 속성에 따라 완전히 달라진다.

1. position 속성이 static, relative, sticky 인 경우

  • 컨테이닝 블록은 가장 가까운 조상 블록 컨테이너 또는 서식 맥락을 형성하는 조상 요소(flex,table,grid)의 컨텐츠 영역 경계를 따라 형성된다.

2. position 속성이 absolute 인 경우

  • 컨테이닝 블록은 속성값이 static이 아닌 가장 가까운 조상의 내부 여백 영역
  • 그래서 주로 조상 영역에 relative를 추가하여 조상을 기준으로 position을 조절한다.

3. position 속성이 fixed 인 경우

  • 컨테이닝 블록은 viewport, 페이지 영역이다.

예외

position 속성이 absolute, fixed 인 경우, 다음 조건을 만족하는 가장 가까운 조상 내부 영역이 컨테이닝 블록이 될 수 있다.

  1. transform이나 perspective 속성이 none이 아닐 때, transform 속성을 none으로 바꾸면 viewport 기준으로 바뀐다.

  2. will-change 속성이 transform이나 perspective 일 때, will-change는 요소의 예상되는 변화의 힌트를 브라우저에게 제공한다.

  3. filter 속성이 none이 아닐 때

  4. contain 속성이 paint 일 때

1
2
3
4
5
<body>
  <div class="container">
    <div class="p-absolute">1</div>
  </div>
</body>

컨테이닝 블록 예시

  • container 클래스에 아무런 값을 주지 않고 있어 p-absolute 값이 static이 아닌 조상 영역을 기준으로 위치하는데, static이 아닌 조상 요소가 없어서 최상위 브라우저를 기준으로 위치해있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
body {
  margin-top: 100px;
  margin-left: 100px;
}
.container {
  width: 500px;
  height: 500px;
  background: blue;
  position: relative;
  /*   transform: rotate(0deg); */
  /*   perspective:0; */
  /*   transform: rotate(0deg); */
  /*   perspective: 10px; */
  /*   will-change: perspective; */
  /*   will-change: transform; */
  /*   filter:opacity(); */
}
.p-absolute {
  width: 100px;
  height: 100px;
  background: yellow;
  position: absolute;
  top: 10px;
  left: 50px;
}

컨테이닝 블록 예시2

  • 앞서 설명한 예외를 추가하면 position:relative를 추가한 것과 똑같이 동작하게 된다.
  • 해당 속성을 가진 요소를 기준으로 위치를 조절한다.

댓글 공유

flex vs inline-flex

카테고리 Daily

flex vs inline-flex

  • flex로 지정된 flex container는 block 요소 성향
  • inline-flex로 지정된 inline-flex container는 inline 요소 성향

inline-flex

댓글 공유

hr 태그 사용하지 않고 가로선 스타일링 하기

카테고리 Daily

정의

hr 태그는 콘텐츠 내용에서 주제가 바뀔 때, 사용하는 수평 가로선이다.

HTML 문서에서 주로 내용을 구분하거나 주제의 변화를 정의한다

HTML5에서 변경된 사항

  • HTML5 이전에서는 단순히 가로선을 나타냈지만, HTML5에서는 주제의 흐름 변경을 나타내도록 변경되었다.
  • 시각적인 의미보다는 의미적 용어(semantic term)로 사용된다.

또한, HTML5에서는 hr 요소의 layout을 더 이상 지원하지 않으며 CSS를 대신 사용하도록 변경되었다.

CSS

1
2
3
4
5
6
7
8
9
.news::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  width: 80%;
  height: 1px;
  background: #aaa linear-gradient(to right, #aaa, #fff)
}
  • news라는 클래스의 가상 선택자로 css 스타일링 해줄 수 있다.

댓글 공유

텍스트 말줄임표 처리

카테고리 Daily

한줄이 길어서 말줄임표 (…) 처리 해주고 싶을 경우

1
2
3
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

멀티라인인 경우

1
2
3
4
5
6
7
.element {
  height: 3em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
  • Webkit 기반 브라우저 (Chrome, Safari 등)에서 적용 가능하다.

댓글 공유

웹 폰트 적용하기

카테고리 Daily

1. @import 방식으 CSS 최상단에 복붙

1
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.4/dist/web/static/pretendard.css");

2. font-family 설정

1
2
3
4
5
6
body {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto,
    "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic",
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-weight: 400;
}
  • font-family는 하나로 정해두고 굵기는 원하는 부분에서 font-weight로 조절한다.

댓글 공유

HTML이란?

카테고리 Daily

HTML5 역사

  • W3C가 XHTML 2.0을 만들고 있었는데 하위 호환상 문제가 있어서 개발을 접었다

  • 이후 2004년 브라우저 3대장(애플,모질라,오페라 sw)이 공동으로 설립한 WHATWG(Web Hypertext Application Technology Working Group)가 W3C와 별개로 Web Application 1.0과 Web Forms 2.0 만들어 냈다.

  • 그리하여 WHATWG의 표준안을 대부분 수용하여 HTML5가 탄생하게 되었다.

  • 초기의 웹은 단순히 하이퍼텍스트 문서(HTML)를 웹 브라우저에 나타내는 수준으로, 웹표준 기술이 지원하지 못하는 부분을 비표준적인 태그들과 Active X, Flash, Flex, SilverLight 등의 써드파티(Third Party) 플러그인이 대신하였다.

  • 이로 인해 여러 웹브라우저별로 화면이 다르게 보이거나 특정 웹브라우저에서만 동작하는 웹 애플리케이션이 만들어지는 등 각종 호환성 문제가 발생하였습니다. 그 결과 개발자에게는 개발의 어려움을, 사용자에게는 웹 브라우저 선택 제한과 각종 플러그인의 설치라는 불편함을 안겨주었다.

  • 이러한 문제점과 기능적인 한계를 안고 있던 기존 HTML은 HTML5에서 새롭게 추가된 요소와 다양한 API들을 통해 한 단계 발전된 웹 구현과 접근성 및 호환성 극대화를 목표로 삼게 되었다.

XHTML과 HTML 차이점

둘다 표준이지만 문법이 다르다. XHTML이 조금 더 엄격한 특징을 가진다.

XHTML은 XML로 재구성된 문법이다.

HTML XHTML
DOCTYPE 반드시 명시
<html> 태그의 xmlns 속성 반드시 명시
<img> <img />
대소문자 구분 x 태그는 반드시 소문자 사용
반드시 하나의 root 요소를 포함해야 한다.
속성 이름도 반드시 소문자 사용
속성값 반드시 따옴표로 감싼다
속성값 생략 가능 <input checked> 속성값 생략 불가 <input checked = “check” />
<img> 태그에 alt 반드시 명시
텍스트는 반드시 태그로 감싸야한다.

댓글 공유

원하는 요소를 제외한 영역 클릭 시 함수 실행하기

카테고리 Daily

흔히 웹을 사용하면서 select 태그를 클릭해서 options 들이 나타났을 때, select 태그 내부의 option을 클릭하면 해당 option이 선택되고, option 외부를 클릭했을 때, 나타났던 option들이 사라지도록 구현된 웹을 많이 경험했을 것이다.

나도 그래프를 CustomLegend의 요소를 클릭했을 때, 클릭한 Legend의 Line 그래프를 highlight 시켜주고, CustomLegend 내부의 요소 이외의 영역을 클릭했을 때, 클릭한 요소를 해제하도록 구현해보았다.

1. 선택된 그래프의 x축 값을 상태로 관리한다.

1
const [clickedGraph, setClickedGraph] = useState("");

2. CustomLegend에 이벤트 위임을 해준다.

1
2
3
4
5
6
7
8
9
const CustomLegend = () => {
  return (
    <ul id="CUSTOM_LEGEND">
      {payload.map((elem) => (
        <li key={elem.name}>{elem.value}</li>
      ))}
    </ul>
  );
};
  • CustomLegend의 ul 태그에 id를 부여한다.
  • li 요소를 클릭 이벤트를 이벤트 위임을 통해 이벤트 발생을 캐치할 수 있다.

3. 이벤트 핸들러 생성

1
2
3
4
5
6
7
8
9
10
11
12
const handleClickGraph = (e: any) => {
  const value = e.target.innerHTML;
  setClickedGraph(value);
};

const handleClickOutside = (e: any) => {
  const parentElem = e.target as HTMLElement;

  if (!targetElem.closest("#CUSTOM_LEGEND")) {
    setClickedGraph("");
  }
};
  • 클릭이벤트가 발생한 요소의 가장 가까운 요소 중 id가 CUSTOM_LEGEND인 요소가 없으면 clickedGraph의 값을 빈 값으로 초기화 시킨다.

4. 브라우저에 이벤트 등록

1
2
3
4
5
6
7
useEffect(() => {
  document.addEventListener("click", handleClickOutside);

  return () => {
    document.removeEventListener("click", handleClickOutside);
  };
});
  • 내가 지정한 영역은 ul 태그 안이고 내가 지정하지 않은 외부의 영역을 모두 다루기 위해서는 브라우저에 이벤트를 등록해줘야한다.
  • useEffect는 함수형 컴포넌트에서 리액트 컴포넌트의 라이프사이클에 원하는 함수를 실행할 수 있도록 도와주는 훅이다.
    • return으로 함수를 반환하면 해당 함수는 컴포넌트가 소멸할 때, 실행된다.

렌더링 되기 이전에 브라우저에 이벤트를 등록해주고 해당 컴포넌트가 소멸할 때, 이벤트를 제거해줘야 컴포넌트가 렌더링 될 때마다 이벤트가 중복으로 등록되지 않아 성능상 문제를 해결할 수 있다.

댓글 공유

JavaScript 날짜 쉽게 다루기

카테고리 Daily

자바스크립트에서 날짜는 Date 객체로 다루곤 한다.

1
2
3
const date = new Date();

console.log(date); // Tue Aug 01 2023 22:32:45 GMT+0900 (Korean Standard Time)
  • 1970년 1월 1일 UTC(국제표준시) 자정으로부터 지난 시간을 밀리초로 나타낸다.

Date 객체도 다양한 메서드를 제공하는데, 개발자가 이를 다루기에 직관적이지 못하여 다루기가 까다롭다.

매번 chatGPT한테 물어볼 수도 없고 ..ㅎㅎ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const date = today.getDate();
const day = today.getDay();
const month = today.getMonth();
const hours = today.getHours();
const minutes = today.getMinutes();
const ms = today.getMilliseconds();
const sec = today.getSeconds();

console.log(today); // Tue Aug 01 2023 22:32:45 GMT+0900 (Korean Standard Time)
console.log(date); // 1
console.log(day); // 2 (0~6) 일 ~ 토
console.log(month); // 7 (0~11)
console.log(hours); // 22
console.log(minutes); // 32
console.log(ms); // 122
console.log(sec); // 45
  • day를 숫자로 표현해주고 있으니 직관적이지 못하다. 우리나라는 월요일부터 시작으로 세는 사람이 많은데 일요일부터 시작하니…
  • month도 왜 0부터 시작하는 것인지.. ㅋㅋ

그래서 날짜를 좀 더 쉽게 다루기 위해 다양한 날짜 라이브러리가 나왔다.

오늘은 그 중 date-fns 라이브러리를 알아볼 것이다.

date-fns

1
npm install date-fns --save

설치는 다음 명령어로 설치하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { format, compareAsc } from "date-fns";

format(new Date(2014, 1, 11), "MM/dd/yyyy");
//=> '02/11/2014'

const dates = [
  new Date(1995, 6, 2),
  new Date(1987, 1, 11),
  new Date(1989, 6, 10),
];
dates.sort(compareAsc);
//=> [
//   Wed Feb 11 1987 00:00:00,
//   Mon Jul 10 1989 00:00:00,
//   Sun Jul 02 1995 00:00:00
// ]
  • format 메서드를 사용하여 날짜를 원하는 형식으로 바꿀 수 있다.

그 외에도 날짜를 서로 비교하여 우선순위를 매기거나 날짜를 더하고 뺄 수 있는 등 다양한 메서드를 사용하여 자유자재로 날짜를 다룰 수 있다.

예시로 날짜를 빼주는 메서드인 sub메서드만 알아보자.

1
2
3
4
5
6
7
8
9
10
11
// Subtract the following duration from 15 June 2017 15:29:20
const result = sub(new Date(2017, 5, 15, 15, 29, 20), {
  years: 2,
  months: 9,
  weeks: 1,
  days: 7,
  hours: 5,
  minutes: 9,
  seconds: 30,
});
//=> Mon Sep 1 2014 10:19:50
  • 2017년에서 2년을 뺀다.
  • 6월에서 9개월을 뺀다.
  • 15일에서 1주일(7일)을 뺀다
  • 나머지 8일에서 7일을 뺀다.
  • 15시간에서 5시간을 뺀다.
  • 29분에서 9분을 뺀다.
  • 20초에서 30초를 뺀다.

결과값은 2014년 9월 1일 월요일 10시 19분 50초가 나온다.

댓글 공유

JavaScript의 var, let, const 키워드에 대해 설명하라

카테고리 CS

var 키워드

  • 함수레벨 스코프
  • 생략 가능
  • 변수 재선언, 재할당 가능
  • 변수 호이스팅: 선언 이전에 참조할 수 있다.
  • 전역 변수로 선언 시 전역 객체의 프로퍼티로 등록

let 키워드

  • 블록레벨 스코프
1
2
3
4
5
6
7
8
9
let foo = 123; // 전역 변수

{
  let foo = 456; // 지역 변수
  let bar = 456; // 지역 변수
}

console.log(foo); // 123
console.log(bar); // ReferenceError: bar is not defined
  • 재선언 불가
1
2
3
4
5
var foo = 123;
var foo = 456; // 중복 선언 허용

let bar = 123;
let bar = 456; // Uncaught SyntaxError: Identifier 'bar' has already been declared

let 키워드의 호이스팅

var 키워드로 선언된 변수는 선언단계와 초기화 단계가 동시에 일어난다.

하지만 let, const 키워드로 선언된 변수는 선언단계와 초기화 단계가 분리되어 진행된다.

const 키워드

  • 재할당, 재선언 불가
  • 상수를 주로 사용
  • 변수 자체를 재할당할 순 없지만 객체의 프로퍼티는 변경 가능하다.
1
2
3
4
5
6
7
8
9
const user = { name: "Lee" };

// const 변수는 재할당이 금지된다.
// user = {}; // TypeError: Assignment to constant variable.

// 객체의 내용은 변경할 수 있다.
user.name = "Kim";

console.log(user); // { name: 'Kim' }

댓글 공유

JavaScript의 변수란?

카테고리 CS

컴퓨터는 연산을 담당하는 CPU, 저장을 담당하는 메모리로 각각 역할이 나뉘어져있다.

연산결과를 재사용하기 위해서는 메모리에 저장하고 메모리 주소를 통해 연산결과가 저장된 메모리 공간에 접근이 가능하다.

메모리 주소에 직접 접근하는 것은 위험하다. 가령 운영체제가 사용하고 있는 값을 변경하면 시스템을 멈추게 하는 치명적인 오류가 발생할 수 있기 때문에 자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않는다.

변수란, 하나의 값을 저장하기 위해 확보한 메모리 공간 또는 메모리 공간을 식별하기 위해 붙힌 이름이다.

  • 변수는 인터프리터나 컴파일러를 통해 값이 저장된 메모리 주소로 치환되어 실행된다.
  • 자바스크립트 엔진은 변수 이름과 매핑된 메모리 주소를 통해 메모리 공간에 접근하여 저장된 값을 반환한다.

변수 선언

변수는 선언단계에서 변수 이름을 등록하여 자바스크립트 엔진에게 변수의 존재를 알린다.

또한 초기화 단계에서 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당한다.

1
2
console.log(score); // undefined
var score;

모든 선언문은 런타임 이전에 먼저 실행된다.

변수 할당

1
score = 100;

변수 할당단계는 변수에 값을 저장하는 것을 말한다.

  • 선언과 할당이 한줄에 있어도 선언과 할당이 실행되는 시점이 다르다.
  • 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임때 실행된다.

변수에 값을 할당할 때, undefined가 있던 메모리 공간을 지우고 값을 저장하는 것이 아닌, 새로운 메모리 공간을 확보한 뒤 그곳에 새로운 값을 저장하고 해당 변수의 메모리 주소를 연결한다.

댓글 공유

loco9939

author.bio


author.job