입문자를 위한 HTML 기초 간단 정리!

홈페이지 제작 A to Z

입문자를 위한 HTML 기초 간단 정리!

HolidayDesign 2023. 5. 21. 15:47

728x90

1. HTML소개

HTML이란?

HTML은 웹페이지 콘텐츠를 정의하는 언어(문서 작성 양식)이다.
HTML 코드는 HTML 파일에 작성한다. 확장자는 *.html 또는 *.htm 이다
텍스트 에디터에서 작성한 HTML 코드는 웹브라우저를 통해 표시할 수 있다.
텍스트 편집기 : 기본 메모장, Brackets, VSCode 등
웹브라우저 : 크롬, 사파리, 파이어폭스, 인터넷익스플로러, 엣지 등

개발자 도구와 코드 에디터

대부분의 최신 브라우저에는 개발자 도구가 탑재되어 있다.
개발자 도구 열기 : 웹브라우저에서 F12키
개발자 도구는 개발자의 웹 개발 속도 및 편의를 증가시킨다.
개발자는 코드를 더 빠르고 편하게 편집하기 위해 코드 에디터를 사용한다.
코드 에디터 : 텍스트 자동 완성 + 하이라이팅 기능이 추가된 메모장

2. HTML 기본 문법 및 작성 방법

HTML 코드 기초 문법

HTML은 태그를 사용해 콘텐츠를 표시한다. <태그명> 콘텐츠 내용 </태그명>, <단일태그="내용"/>, <단일태그>
태그는 콘텐츠를 감싸는 역확을 하며, 컨텐츠에 성격과 의미를 부여한다
태그에는 속성을 통해 부가적인 기능을 정의할 수 있다. <태그명 속성명="속성값"> 내용 </태그명 끝>
주석은 사람에게는 보이지만, 컴퓨터에게는 보이지 않는 코드이다.

HTML 문서 기본 구조

HTML 코드를 작성할 때는 기본 문서 구조를 마련한 다음 작성한다.
들여쓰기를 통해 태그 간의 포함 관계를 나타낸다. 이는 가독성에 도움이 된다. 문법적 필수 사항은 아니다.
<head> 태그에는 문서의 정보가, <body>태구에는 표시할 내용이 포함된다.
태그의 콘텐츠로 또 다른 태그가 포함될 수 있다.

<!DOCTYPE html> : 문서 유형 지정하는 단일 태그

<html> : 문서가 시작되고 끝나는 태그, 문서의 언어 지정

<head> : 화면에 보이지 않지만, 웹 브라우저가 알아야 할 정보 모두 여기에 들어간다.

<title>Document</title> : 문서의 제목, 브라우저 탭에 표시

</head>

<body> : 실제 브라우저 화면에 표시될 내용
- 텍스트 태그
- 이미지 태그

- 각종 사용자 인터페이스를 나타내는 태그 : 버튼, 입력란, 드롭다운 메뉴 등

</body>

</html>

3. 콘텐츠 표시하기 - 텍스트, 이미지, 링크, 목록

텍스트 태그 사용 방법과 특징

p 태그는 문단을 표시하는 태그
h1 ~ h6 태그는 헤드라인을 표시하는 태그, 숫자가 작을수록 크다.
hr은 수평선 태그. 주제 변경이내 내용 구분 시 사용
HTML 은 텍스트의 줄바꿈, 공백 등을 엔터와 스페이스로 처리하지 않는다.
스페이스는 한 번씩만 허용 (연달아 입력할 경우 한 번 외엔 무시)
br 태그는 줄바꿈, &nbsp 는 공백

태그의 구분과 인라인 텍스트 요소

HTML 문서의 요소는 블록 레벨 요소와 인라인 요소로 구분
블록 레벨 요소는 너비를 모두 차지하여 블록을 형성한다. <p>, <H1> 등
인라인 요소는 콘텐츠를 표시하기 위해 필요한 공간만 차지한다. <strong>, <em>, <mark> 등

이미지 표시

이미지를 표시할 때는 닫는 태그가 없어도되는 img 태그를 사용한다.
src은 이미지의 url을 입력받는 속성이다.
alt는 대체 텍스트를 입력 받는다. 이미지 유실 상황에 대응
width, height는 각각 이미지의 가로 세로 입력 받는 속성이다.
<img src="이미지 파일 url" alt="이미지 설명" width="가로px" height="세로px" />

컨테이너 그리고 전역 속성

콘텐츠나 레이아웃에 영향을 주이 않는 태그 요소를 컨테이너라 한다.
컨테이너는 영역을 묶어서 관리하고자 할 때 사용
<div>블록레벨 컨테이너</div>, <span>인라인 컨테이너</span>
모든 태그에 공통적으로 지정 가능한 속성을 전역 속성이라 한다.
<태그명 속성명="속성값" 속성명="속성값" > 콘텐츠 </태그명>
id와 class는 태그명이 같은 요소들을 식별하기 위해 사용하는 속성
id는 태그당 하나씩만 지정해야하나, class는 다중 지정 및 중목 가능
style은 요소에 적용한 css 스타일을 선언, title은 요소에 추가 정보를 제공하는 텍스트 속성으로 마우스 오버시 툴팁 제공
특정 태그에만 지정 가능한 속성들도 물론 존재

