최근 글
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와 숫자 변형을 지정하면서 원문 문자열과 글꼴 기능을 구분합니다. 단축 속성의 재설정과 실제 렌더링 글꼴 확인 방법을 안내합니다.
CSS 강좌 / 상속(inheritance)
CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다.
CSS / Reference / text-indent
문단 첫 줄 들여쓰기와 내어쓰기를 만들고 전체 문단 여백과의 차이를 비교합니다. 음수 값, 상속과 좁은 화면에서 필요한 시작 여백을 확인합니다.
CSS / Reference / letter-spacing, word-spacing
같은 문장을 기준으로 문자 간격과 단어 간격을 따로 조정합니다. normal 기준, 상대 단위, 언어별 줄바꿈과 과도한 음수 간격의 문제를 설명합니다.
Visual Studio Code / 설정 동기화 하는 방법
Visual Studio Code를 여러 기기에서 사용한다면 설정을 동기화하는 것이 편합니다. 설정 동기화를 사용하기 위해서는 Github 또는 Microsoft 계정이 필요합니다. 동기화하는 방법은 다음과 같습니다. [File > Preference > Turn on Settings Sync...]를 클릭합니다. [Sign in & Turn on]을 클릭합니다. Github 또는 Microsoft 계정으로 로그인합니다. 동기화 여부는 아래와 같이 확인할 수 있습니다.
Visual Studio Code / 대문자를 소문자로, 소문자를 대문자로 일괄 변경하는 방법
많은 텍스트를 전부 대문자로 바꾸거나 소문자로 바꿔야 할 때가 있습니다. 비쥬얼 스튜디오 코드는 그 작업을 위한 기능을 포함하고 있습니다. 변환하려는 텍스트를 선택합니다. [Ctrl + Shift + P]를 누릅니다. transform을 입력합니다. 원하는 것을 선택하고 엔터 키를 누릅니다. 명령에 따른 결과는 다음과 같습니다. Transform to Lowercase : 모두 소문자로 변경 Transform to […]