[HTML #1] HTML 기본 내용 & 자주 사용 태그 다루기

👩‍💻HTML+CSS+자바스크립트 독학 공부 1주차 - HTML 기본 내용 + 자주 사용 태그 다루기

✒️ 교재 : 코딩 자율학습 html+css+자바스크립트 (길벗)

📃요약

2.1 HTML의 기본 구성 요소

2.1.1. 태그

웹 페이지의 다양한 구성요소를 정의하는 역할-> HTML 문법을 이루는 가장 작은 단위

형식 : <태그명>

2.1.2 속성

태그에 어떤 의미나 기능을 보충하는 역할 -> 옵션 같은 기능, 태그 없이는 사용x

형식 : <태그명 속성명=”속성값”>

<html lang=”ko”> : 주 언어(lang)가 한글(ko)로 된 HTML 문서의 시작

2.1.3 문법 -> 태그와 속성으로 구성

1) 콘텐츠가 있는 문법

<title> 시작 태그 & 콘텐츠 & </title> 종료 태그 -> 요소

2) 콘텐츠가 없는 문법

시작 태그만 사용 (= 빈 태그)

2.1.4 주석

코드에 어떠한 메모나 설명을 남길 때

형식 :

2.2 HTML의 기본 구조

2.2.1 DTD

문서형 정의 -> 웹 브라우저가 처리할 HTML 문서가 어떤 문서 형식을 따라야 하는지 알려줌 / HTML 문서 작성 맨 처음에 넣어야 함

형식 : <!DOCTYPE html>

2.2.2 html 태그

HTML 문서의 시작과 끝을 의미

2.2.3 head 태그

HTML 문서의 메타데이터 정의 (HTML 문서에 대한 정보) -> 웹 브라우저에 노출 x

Meta, title, link, style, script 등의 태고로 문서의 여러 정보 정의함.

-1) Meta 태그

: 메타데이터 정의

-2) title 태그

: HTML 문서의 제목 지정

<title>My First Web Page!</title>

-> 1개의 title 태그만 가능, 중복 x

2.2.4 body 태그

웹 브라우저에 노출되는 내용 작성

2.3 HTML 특징 파악하기

2.3.1 블록 요소와 인라인 요소

블록 요소 : 사용할 때마다 줄 바꿈되는 태그

인라인 요소 : 공간이 부족할 때만 줄 바꿈되는 태그

2.3.2 부모, 자식, 형제 관계

-> 태그들간의 관계

2.3.3 줄 바꿈과 들여쓰기

가독성을 좋게 하기 위해서 암묵적으로 지키는 규칙

3.1 텍스트 작성하기

3.1.1 hn 태그

: 제목이나 주제를 나타내는 텍스트 표현

형식 : <hn>제목</hn>

H : heading

N : 숫자의 중요도

-> 검색 엔진에서 키워드로 인식 (단계적으로 태그 사용해야함)

3.1.2 p 태그

: 본문의 문단 작성 시 사용

형식 : <p>내용</p>

3.1.3 br 태그

: 문단에서 줄 바꿈 할 때 사용

형식 : <br>

3.1.4 blockquote 태그

: 출처에서 인용한 문단 단위의 텍스트 작성 시 사용

3.1.5 q 태그

: 짧은 인용문 작성 시 사용, " " 로 묶임

3.1.6 ins와 del 태그

: 추가 텍스트(밑줄)과 삭제 텍스트(취소선)

3.1.7 sub와 sup 태그

: 아래첨자와 위 첨자

3.2. 그룹 짓기

공간분할태그

1) div 태그

: 블럭요소와 인라인 요소를 그룹으로 묶을 때 사용

2) span 태그

: 인라인 요소를 그룹으로 묶을 때 사용

3.3 목록 만들기

1) ul 태그

: 순서 없는 비순서형 목록 생성 -> li 태그로 구성

: 글머리 기호가 붙음

2) ol 태그

: 순서형 목록 생성 -> li 태그로 구성

: 번호가 붙음

3) dl 태그

: 정의형 목록 생성 (용어와 용어 설명을 나열한 형태의 목록)

: dt 태그 (용어), dd 태그 (용어설명)

3.4 링크와 이미지 넣기

1) a 태그

: HTML에서 내부나 외부 링크를 생성

: href 속성, target 속성, title 속성 사용

-1) href 속성

a 태그로 생성하는 링크의 대상 경로를 입력 시 사용

속성값 : 대상경로 주소 (URL), 내부문서의 id 속성값

cf) 주소가 불분명한 경우 속성값에 # 넣음

-2) target 속성

a 태그로 링크를 생성할 때 대상이 연결되는 방식을 지정함

: 생략 가능

: _blank 주로 사용

-3) title 속성

링크를 설명할 수 있는 텍스트를 작성

: 생략 가능

2) img 태그

: 이미지 객체 삽입 시 사용

-1) src 속성

삽입하려는 이미지의 경로를 입력하는 속성 (웹 브라우저에서 실행되는 HTML 파일의 위치 기준)

./ (현재 폴더) ../ (상위 폴더)

-2) alt 속성

: 삽입한 이미지 객체를 설명할 수 있는 텍스트를 넣음

3) 이미지 링크

: img 태그 a 태그 안에 사용시 특정 링크로 이동 가능

Develop&Create

[HTML #1] HTML 기본 내용 & 자주 사용 태그 다루기

👩‍💻HTML+CSS+자바스크립트 독학 공부 1주차 - HTML 기본 내용 + 자주 사용 태그 다루기

📃요약

댓글

티스토리툴바