coding-abc.kr

(강의용) HTML, CSS 강의를 위한 자료입니다.교재: (예제 중심의 웹 프로그래밍 입문) HTML & CSS for Beninner / 한빛아카데미 강의용 소스 다운로드비주얼스튜디오 코드(Visual Studio Code) 다운로드 및 설치https://visualstudio.microsoft.com/ko/downloads/ >> 2장 실습용 텍스트 >> 오디오/비디오 다운로드 https://coding-abc.kr/16

CSS의 float 속성을 이용해서 만든 3단 레이아웃의 예제입니다. 우리회사 메뉴 MENU 1 MENU 2 MENU 3 MENU 4 MENU 5 우리회사 소개 여기에 내용을 작성합니다. Sidebar 여기에는 뭘 출력할까요? © Copyright 2023 coding-abc.kr. All rights reserved.

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

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

(강의용) 강의를 위해 등록된 파일들입니다.HTML5 + CSS3 웹 표준의 정석

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 사용 예 ◼안녕하세요...♥ 또는..

HTML5의 최신 표준(standard) 태그를 알고 싶다면 아래 링크를 확인하십시오. https://w3.org/TR/html53 https://html.spec.whatwg.org/multipage/ HTML Standard HTML Living Standard — Last Updated 6 September 2023 html.spec.whatwg.org

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

CSS를 이용해서 만든 버튼입니다. 마우스를 올리면 버튼의 배경색이 바뀝니다. 만들어진 결과 모양을 먼저 보겠습니다. 전체 코드는 다음과 같습니다. 메뉴 1 메뉴 2 메뉴 3 메뉴 4 소스 다운로드

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