▶ 개발환경 설정
1) VS Code 설치
- VS Code 홈페이지(https://code.visualstudio.com/) 접속하여
사용자 컴퓨터에 적합한 OS를 선택해 다운로드
2) 환경 설정
- 좌측 하단 톱니바퀴 아이콘 → Settings
- font 입력 → Font 설정 변경
theme 입력 → 테마 설정 변경
mouse wheel zoom 입력 → 빈 칸에 체크 (해당 설정 사용 시 마우스 휠로 글자 크기 증/감 가능)
3) 확장 기능 추가
- 좌측 사이드바 마켓 플레이스 아이콘(좌측 상단에서 아래로 5번째 위치) 클릭 및 확장기능 추가
- Korean Language Pack for Visual Studio code : VS code 한글화
Auto Rename Tag : 시작태그, 종료태그 동시 수정
Quick HTML Previewer : 실시간 HTML 작성 결과 미리보기
Auto Close Tag : 종료태그 자동 추가
Eclipse Keymap : 이클립스와 동일한 단축키 적용
Live Server : 인터넷 창으로 작업 수행 반영 결과 실시간 확인 가능
Material Icon Theme : 사용자 정의 아이콘 설정 가능
◈ 웹 통신 기초
▶ 인터넷
- 전 세계의 컴퓨터가 네트워크를 통해 연결되어 정보를 공유하는데 목적
- 프로토콜을 이용하여 통신
- 초기엔 군사용 / 민간용으로 구분 → 민간용이 지금의 인터넷이 됨
▶ 웹(WEB)
- 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간
- 인터넷의 통신망 위에서 작동하는 서비스
▶ 웹 처리 과정
- 네트워크를 통해 서로 연결된 컴퓨터 간에 서버와 클라이언트의 역할을 나눔
- HTML [마크업(MarkUp) 언어]을 통해 자료를 주고 받음
▶ 웹 특징
- HTTP(Hyper Text Transfer Protocol) 사용
- HTML(Hyper Text Markup Language)로 작성된 문서 연결
- 텍스트, 그래픽, 오디오, 비디오, 프로그램 파일 등 멀티미디어 서비스 제공
- 반응형 웹 : 웹 서버에서 제공되는 정보가 다양한 기기에 맞춰 제공되는 환경
◈ HTML 개요
▶ HTML
- 웹에서 정보를 표현할 목적으로 만든 마크업 언어(Hyper Text Markup Language)
- 웹 페이지를 작성하기 위해 사용되는 언어로 웹 브라우저에게 보일 문자열과
이를 감싸는 일종의 해석기호인 <태그>로 이루어짐
- 마크업 / 마크업 언어
→ 마크업(태그) : 문서의 논리적인 구조를 정의 + 출력장치에 어떤 형태로 보일 것인지 지시하는 역할
→ 마크업 언어 : 마크업(태그)의 형식과 규칙을 정의한 언어
▶ HTML5 특징
- 구조적 설계 지원(시멘틱)
- 그래픽 / 멀티미디어 기능 강화
- CSS3 및 JavaScript 지원
- 다양한 API 제공
- 모바일 웹 지원 및 장치 접근 가능(배터리 정보, 카메라, GPS 등)
- 웹 브라우저가 서버와 양방향 통신 가능
- 인터넷이 연결되지 않은 상태에서도 애플리케이션 동작
▶ HTML5 구성 요소
- < p align = 'center' > HTML/CSS <p>
시작태그 속성 속성값 내부 문자 종료태그 - 태그(Tag) : '<' 와 '>' 로 묶인 명령어 / 시작태그와 종료태그를 한 쌍으로 이용
- 속성(Attribute) : 요소의 시작태그에만 사용 / 명령어 구체화 역할
/ 여러 개의 속성을 사용할 수 있으며 속성의 구분은 공백 - 변수/속성값(Argument) : 속성이 가지는 값, 값 입력 시 " " 혹은 ' ' 를 이용
- 요소(Element) : 시작태그와 종료태그로 이루어진 모든 명령어 / 하나의 HTML 문서는 요소들의 집합
▶ HTML5 주의 사항
- 태그는 대 / 소문자를 구분하지 않으나 소문자를 권장함
- 시작태그로 시작하면 반드시 종료태그로 종료
- 파일 확장자는 반드시 html 또는 htm으로 설정
- 문자의 공백은 몇 개를 입력하든 한 개만 인식하므로
공백을 추가하기 위해서 특수기호 를 이용해야 함
▶ HTML5 기본 구조
▶ <html> </html>
- html 문서의 시작과 끝 표시
- lang은 해당 페이지가 어느 나라 언어로 되어있는지 의미
* 검색엔진이 페이지 검색 시에 참고 / 검색 사이트에서 특정 언어 제외할 때 사용
- 속성 : html 뒤에 붙는 lang을 속성이라고 함 ex) <html lang = "ko">
- 속성 값 : 속성에 대한 값을 설정한 것 / lang의 속성 값으로는 "설정 언어"가 올 수 있음
▶ <!-- -->
- HTML에 사용하는 주석
- 코드 작성내용에 대해 설명하는 곳에 사용
- 브라우저는 주석 부분을 해석하지 않고 넘어감
'HTML & CSS & JavaScript > HTML' 카테고리의 다른 글
| 이미지 관련 태그 (0) | 2024.12.14 |
|---|---|
| ★★ 영역 관련 태그 ★★ (0) | 2024.12.14 |
| 표 관련 태그 (0) | 2024.12.11 |
| 목록 관련 태그 (0) | 2024.12.11 |
| 글자 관련 태그 (0) | 2024.12.10 |