[코딩 자율학습: HTML + CSS + 자바스크립트] 1~3장

재규어·2024년 3월 26일
CSSJavaScripthtmljs자바스크립트코딩 자율학습

프론트엔드 공부

목록 보기
12/15
post-thumbnail

1장은 간단한 설치와 개발 환경 설정이므로 건너뛴다.

2장. HTML 문서 작성을 위한 기본 내용 살펴보기

2-1. HTML의 기본 구성 요소

  1) 태그

  • 웹 페이지의 구성 요소를 정의하는 역할
  • HTML 문법을 이루는 가장 작은 단위
  • 기본 형식: <태그명>

  2) 속성

  • 태그에 어떤 의미나 기능을 보충하는 역할 (a.k.a. 옵션)
  • 속성은 사용해도 되고, 안 해도 되고, 여러 개를 사용해도 됨
  • 태그 없이 단독으로 사용 불가
  • 속성은 속셩명과 속성값으로 구성된다.
    • 형식) <태그명 속성명 = "속성값">
  • 일반적으로 속성을 사용할 때, 속성명은 따옴표 없이 작성하고 값은 큰따옴표 안에 작성한다.
    • 속성값이 여러 개인 경우에는 하나의 큰따옴표 안에 쉽표로 구분해 값을 나열한다.
  • 예시
    <html lang="ko">
    • 홑화살괄호 사이에 처음 등장하는 이름이 태그명이므로 이 태그는 html 태그
    • 태그명 다음에 속성을 넣으니 여기서는 lang이 속성명이고 ko가 속성값
    • 만약 html 태그만 사용했다면 ‘HTML 문서의 시작’이라는 의미만 있음.
      그러나 함께 사용한 lang 속성 때문에 태그의 원래 의미에 속성의 의미가 더해져 ‘주 언어(lang)가 한글(ko)로 된 HTML 문서의 시작’이라는 구체적인 의미를 가지게 됨.

  3) 문법

  • HTML은 태그와 속성으로 문법을 구성한다
    • 크게 콘텐츠가 있는 문법과 콘텐츠가 없는 문법으로 나뉨
  • 콘텐츠가 있는 문법
    • 콘텐츠 앞뒤를 태그로 감쌈
    • 시작 태그와 종료 태그, 콘텐츠를 합쳐서 요소라고 함
    • ex) <title> 태그
  • 콘텐츠가 없는 문법
    • 시작 태그만 사용
    • 내용이 비어 있다는 의미로 빈 태그(empty tag)라고 함
    • ex) <br> 태그

  4) 주석

  • 실행결과(웹 브라우저)에는 표시되지 않지만, 코드에 어떠한 메모나 설명을 남기고 싶을 때 사용
  • <!--와 --> 사이에 내용을 작성하면 해당 내용은 주석으로 처리됨
  • 단, 주석을 사용하면 다음과 같이 웹 브라우저에는 아무것도 표시되지 않지만, 웹 브라우저의 소스 보기로 볼 수 있으므로 보안상 중요한 내용을 넣으면 안 됨
    예시 사진

