반응형

HTML_CSS

(HTML CSS) 구글 웹폰트 사용하기

HTML문서에 웹에서 제공하는 폰트를 사용할 수 있습니다. 다음은 구글에서 제공하는 웹폰트를 사용하는 방법을 설명합니다. 1. fonts.google.com에 연결합니다. 폰트를 검색하거나 아래 나열된 폰트를 선택합니다. 여기서는 무료 글꼴인 나눔 폰트를 검색해 보겠습니다. "nanum"을 입력합니다.원하는 글꼴을 선택합니다. 2. 웹에서 사용하는 2가지 방법 중 하나를 선택하게 합니다. 여기서는 2가지 방법을 모두 설명하겠습니다. 를 선택하고, 하단의 항목을 HTML 문서에 삽입합니다. font-family: 'Nanum Pen Script', cursive; 완성된 HTML 코드는 다음과 같습니다. 웹폰트를 사용하는 방법을 설명합니다. Explains how to use web fonts. 3. 이번..

HTML_CSS 2023.10.12

Visual Studio Code(VSC)에서 Live Server 설치 및 사용하기

라이브 서버(live server)는 비주얼스튜디오 코드에서 HTML 파일을 작성할 때 편리한 기능을 제공합니다. Live Server 설치 1. 비주얼스튜디오 코드를 시작합니다. 2. 왼쪽의 확장 기능을 선택하고, “Live Server”를 입력해서 설치합니다. 화면의 우측 하단에 “Go Live”가 나타나는 것을 볼 수 있습니다 – Live Server가 실행되고 있습니다. 3. HTML 파일을 생성해 보겠습니다. 맨 먼저 폴더를 선택합니다 – 작업 폴더가 없으면 폴더를 한 개 생성해서 이 폴더를 선택합니다. 파일을 선택하는 것이 아니라 작업할 폴더만 선택하는 것입니다. 4. HTML 파일 생성하기 “새 파일”을 선택하고, 파일명을 입력합니다. 빈 화면에서 “html:5”를 입력하거나 아래와 같이 선..

HTML_CSS 2023.09.21

(HTML5) 특수문자, 기호 사용하기

HTML에서 특수문자 목록입니다. https://html.spec.whatwg.org/multipage/named-characters.html HTML Standard HTMLLiving Standard — Last Updated 6 September 2023 ← 13.2 Parsing HTML documents — Table of Contents — 14 The XML syntax → 13.5 Named character references 13.5 Named character references This table lists the character reference names that are su html.spec.whatwg.org 사용 예 ◼안녕하세요...♥ 또는..

HTML_CSS 2023.09.08

(강의용) 텍스트 1 - 김소월 진달래꽃, 로렘입숨

강의용으로 사용할 텍스트입니다 - 복사하여 사용할 용도입니다. HTML5 HyperText Markup Language version 5. 2014년 국제 웹 표준화 단체인 W3C(World Wide Web Consortium)에서 개발한 하이퍼텍스트 마크업 언어(HyperText Markup Language)의 최신 버전입니다. 기존의 액티브엑스(ActiveX)나 플래시(Flash) 같은 플러그인(plug-in) 소프트웨어와 유사한 기능을 웹 응용 프로그램으로 개발할 수 있도록 지원합니다. 또한 HTML5는 표준 기술로 이식성이 뛰어나 플랫폼(예: 리눅스, 윈도우, iOS, 안드로이드 등) 대부분에서 실행됩니다. 즉, HTML5로 웹 응용 프로그램을 만들면 거의 모든 디바이스나 플랫폼에서 사용할 수 있..

HTML_CSS 2023.09.06

(HTML CSS) header footer 있는 3단 고정형 레이아웃

아래의 코드는 간단한 3단 고정형 레이아웃을 만듭니다. container 클래스로 구성된 컨테이너는 max-width 속성을 통해 최대 너비를 1000px로 제한하고, margin: 0 auto;를 사용하여 가운데 정렬합니다. 좌측 컬럼은 .left-column 클래스로 정의되며, 너비는 200px이고 배경색은 #e0e0e0입니다. 중앙 컬럼은 .center-column 클래스로 정의되며, flex-grow: 1;을 사용하여 남은 공간을 모두 차지하도록 설정되었습니다. 우측 컬럼은 .right-column 클래스로 정의되며, 너비는 200px이고 배경색은 #e0e0e0입니다. 헤더 좌측 컬럼 이곳에 좌측 컬럼의 내용을 추가하세요. 중앙 컬럼 이곳에 중앙 컬럼의 내용을 추가하세요. 우측 컬럼 이곳에 우측 ..

HTML_CSS 2023.05.21
반응형