링크 만들기

a (anchor) 태그는 페이지를 다른 위치로 이동시킬 수 있는 링크를 만든다.
herf 속성에는 링크가 참조하거나 이동하고자 하는 url을 입력한다.
target 속성에는 새 페이지가 열릴 대상(탭)을 지정할 수 있다.
herf 속성을 통해 전화 걸기, 이메일 보내기 등을 지정할 수도 있다.
<a href="url : 다른 페이지, tel:000-0000-0000, mailto:0000@mail.com 등의 목적지"
target="탭지정하기 : _self(기본값,현재 탭), _blank(새 탭)"> 링크 시킬 텍스트 또는 이미지 </a>

목록 표시하기

목록은 연관 있는 항목들을 나열한 것
ul : 순서없는 목록, ol : 순서 있는 목록. 숫자 또는 앵커 구분
목록안에 항목 요소를 표시랄 때는 li 태그를 사용
ol, ul, li 태그는 모드 블록 레벨 요소를 표시하는 태그

4. 입력 요소 - 사용자 입력을 받는 다양한 방법

입력 요소 만들기

input은 입력 요소를 만드는 단일 태그, 일반적으로 인라인 요소
input 태그는 type 속성을 통해 형태와 입력 값 유형을 결정
type 값에 따른 사용 방법이 다양하다. ( 웹페이지 내에서의 역할, 추가 속성 등)
name 속성으로 input 요소를 구별할 수 있다.
<input type="입력요소 종류 : text, button, color, range, date 등" name="입력내용" />
https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input input 입력 요소 참조

select와 textarea

select는 선택 메뉴를 나타나는 태그
select의 각 선택지는 option 태그를 통해 표시
각각의 option에는 value를 지정하여 추후 처리를 준비한다. (자바스크립트를 통한 입력 값 처리에 value가 사용될 수 있다)
<select name="이름">
<option value="속성값1">드롭다운1</option>
<option value="속성값2">드롭다운2</option>
</select>
선택하면 '이름'의 입력값은 '속성값'이다. 라는 결론
textarea는 여러 줄의 일반 텍스트를 입력하는 요소를 나타낸다.
<textarea name="이름" rows="10" cols="5">기본적으로 쓰여있는 텍스트 가로10 세로5줄</textarea>

폼(form) Part1. 서버와 클라이언트

form은 사용자가 입력 요소에 입력한 데이터를 서버(host)로 전송해준다.
클라이언트란 데이터를 제공받아 이용하는 사용자이다.
form은 입력요소(input, select, textarea 등)를 감싸고, 데이터를 제출(sumit)한다.
form의 action은 서버 측 주소를 지정하는 속성
form의 method는 데이터 전송 방식을 지정하는 속성
<form action="exmap.php" method="POST / GET">
<input type="text" placehoder="기본적으로 나타나는 텍스트">
<br>
<input type="sumit" value="제출">
</form>

5. 웹사이트의 사용성을 향상시키는 방법

메타 태그 (meta)

meta는 HTML 문서의 메타데이터(정보)를 표시하는 태그
검색엔진 최적화에 기여하며, 검색 결과에도 영향을 끼친다.
charset는 문자 인코딩에 대한 요약 정보를 기입하는 속성이다.
http-equiv는 콘텐츠 속성의 정보/값에 대한 HTTP 헤더를 제공한다.
name 속성은 문서의 다양한 정보를 제공할 수 있는 메타데이터의 이름이다.
content는 메타데이터의 구체적인 내용을 기입하는 속성이다.

content="IE=edge" : 메타데이터의 내용

뷰포트 (viewport)

뷰포트는 현재 화면에 보여지고 있는 영역을 의미
웹 문서는 기본적으로 PC 화면에 맞춰 설계 되었기 때문에, 다른 기기에서 배율 조정이 일어난다.
배율 조정 현상에 대응하기 위해 개발자는 메타 태그를 사용해 뷰포트 관련 설정을 추가할 수 있다.

마무리

뷰포트 (viewport)HTML 학습 이후에는 CSS 필수 공부해야 합니다.

HTML : 웹 문서의 콘텐츠를 구성하는 언어
CSS : 웹 문서의 콘텐츠에 스타일을 추가하는 언어 (색상, 크기, 위치 등)

저작자표시 비영리 변경금지

'홈페이지 제작 A to Z' 카테고리의 다른 글

무료도메인 발급 (3분만에 5개 생성하기) (0)	2023.06.07
웹사이트에 다운로드 없이 바로 아이콘 넣기(무료 다운로드) (1)	2023.05.21
가맹점, 비지니스 홈페이지 제작 초보 가이드: 프리랜서vs업체 (1)	2023.05.01
가맹점, 비지니스 홈페이지 제작 초보 가이드: 제작 과정 (2) (0)	2023.05.01
가맹점, 비지니스 홈페이지 제작 초보 가이드: 필수 사항 (0)	2023.04.28

현재글입문자를 위한 HTML 기초 간단 정리!

Holiday S8Design