2-2. HTML의 기본 구조

  1) DTD

  • 문서형 정의(DTD, Document Type Definition)는 웹 브라우저가 처리할 HTML 문서가 어떤 문서 형식을 따라야 하는지 알려 주는 것으로, HTML 문서를 작성할 때 항상 처음에 넣어야 한다.
  • 다음처럼 DTD를 작성하면 웹 브라우저는 HTML 문서를 최신 형식인 HTML5 문서 형식으로 해석한다. HTML5 등장 이후로 이전 버전의 문서 형식을 정의할 필요가 없으므로 항상 다음과 같이 DTD를 작성하도록 한다.
  • <!DOCTYPE html>

  2) html 태그

  • HTML 태그는 HTML 문서의 시작과 끝을 의미한다. 따라서 모든 태그는 html 태그 안에 작성해야 한다.

  3) head 태그

  • head 태그는 HTML 문서의 메타데이터(metadata)를 정의하는 영역
    • 메타데이터: HTML 문서에 대한 정보로, 웹 브라우저에는 직접 노출되지 않는다.
  • meta 태그
    • <meta charset="UTF-8"> : HTML 문서에서 허용하는 문자 집합(charset)을 정의하는 메타데이터 태그
      • 과거에는 EUC-KR을 주로 사용했지만, 최근에는 더 많은 언어를 허용하기 위해 UTF-8만 사용함
    • <meta http-equiv="X-UA-Compatible" content="IE=edge"> : 인터넷 익스플로러(이하 IE)의 렌더링 엔진을 강제로 최신 렌더링 엔진으로 지정하는 메타데이터
      • 구 버전의 렌더링 엔진을 사용하는 실험적 프로젝트가 아니라면 해당 태그를 정의하는 편이 좋다.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0"> : 기기의 화면 너비에 맞추기 위해 사용하는 메타데이터 태그
      • 뷰포트(viewport) : 웹 페이지에 접속했을 때 사용자에게 보이는 화면 영역
  • title 태그
    • HTML 문서의 제목을 지정하는 데 사용함
    • 모든 HTML 문서는 반드시 1개의 title 태그를 사용해 HTML 문서의 제목을 지정해야 함
    • 이때, 제목은 HTML 문서마다 중복되지 않도록 주의해야 하는데,
      • 그 이유는 구글이나 네이버 같은 검색 엔진 사이트에서 HTML 문서를 찾을 때는 title 태그에 작성된 제목으로 찾기 때문이다. 만약 한 웹 사이트에서 제목이 중복된 문서가 여러 개 발견된다면 검색 엔진은 해당 웹 사이트가 신뢰성이 떨어진다고 판단해서 검색 엔진 노출 시에 불이익을 준다.

  4) body 태그

  • 웹 브라우저에 노출되는 내용을 작성하는 영역
  • 웹 브라우저에서 표시되는 모든 내용은 body 태그 영역 안에 작성한다.

2-3. HTML의 특징 파악하기

  1) 블록 요소와 인라인 요소

  • body 태그에서 사용하는 태그 중에서 웹 브라우저의 공간 유무와 상관없이 hn 태그나 p 태그처럼 사용할 때마다 줄 바꿈되는 태그가 있다. 이런 태그로 작성한 코드를 블록 요소(block element)라고 한다.
  • 이와 반대로, a 태그나 span 태그처럼 공간이 부족할 때만 줄 바꿈되는 태그가 있는데, 이런 태그로 작성한 코드를 인라인 요소(inline element)라고 한다.

  2) 부모, 자식, 형제 관계

  • head 태그 안에 있는 meta 태그와 title 태그는 head 태그와 부모 자식 관계가 되고, meta 태그와 title 태그는 형제 관계가 된다.
  • HTML은 태그의 사용 위치에 따라 부모, 자식, 형제 관계를 맺는다.
  • 여기서는 가장 일반적인 부모, 형제, 자식 관계만 설명했지만, 상황에 따라 조상과 자손(후손) 관계까지 설명하는 경우도 있다.
  • 조상은 부모의 부모 태그를 말하고 자손(후손)은 자식의 자식 태그를 말한다.

  3) 줄 바꿈과 들여쓰기

  • 코드의 가독성 때문에, 줄 바꿈과 들여쓰기를 하는 것이 좋다.

3장. 실무에서 자주 사용하는 HTML 필수 태그 다루기

