최근 글
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 […]
Visual Studio Code / 탭 크기 설정하는 방법
Visual Studio Code에서 탭 크기를 설정하는 방법은 다음과 같습니다. [File - Preference - Settings]를 클릭하여 설정 파일을 엽니다. tab으로 검색한 후 왼쪽에서 [Text Editor]를 클릭합니다. [Editor: Tab Size]에서 탭 크기를 정합니다. [Editor: Insert Spaces]에서 탭에 공백을 사용할 지 정합니다.
Visual Studio Code / 단축키
주석 블록 주석 : Alt + Shift + A 한 줄 주석 : Ctrl + / 주석 단축키가 되지 않으면, 한글 입력기가 Microsoft 입력기인지 확인합니다. 한컴 오피스가 설치되어 있는 경우 한글 입력기가 한컴 입력기인 경우 문제가 생깁니다. 접기(fold), 펴기(unfold) 접기 : Ctrl + Shift + [ 펴기 : Ctrl + […]
Visual Studio Code / 언어 변경하는 방법
Visual Studio Code를 설치하면 시스템의 언어로 세팅이 됩니다. 즉 윈도우에 설치했을 때 윈도우의 언어가 한글이라면 Visual Studio Code의 언어도 한글이 됩니다. 만약 언어를 영어로 변경하고 싶다면, 다음과 같이 합니다. [Crtl + Shift + P]를 누릅니다. 그러면 상단에 명령을 입력하는 창이 나오는데... 언어라고 입력하면 관련 메뉴들이 나옵니다. 그 중 [표시 언어 […]
CSS 강좌 / 문법: 선택자·선언·주석과 오류 처리
CSS의 선택자·선언·구분 기호·주석을 예제로 설명합니다. 잘못된 속성값과 세미콜론 누락을 비교하고, 실행 가능한 예제와 오류 수정 실습으로 브라우저가 적용한 결과를 확인합니다.
HTML pre 태그: 공백·줄바꿈 보존과 자동 줄바꿈 방법
pre와 일반 문단의 공백 처리 차이를 비교하고, 긴 코드에 가로 스크롤이나 자동 줄바꿈을 적용합니다. HTML 소스 이스케이프와 code 요소의 역할도 예제로 설명합니다.
HTML figure·figcaption 태그: 그림과 캡션 묶는 방법
figure로 독립된 자료를 묶고 figcaption을 앞이나 뒤에 배치하는 방법을 전체 예제로 비교합니다. 캡션과 이미지 대체 텍스트의 역할, 반응형 크기 조절도 함께 설명합니다.