Keyword overview
PNG JPG SVG WebP GIF characteristic, pros and cons
The Code Card
Text tag
https://lshjju.tistory.com/780
Text tag
텍스트 태그는 단순히 글자를 화면에 보여주는 것을 넘어, 검색 엔진이나 스크린 리더에게 이 글자가 어떤 의미인지를 알려주는 아주 중요한 역할을 합니다.1. 블록 레벨 태그 (구조를 잡는 태그
lshjju.tistory.com
Web accessibility and <h> tag
https://lshjju.tistory.com/779
Web accessibility and <h> tag
웹 접근성에서 제목 태그( ~ )는 단순히 글자 크기를 조절하는 도구가 아니라, 문서의 **'내용 요약'**과 **'위계질서'**를 나타내는 설계도와 같습니다.스크린 리더 사용자가 웹사이트의 구조를 빠
lshjju.tistory.com
List tag
https://lshjju.tistory.com/781
List tag
웹 페이지에서 메뉴바, 게시글 목록, 용어 사전 등을 만들 때 반드시 사용되는 핵심 요소들입니다.1. 순서가 있는 목록 (Ordered List)항목 앞에 1, 2, 3과 같은 **순서(번호)**가 자동으로 붙는 목록입
lshjju.tistory.com
Table tag and property
https://lshjju.tistory.com/782
Table tag and property
표는 단순히 선을 긋는 것이 아니라, 행(Row)과 열(Column)의 관계를 명확히 정의하여 복잡한 데이터를 한눈에 보여주는 도구입니다.1. 테이블의 기본 구조 태그표를 만들 때는 바깥에서 안쪽으로
lshjju.tistory.com
Table example
https://codepen.io/lshjju/pen/mdrMvRP
grammar-table
...
codepen.io
Img tag and property
https://lshjju.tistory.com/783
Img tag and property
이미지 태그는 텍스트 위주의 문서에 활력을 불어넣으며, 정보를 직관적으로 전달하는 핵심적인 역할을 합니다.1. 태그의 기본 정의 태그는 웹 페이지에 이미지를 삽입할 때 사용합니다.이 태그
lshjju.tistory.com
PNG JPG SVG WebP GIF characteristic, pros and cons
https://lshjju.tistory.com/784
PNG JPG SVG WebP GIF characteristic, pros and cons
웹 환경에서 이미지는 전체 페이지 용량의 큰 비중을 차지하기 때문에, 상황에 맞는 포맷을 선택하는 것이 개발자의 핵심 역량 중 하나입니다.각 파일 형식의 특징과 현재 모던 웹의 흐름을 정
lshjju.tistory.com
Web accessibility and alt property
https://lshjju.tistory.com/785
Web accessibility and alt property
웹 접근성을 위해 alt 속성을 반드시 사용해야 하는 이유는 크게 세 가지입니다.1. 시각 장애인을 위한 '눈' 역할시각 장애인은 '스크린 리더'라는 프로그램을 통해 웹사이트를 읽습니다. 이미지
lshjju.tistory.com
Multimedia tag and property
https://lshjju.tistory.com/786
Multimedia tag and property
단순한 정적 이미지를 넘어 동영상과 오디오를 삽입하면 훨씬 풍부한 사용자 경험을 제공할 수 있습니다.1. 비디오 태그 웹 페이지 내에서 동영상을 재생할 때 사용합니다.동작 방식: 이미지와
lshjju.tistory.com
Types of multimedia file
https://lshjju.tistory.com/787
Types of multimedia file
웹브라우저는 별도의 플러그인 없이도 다양한 멀티미디어 파일을 직접 재생할 수 있는 강력한 기능을 갖추고 있습니다.주로 이미지, 오디오, 비디오의 세 가지 카테고리로 나뉘며, 각 파일 형식
lshjju.tistory.com
Hyper link tag and property
https://lshjju.tistory.com/788
Hyper link tag and property
하이퍼링크는 단순히 다른 페이지로 이동하는 기능을 넘어, 이메일 보내기, 전화 걸기, 특정 위치로 이동하기 등 다양한 연결 기능을 수행합니다.1. 태그의 정의와 기본 구조는 **Anchor(닻)**의 약
lshjju.tistory.com
Code training
04-1 텍스트 입력하기
제목을 나타내는 <hn> 태그
제목 텍스트 삽입하기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/heading.html
텍스트 단락을 만드는 <p> 태그, 줄을 바꾸는 <br> 태그
텍스트 입력하기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/p.html
분위기를 전환하는 <hr> 태그
인용할 때 쓰는 <blockquote> 태그
텍스트를 강조하거나 굵게 표시하는 <strong>, <b> 태그
기울인 텍스트를 표시하는 <em>, <i>, <cite> 태그
다양한 텍스트 관련 태그 사용하기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/text.html
그 밖에 다양한 텍스트 관련 태그
04-2 목록 만들기
순서 목록을 만드는 <ol> <li> 태그
순서 목록 작성하기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/list-1.html
순서 없는 목록을 만드는 <ul> <li> 태그
순서 없는 목록 사용하기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/list-2.html
설명 목록을 만드는 <dl> <dt> <dd> 태그
설명 목록 사용하기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/list-3.html
04-3 표 만들기
표의 구성 요소 알아보기
표를 만드는 <table> <caption> 태그
행을 만드는 <tr> 태그와 셀을 만드는 <td> <th> 태그
표 만들기
표에 테두리 추가하기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/table-1.html
표의 구조를 지정하는 <thead> <tbody> <tfoot> 태그
표의 구조 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/table-2.html
행이나 열을 합치는 rowspan, colspan 속성 알아보기
rowspan 속성을 사용해 행 합치기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/table-3.html
열을 묶어주는 <col> <colgroup> 태그
특정 열에 스타일 속성 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/table-4.html
특정 열을 묶어서 같은 스타일 속성 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/table-5.html
04-4 이미지 삽입하기
이미지를 삽입하는 <img> 태그
이미지와 대체용 텍스트 삽입하기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/image-1.html
이미지 파일 경로를 나타내는 src 속성
이미지를 텍스트로 대신 설명하는 alt 속성
이미지 크기를 조절하는 width height 속성
이미지 크기를 조절하는 속성 사용하기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/image-2.html
웹 요소에 설명 글 붙이기
<figure> 태그와 <figcaption> 태그
설명 글 붙이기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/figcaption-1.html
여러 이미지에 같은 설명 글 붙이기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/figcaption-2.html
srcset 속성 사용해서 이미지 삽입하기
w 서술자 사용하기
x 서술자 사용하기
04-5 오디오와 비디오 삽입하기
다양한 멀티미디어 파일을 삽입하는 <object> <embed> 태그
PDF 파일 삽입하기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/obj.html
<embed> 태그를 사용해 오디오 파일 삽입하기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/embed.html
웹브라우저에서 지원하는 멀티미디어 파일의 종류
오디오와 비디오 파일을 삽입하는 <audio> <video> 태그
오디오와 비디오 파일 삽입하기
오디오 파일 삽입하기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/audio-1.html
비디오 파일 삽입하기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/video-1.html
<audio> <video> 태그의 속성 알아보기
음악 계속 반복하기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/audio-2.html
섬네일 이미지 삽입하기
섬네일 이미지 삽입하기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/video-2.html
비디오 파일 자동 재생하기
비디오 파일 자동 재생하기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/video-3.html
04-6 하이퍼링크 삽입하기
링크를 삽입하는 <a> 태그와 href 속성
텍스트 링크 만들기
텍스트 링크 만들기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/link-1.html
링크를 새 탭에서 열어 주는 target 속성
새 탭에서 문서 열기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/link-3.html
한 페이지 안에서 점프하는 앵커 만들기
앵커 지정한 후 링크하기
https://github.com/lshjju/doit-hcj-new/blob/main/04/results/link-4.html
Copyright
이 포스팅의 깃허브코드와 강의 목차 저작권은 이지스퍼블리싱에 있습니다.
https://www.easyspub.co.kr/20_Menu/BookView/696/PUB
'Do it! HTML 웹 표준의 정석' 카테고리의 다른 글
| Form and input tag (0) | 2025.11.06 |
|---|---|
| HTML and Semantic tag (0) | 2025.11.06 |
| Web Development setting (0) | 2025.11.06 |
| About Web (0) | 2025.11.06 |