3-1. 텍스트 작성하기

  1) hn 태그

  • hn 태그는 제목이나 주제를 나타내는 텍스트를 표현할 때 사용한다.
  • hn 태그는 h1부터 h6 태그까지 6개가 있는데, 여기서 h는 heading을 의미하고 n에 들어가는 숫자는 중요도를 나타낸다. 즉, 같은 hn 태그라고 하더라도 h1 태그가 가장 중요하며 h6 태그가 상대적으로 가장 덜 중요합니다.
  • hn 태그로 작성된 텍스트는 검색 엔진에서 키워드로 인식한다. 따라서 검색 엔진 최적화(SEO, Search Engine Optimization)를 위해 본문에서 핵심이 되는 내용으로 제목이나 주제를 잘 선택해서 작성해야 한다.
    • 검색 엔진은 hn 태그를 검색할 때 h1 태그부터 단계적으로 검색한다. 만약 h4 태그를 사용하지 않고 h1, h2, h3, h5, h6 태그를 사용한다면 검색 엔진은 h1 태그부터 단계적으로 태그를 검색하다가 h4 태그가 없으면 h5, h6 태그를 검색하지 않는다. 따라서 hn 태그는 중간에 숫자를 건너뛰지 말고 h1 태그부터 단계적으로 사용해야 한다.

  2) p 태그

  • p 태그는 본문의 문단(paragraph)을 작성할 때 사용한다.
  • HTML에서는 제목이나 주제를 나타내는 텍스트가 아니면 대부분 본문이기 때문에 p 태그를 자주 사용한다.

  3) br 태그

  • br 태그는 문단에서 줄 바꿈할 때 사용한다.

  4) blockquote 태그

  • blockquote 태그는 출처에서 인용한 문단 단위의 텍스트를 작성할 때 사용한다. 이때 출처가 확실한 인용문은 cite 속성으로 출처 경로를 명시해야 한다.

  5) q 태그

  • q 태그는 문단 안에 텍스트 단위의 짧은 인용문을 작성할 때 사용할 수 있는 태그이다.
  • q 태그를 사용한 콘텐츠는 큰따옴표("")로 묶인다.

  6) ins와 del 태그

  • ins 태그는 새로 추가된 텍스트임을 나타낼 때 사용
  • del 태그는 기존에 있던 텍스트가 삭제된 텍스트임을 나타낼 때 사용
  • ins 태그를 사용한 콘텐츠에는 밑줄이, del 태그를 사용한 콘텐츠에는 취소선이 생긴다.

  7) sub와 sup 태그

  • sub 태그와 sup 태그는 각각 아래 첨자, 위 첨자에 해당하는 텍스트를 작성할 때 사용한다.

3-2. 그룹 짓기

  1) div 태그

  • div 태그는 블록 요소와 인라인 요소를 그룹으로 묶을 때 사용한다.

  2) span 태그

  • span 태그는 인라인 요소를 그룹으로 묶을 때 사용한다.

3-3. 목록 만들기

  1) ul 태그

  • 순서가 없는 비순서형 목록을 생성할 때 사용
  • ul 태그를 사용하면 목록 내용마다 글머리 기호(bullet point)가 붙는다.

  2) ol 태그

  • 순서형 목록을 생성할 때 사용
  • ul 태그와 마찬가지로 li 태그로 목록 내용을 구성한다.
  • ol 태그를 사용하면 목록 내용에 번호가 붙는다.

  3) dl 태그

  • 정의형 목록을 만들 때 사용
  • 정의형 목록은 용어와 용어 설명을 나열한 형태의 목록
  • dl 태그로 목록을 생성할 때는 li 태그 대신에 dt(description term) 태그로 용어를, dd(description details) 태그로 용어 설명을 작성한다.

3-4. 링크와 이미지 넣기

  1) a 태그

  • HTML에서 내부나 외부 링크를 생성
  • a 태그는 대상 경로를 의미하는 href 속성을 필수로 사용해야 하고, 그 외에 target, title 속성을 선택해서 사용할 수 있다.
  1. href 속성
  • href 속성은 a 태그로 생성하는 링크의 대상 경로를 입력할 때 사용한다. 속성값은 대상 경로의 주소(URL)이거나 내부 문서의 id 속성값일 수 있다.
  1. target 속성
  • target 속성은 a 태그로 링크를 생성할 때 대상이 연결되는 방식을 지정한다.
  • href 속성과는 다르게, target 속성은 생략가능하다.
  1. title 속성
  • 링크를 설명할 수 있는 텍스트를 작성한다.
  • a 태그의 콘텐츠만으로 표현하지 못한 설명을 적으면 된다.
  • 생략가능

  2) img 태그

  • HTML에서 이미지 객체를 삽입하고 싶을 때 사용
  1. src 속성
  • 삽입하려는 이미지의 경로를 입력하는 속성
  • HTML에서 이미지 경로는 항상 웹 브라우저에서 실행되는 HTML 파일의 위치가 기준
  • ./ : 현재 폴더
  • '../ : 상위 폴더
  • 삽입하려는 이미지 파일이 HTML 파일과 같은 폴더에 있는 images 폴더에 있고 이미지 파일의 이름과 확장자가 ‘beach.jpg’라면 현재 폴더를 의미하는 ./ 기호를 사용해 다음과 같이 작성한다.
    • <img src="./images/beach.jpg">
  • 또는 삽입하려는 beach.jpg 파일이 HTML 파일의 상위 폴더에 있는 images 폴더에 있다면, 상위 폴더를 의미하는 ../ 기호를 사용해 다음과 같이 작성한다.
    • <img src="../images/beach.jpg">
  • 이때 상위 폴더 기호는 여러 번 사용할 수 있고, 기호 한 번당 하나의 상위 폴더를 의미한다.
    • ex) ../../images/beach.jpg라고 적으면 상위 폴더의 상위 폴더를 의미하게 된다.
  1. alt 속성
  • 삽입한 이미지 객체를 설명할 수 있는 텍스트를 넣는다.
  • alt 속성으로 추가한 이미지 설명은 그림 위에 마우스를 올려 두면 확인할 수 있다.

