최근 글

Visual Studio Code / 자동 줄바꿈(Word Wrap) 설정하는 방법

Visual Studio Code에서 편집창을 넘어갈 만큼 코드가 길어지면, 다음 줄로 내려가지 않고 계속 길어집니다. 좌우 스크롤을 해야하는 상황이 발생하는 거죠. 그게 불편하다면 편집창 끝에 다다랐을 때 다음 줄로 넘어가도록 설정할 수 있습니다. 이를 보통 Word Wrap이라 하고, 대부분의 텍스트 에디터가 그 설정을 가지고 있습니다. 방법은 다음과 같습니다. [File - Preferences […]

Visual Studio Code / 글꼴, 글자 크기 변경하는 방법

Visual Studio Code 편집기의 글꼴과 글자 크기를 변경하는 방법은 다음과 같습니다. [File > Preference > Settings]를 클릭합니다. [Text Editor > Font]에서 Font Family가 글꼴, Font Size가 글자 크기를 정하는 것입니다. 원하는 글꼴과 크기로 설정합니다.

CSS / Reference / aspect-ratio

선호 가로세로 비율과 이미지의 고유 비율을 구분합니다. auto 조합, 확정 크기, cover·contain의 잘림과 빈 공간을 실행 예제로 비교합니다.

CSS / Reference / border-width

테두리 두께의 1~4개 값 대응과 실제 외곽 크기를 확인합니다. none·hidden의 계산값과 hover 시 배치 변화, outline 대안을 설명합니다.

CSS / Reference / tab-size

실제 탭 문자의 정지 간격을 조절하고 공백 네 개와 구분합니다. 공백 보존 조건과 같은 문자열에서 4·8의 결과를 확인합니다.

CSS / Reference / align-content

Flex 줄 묶음과 Grid 트랙의 공간 배분을 비교합니다. nowrap·wrap, auto 트랙 stretch와 일반 블록의 적용 조건을 별도 실습으로 확인합니다.

CSS / Reference / overflow

넘친 내용을 자르거나 스크롤하는 조건을 비교합니다. hidden과 clip의 scrollTop 차이를 버튼으로 확인하고 축별 계산값과 레이아웃 조건을 설명합니다.

CSS / Reference / background-repeat

repeat·no-repeat·space·round를 같은 타일로 비교합니다. 반복 방향, 타일 간격과 크기 조정, 한 축에 한 타일만 들어가는 조건을 살펴봅니다.

CSS 강좌 / 변수 사용하는 방법: var()·상속·대체값

CSS 변수의 범위와 상속, var()의 대체값과 잘못된 값 처리 방법을 예제로 설명합니다. calc()와 단위 조합, 미디어 쿼리 조건에 변수를 사용할 수 없는 적용 한계도 확인할 수 있습니다.

CSS / Reference / font-variant

small-caps와 숫자 변형을 지정하면서 원문 문자열과 글꼴 기능을 구분합니다. 단축 속성의 재설정과 실제 렌더링 글꼴 확인 방법을 안내합니다.