※웹개발 관련 기본 용어, 개념, 구조 등을 우선 살펴보고 기본적인 작성방법 등을 차례로 알아보도록 하겠습니다.
Visual Studio Code를 활용하고 있으며 'Responsive Web Publishing 반응형 웹 실전프로젝트 가이드'를 참조하여
공부하고 있습니다.
목차
1. 웹 개발 시작하기 - 기본 용어 정리
@정적사이트 vs 동적사이트
-정적사이트 : 방문자에게 정보를 보여주기만 하는 웹
-동적사이트 : 웹 브라우저 화면에 보이는 모습+다양한 기능과 서비스 제공
@반응형 웹 : 웹 브라우저 화면 크기에 반응해서 웹 사이트의 레이아웃을 달라지게 하는 웹
@프런트엔드 vs 백엔드
-프런트엔드 개발 : 웹 브라우저 화면에 보이는 부분을 다루며 HTML, CSS, 자바스크립트를 사용
-백엔드 개발 : 보이지 않는 영역, 즉 서버를 다루며 데이터베이스를 설계하거나 데이터를 처리한다. 자바, PHP, 파이썬 등 프로그래밍 언어 사용
@HTML, CSS, 자바스크립트(JS)
-HTML : 웹 브라우저 창에 웹 문서의 내용을 보여 주는 데 필요한 약속
-CSS : HTML로 만든 내용을 사용자가 알아보기 쉽게 꾸미거나 사용하기 편리하도록 배치할 때 사용
-자바스크립트 : 사용자의 동작에 따라 반응하도록 만들기 위해 사용
@웹 브라우저 : 웹 사이트를 방문할 때 사용
@웹 편집기(=코드 편집기) : 웹 문서를 만들 HTML태그를 비롯해 CSS나 자바스크립트 소스를 입력하는 프로그램
2. HTML 시작하기
@HTML이란?
-Hyper Text Mark up Languge
-웹 문서를 만드는 언어
-웹 브라우저에 내용을 보여 주는 텍스트, 이미지, 영상 등의 위치를 표시하는 것
@HTML의 기본구조
<html>~</html> : HTML 파일의 시작과 끝을 표시
<head>~</head> : 웹 브라우저가 알아야 할 정보를 입력(대부분은 화면에 보이지 않음)
<body>~</body> : 실제 웹 브라우저에 표시할 내용을 입력
@시맨틱 태그
-웹 문서 구조를 나타내는 태그
-화면 낭독기 같은 보조 기기에서 사이트의 구조를 이해가능
-문서 구조가 정확히 나눠지므로 PC나 모바일 등 다양한 화면에서 웹 문서를 표현하기 쉬움
-웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있음(원하는 영역에서만 찾을 수 있으므로)
-크게 헤더 영역, 섹션 영역, 푸터 영역으로 나눈다.
@시맨틱 태그 구조
<header>
-사이트 영역의 헤더, 특정 영역의 헤더도 있음
-주로 맨 위쪽이나 왼쪽
-검색 창이나 사이트 메뉴를 삽입
<nav>
-내비게이션 영역
-문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만듦
<article>
-문서 안에서 여러 개 사용 가능
-독립적인 콘텐츠를 담음
<section>
-의미적으로 묶기 위해 사용
<div>
-CSS스타일링, 스크립트 등의 제어를 위한 목적으로 영역 구분이 필요할 때 section 요소 대신 div 요소를 사용
'HTML' 카테고리의 다른 글
| 비주얼스튜디오 코드(Visual Studio Code)의 LIST (0) | 2023.02.18 |
|---|---|
| 비주얼스튜디오 코드(Visual Studio Code)의 TABLE (0) | 2023.02.17 |
| 비주얼스튜디오 코드(Visual Studio Code)의 기본코드 (0) | 2023.02.16 |
| 비주얼스튜디오 코드(Visual Studio Code) 설정 및 단축키 모음 (0) | 2023.02.15 |
| 비주얼스튜디오 코드(Visual Studio Code) 다운로드 및 설치방법 (0) | 2023.02.15 |