웹 표준에서는 src 속성과 alt 속성을 필수로 사용하도록 권고하므로 두 속성은 꼭 넣어야 한다.

  3) 이미지 링크

  • a 태그 안에는 텍스트뿐만 아니라 여러 요소가 올 수 있다. 그중 img 태그를 a 태그 안에 사용하면 이미지를 클릭했을 때 특정 링크로 이동하게 할 수 있다. 이를 HTML에서는 이미지 링크 라고 한다.

3-5. 텍스트 강조하기

텍스트를 강조하는 태그로는 strong, em 태그가 있다.

3-6. 폼 구성하기

폼 관련 태그는 HTML에서 제공하는 태그 중 유일하게 사용자와 상호작용할 수 있는 태그이다. 관련 태그로는 form, input, label, fieldset, legend, select, button 태그가 있다.

  • form 태그: 폼 양식을 의미
  • input 태그: 한 줄짜리 입력 요소 생성
  • label 태그: 폼 요소에 이름을 붙일 때 사용
  • fieldset 태그: 관련 있는 폼 요소끼리 그룹을 지을 때 사용
  • legend 태그: 그룹 지은 요소에 이름을 붙일 때 사용
  • textarea 태그: 여러 줄 입력 요소 생성
  • select 태그: 콤보박스 생성
  • button 태그: 버튼 요소 생성

3-7. 표 만들기

표는 행과 열로 구성된 2차원 격자 모양의 데이터 형태를 의미한다. HTML에서는 다음과 같은 태그로 표를 구성한다.

  • table 태그: 표를 생성할 때 사용
  • tr, td, th 태그: 행과 열을 생성할 때 사용
  • caption 태그: 표의 제목을 지정할 때 사용
  • col, colgroup 태그: 열을 그룹화할 때 사용
  • thead, tfoot, tbody 태그: 행을 그룹화할 때 사용
  • th, td 태그와 rowspan, colspan 속성: 셀을 병합할 때 사용

3-8. 멀티미디어 설정하기

웹 페이지에서 대표적인 멀티미디어 요소로는 오디오와 비디오가 있다.

  • audio 태그: 오디오 요소를 삽입할 때 사용
  • video 태그 : 비디오 요소를 삽입할 때 사용

3-9. 웹 페이지 구조를 설계하는 시맨틱 태그

시맨틱 태그는 태그의 이름만으로 태그의 용도나 역할에 대한 의미가 명확한 태그를 말한다. 그리고 시맨틱 태그로 의미 있게 HTML 구조를 설계한 웹 페이지를 시맨틱 웹이라고 한다. HTML5에서는 웹 페이지 구조를 설계하기 위한 시맨틱 태그로 header, nav, section, article, aside, footer 태그가 추가됐다.

3-10. 태그 종류에 상관없이 사용하는 글로벌 속성

모든 태그에서 공통으로 사용할 수 있는 속성을 글로벌 속성이라고 합니다. 실무에서 자주 사용하는 글로벌 속성으로는 class, id, style, title, lang, hidden, data-* 속성이 있다.

profile
재규어
코딩이라는 정글에서 살아남기
이전 포스트

[HTML] 폼에서 사용하는 여러 가지 태그

다음 포스트

[코딩 자율학습: HTML + CSS + 자바스크립트] 4~7장

0개의 댓글