서론
이틀 동안 20,000자를 찍었다. 어제보다 오늘은 공부 분량이 더 많다. 일단 간소화할 부분은 따로 간소화해야 할 것 같다. 그리고 지난번처럼 실패하지 않을까 싶다.
일단 프로그래머스 데브코스 규정을 확인 후 소스 코드에 대해 고민 중에 있다. 전체를 올리면 안 된다는데 그러면 일부분 잘라서 올리는 것은 가능한 것일까? 일단은 일부분은 잘라서 올리는 것이 가능하다는 가정하에 본 글을 쓰도록 하겠다. 추후 문제가 된다면 삭제하도록 하겠다.
참, 위의 질문에 대한 프로그래머스 측의 답변이 몇 시간 뒤에 왔는데 소스코드 일부분을 자르거나 정리해서 올리는 건 가능하다고 한다.
그래서 이곳에 올라와있는 코드는 강의 자료의 일부만 올라와있거나, 내가 대대로 뜯어고친 거나, 상당히 보강한 것이 전부다. 고소미 걱정은 딱히 없을 것 같다. 😌
이번 일차는 HTML 학습이다.
<HTML>
콘텐츠
<h1> ~ <h6>
문서 구획 제목을 나타내는 태그이다. 그냥 H태그라고도, 헤딩(Heading) 태그라고도 부른다.
H태그는 <h1>부터 <h6>까지 사용 가능하다. 다만 h1 태그는 페이지 내에 '한 번만' 사용되는 것이 권장 규칙이다.
<!-- 각 단계가 잘 지켜진 h태그 -->
<body>
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h4>제목4</h4>
<h5>제목5</h5>
<h5>제목5</h5>
<h6>제목6</h6>
</body>
<!-- 근본도 없는 순서의 h태그 -->
<body>
<h1>제목1</h1>
<h3>제목3</h3> <!-- ??? -->
<h4>제목4</h4>
<h6>제목6</h6> <!-- ??? -->
<h3>제목4</h3> <!-- ??? -->
<h6>제목6</h6> <!-- ??? -->
</body>
이러한 H태그의 각 단계 겸 순서는 지켜져야 한다.
즉, h3 태그 다음으로 h4 태그가 와야 하는데. 정작 h4 대신, h6 태그를 집어넣는 하극상을 벌이면 안 된다는 소리다. 굳이 이런 걸 지켜야 하나 싶지만, H태그는 검색 엔진의 SEO 시스템 내에서 상당히 큰 비중을 갖는다. 다름이 아니고 검색 엔진이 H태그 자체를 제목 및 키워드로 인식하기 때문이다. 💰 벌려면 열심히 규칙을 지키도록 하자.
<p>
<p> 문단 </p>문서에서 하나의 문단(Paragraph)을 나타내는 태그다.
제목 태그와 함께 사용되기도 하고 단독으로 사용되기도 한다.
이러한 p에는 위-아래 여백이 들어간다. 그리고 p 태그 여백의 간격은 기본적으로 개행 태그인 br 태그의 1회 간격과 대충 비슷하다.
참고로 오해가 있을 수도 있는데, br 태그의 1회 '간격'이 p 태그의 여백과 비슷하다는 소리다. 간격이 같다는 말만 듣고, br 태그를 1회만 넣어버리면 해당 문장은 그냥 아래줄로만 넘어간다. p 태그와 br 태그를 시각 상에서 구분하려면 br 태그를 2회, 즉 한 칸 더 내려서 사용해야 한다.
<b> & <strong>
<b> 굵게 </b>
<strong> 강조 굵게 </strong>b 태그와 strong 태그, 둘 다 텍스트의 굵기를 조절할 수 있다.
- b 태그(bold; 굵게): 텍스트에 시각적인 굵은 글씨 효과를 부여한다.
- strong 태그: b 태그와 마찬가지로 굵은 글씨 효과를 부여하지만, 태그 자체에 '강조'의 의미가 포함되어 있다.
브라우저 상에서 실제로 보여지는 것도 똑같은 마당에, 글자 수를 빼면 이게 대체 무슨 차이냐고 할 수 있다. 그러나 이 둘은 '웹 접근성(Web Accessibility)'적인 차이가 있다.
시각이 불편한 사람들이 사용하는 스크린 리더에서, b 태그는 평문과 같이 읽는다. 그러나 strong 태그는 힘을 주어 말을 내뱉는다. 사실상 웹 접근성적인 측면에서 강조하는 걸 목표로 생겨난 태그인 셈이다.
이를 다르게 말하자면 일종의 시멘틱 요소이다.
<i> & <em>
<i> 기울임 </i>
<em> 강조 기울임 </em>i 태그와 em 태그, 둘 다 텍스트의 기울기를 조절할 수 있다.
- i 태그(italic; 이탤릭체): 텍스트에 시각적인 기울임 효과를 부여한다. 그리고 기술적인 용어, 외국어 문구, 소설 속 인물의 생각 등의 특정 이유를 목적으로, 다른 텍스트와 구분할 때 사용된다.
- em 태그(emphasize; 강조하다): i 태그와 마찬가지로 기울임 효과를 부여하지만, 태그 자체에 '강조'의 의미가 포함되어 있다.
b 태그 & strong 태그와 비슷하다는 걸 단번에 알 수 있을 것이다.
마찬가지로 i 태그는 기울임 효과와 구분 목적을 빼면 별 특징이 없으나, em 태그는 기울임 효과 외에도 스크린 리더에서 힘을 주어 소리를 내뱉는 특징이 있다.
이 또한 시멘틱 요소이다.
<u> & <ins>
<u> 일반 밑줄 </u>
<ins datetime="2023-12-20T12:12:12Z"> 수정 밑줄 </ins>u 태그와 em 태그, 둘 다 텍스트 아래에 밑줄을 표시할 수 있다.
- u 태그(underline; 밑줄): 시각적으로 텍스트에 밑줄 효과를 부여한다.
밑줄이 기본적으로 달리는 하이퍼링크와 혼동이 안 되도록 사용해야 한다.
밑줄-텍스트 간 간격 조절이 불가능하다.
display 속성을 먼저 건들지 않는 한, margin 속성이 작동하지 않는다. - ins 태그(insert; 삽입하다): u태그와 마찬가지로 밑줄 효과를 부여하지만, 새로 추가된 내용을 의미할 때 사용한다.
해당 태그는 del 태그와 세트로 묶여서 사용된다.
datatime이라는 밑줄 부분의 새로이 추가/수정 당시의 시간을 기록해놓는 속성을 부여할 수 있다.
datatime은 'YYYY-MM-DDThh:mm:ssTZD' 형식을 따른다.
[YYYY(년), MM(월), DD(일), T(날짜와 시간을 나누는 중간의 구분용 문자), hh(시간), mm(분), ss(초), TZD(표준시를 의미)]
u 태그는 단순해 보이는 태그이지만, 단순한 밑줄 용도는 아니다. 평문과는 다른, 잘못 적힌 텍스트(오타, 비문 같은 것)나 올바른 텍스트를 표시할 때 사용한다. 즉, u 태그는 텍스트 강조 목적이 아닌, 주석에 가까운 개념을 갖고 있다.
사실 원래는 단순한 밑줄 목적이 맞으나, 이젠 너무 남용된 나머지 CSS의 'text-decoration: underline' 속성 사용을 권장한다. 이건 따로 찾아보면서 발견한 HTML5의 특이한 점이라 할 수 있겠다.
ins 태그는 del 태그로 텍스트 내용을 삭제 후 대신 추가/수정한 말을 적을 때 사용한다. datatime은 이때 당시 추가/수정한 시간을 기록해 놓을 때 사용한다.
참고로 책 제목, 영화 제목, 컴퓨터 프로그램 제목 같은 인용된 작품의 제목이나 출처는 밑줄을 써서는 안 된다. 이런 경우에는 <cite>라는 인용구 태그를 사용하는 것이 올바르다.
<s> & <del>
<s> 취소선 텍스트 </s>
<del> 삭제 텍스트 </del>s 태그와 del 태그, 둘 다 텍스트 중간에 취소선을 표기할 수 있다.
- s 태그(strikethrough; 취소선): 시각적으로 텍스트에 취소선 효과를 부여한다.
더는 관계 없거나, 더 이상 유효하지 않거나, 대충 정확하지 않은 부분. 그러나 삭제될 부분은 아닌 곳을 나타낼 때 주로 사용된다. 즉, 강조의 의미를 부분적으로 갖고 있다. - del 태그(delete; 삭제): s 태그와 마찬가지로 취소선 효과를 부여하지만, 삭제/대체된 텍스트를 나타낼 때 사용한다.
해당 태그는 ins 태그와 세트로 묶여서 사용된다.
이미 확실하게 삭제되거나 ins 태그로 대체될 곳을 나타낼 때 사용한다.
문서, 텍스트 간 비교에 주로 사용된다.
어려워 보이지만, s 태그는 문제가 좀 존재하지만 아직 문서 내에 존치되어 있는 텍스트를 가리킬 때 쓰인다.
반면 del 태그는 의미론적으로 삭제된 상태나 마찬가지인 텍스트나, 이미 ins로 대체된 텍스트를 뜻한다. 보이고 있어도, 이건 삭제된 취급을 받는 것과 같다고 보면 된다.
즉, 강도만 따지자면 del 태그가 조금 더 강한 편이다. 이러한 구분이 힘든 사람들은 대체로 del 태그만 사용하는 편이다. 그리고 찾아보니 해외에서도 두 태그 간의 의미를 어떻게 해석하느냐에 따라 많이 헷갈려하는 편인 것 같다... 그냥 편하게 del 태그 사용하자.
번외로 위의 두 태그와 비슷한 strike 태그가 HTML4까지 존재했었다. 이는 del 태그가 HTML5에 나오면서 삭제되었다. 아마 s 태그와 비슷하고, 시멘틱 웹에 어울리지 않아서 그런 게 아닐까 싶다.
멀티미디어
<img>
<img src="/대충_이미지.jpg" alt="멋진 프로그래머가 춤을 추고 있다" title="멋진 프로그래머 이미지" width="222" height="333">img 태그는 문서 내에 이미지를 넣을 수 있는 태그이다.
- 가장 기본적인 이미지 삽입 태그이다.
- 'width'와 'height'로 이미지의 좌우 너비(가로), 상하 높이(세로)를 조정할 수 있다.
- 'src' 속성을 사용해 이미지의 경로를 넣으면 이미지가 출력된다.
- 'alt' 속성을 사용해 이미지 로딩에 문제가 발생했을 때 대체 텍스트를 띄울 수도 있다.
또한, 시각 장애인들은 alt 속성을 통해 이미지의 형태에 대한 설명을 스크린 리더로 듣는다.
즉, 오류 대비 뿐만 아니라 설명문도 겸한다.
그리고 alt 속성은 검색 엔진 크롤러. 즉, SEO 최적화에 영향을 끼치는 요소이기도 하다. - 'title' 속성을 사용해 이미지 소개를 위한 말풍선을 띄울 수도 있다.
이미지 위에 마우스를 올려보면 title 속성에 작성한 텍스트를 볼 수 있다.
width와 height로 크기를 조절하고, src로 경로를 지정할 수 있다고 되어 있다. 하지만 꼭 이 방법만이 크기 설정 및 경로 설정하는 방법은 아니다. 반응형 웹으로 변해가는 현실 속, 이를 위한 속성이 존재한다. 바로 'srcset' 속성이다.
<img
srcset="img_500x700.png 500w, img_300x450.png 300w, img_100x200.png 100w"
sizes="(min-width: 1400px) 500px, (min-width: 900px) 300px, 100px"
src="img_100x200.png"
alt="대충 크기 별 다양한 이미지입니다."
/>- srcset: [이미지 링크] [링크된 이미지의 원본 크기], [이미지 링크] [링크된 이미지의 원본 크기], [이미지 링크] [링크된 이미지의 원본 크기]...
이미지 링크는 말 그대로 해당 이미지의 경로이다.
원본 크기는 링크된 이미지의 원본 크기로, 원본 이미지의 넓이(px)를 기준으로 한다. 그냥 좌우 px 크기를 적어주고 그 옆에 w 디스크립터만 붙여주면 된다.
가급적이면 큰 이미지 -> 작은 이미지 순서로 작성하는 것이 좋다.
- 디스크립터(Descriptor; 설명자)가 뭐야?
srcset의 크기 단위.
디스크립터에는 x 디스크립터와 w 디스크립터가 있다.
w 디스크립터가 사용하기가 편하다. - x 디스크립터
사용자 장치(모니터)의 픽셀(화소) 밀도에 따라 달라지는 값이다.
저해상도 장치와 고해상도 장치에 서로 다른 이미지를 제공할 수 있다.
브라우저 개발자 도구의 콘솔에 window.devicePixelRatio라고 입력 시 자신의 모니터 x 디스크립터를 알 수 있다. - w 디스크립터
w라는 단어는 그냥 width의 약어이다. 즉, 너비 디스크립터이다.
반응형 이미지의 경우 픽셀(화소) 밀도에 따른 최적화 자동으로 포함된다.
그냥 좌우 px 너비이며, 이미지의 원본 너비에 따라 디스크립터를 결정할 수 있다.
가로 600px, 세로 200px 크기의 이미지가 있다면 w 디스크립터는 가로의 숫자를 가져온 600w라고 할 수 있다.
- 디스크립터(Descriptor; 설명자)가 뭐야?
- sizes: [(미디어 조건) 이미지를 최적화해서 출력할 크기], [(미디어 조건), 이미지를 최적화해서 출력할 크기], [(미디어 조건), 이미지를 최적화해서 출력할 크기]...
미디어 조건에는 min-width와 max-width를 사용할 수 있다.
min이냐 max이냐에 따라 뷰포트가 특정 값 이상인지 이하인지 구분 후, 소괄호 옆의 크기 값으로 srcset 이미지를 최적화해서 보여준다. - src: srcset 속성이 지원되지 않는 브라우저에는 해당 경로의 이미지가 출력된다.
이러한 설정을 이용해 srcset를 사용하면 크기 별 달라지는 이미지 종류를 볼 수 있다.
물론 모든 사람이 그러지는 않을 것이다.
아마 높은 확률로 가장 큰 크기의 이미지만 보이고, 나머지 이미지는 뷰포트의 크기를 조절해도 안 나올 것이다.
이는 브라우저 차원에서 의도한 사안이다.
https://stackoverflow.com/questions/28155861/google-chrome-version-40-srcset-attribute-problems
해당 스택 오버플로우 링크를 타고 들어가면 알 수 있지만, 브라우저는 가장 큰 이미지를 캐시에 저장하는 습관(?)이 있는데. 해당 원리에 따라 이전 이미지보다 큰 이미지를 발견하면 작은 이미지를 영구히 날려버리고 큰 이미지만 캐시에 갖고 있는 현상이다.(아마 srcset 내에서는 브라우저가 다른 이미지라고 해도 동일한 이미지라고 판단하는 모양이다...)
해당 현상을 보다 더 깊게 확인하고 싶으면, 브라우저의 시크릿 모드로 창을 최대한 줄이고 자신이 만든 srcset 포함 문서에 접속하면 된다. 그리고 브라우저(뷰포트)를 마우스로 끌어 잡고 천천히 키워나가면 확인할 수 있다.
이러한 현상을 해결할 방법은 단 하나.
바로 picture 태그와 scource 태그를 함께 사용하는 것이다.
<picture>
<source media="(min-width:1400px)" srcset="img_500x700.png">
<source media="(min-width:900px)" srcset="img_300x450.png">
<source media="(min-width:100px)" srcset="img_100x200.png">
<img src="img_100x200.png" alt="대충 크기 별 다양한 이미지입니다." style="width:auto;">
</picture>이렇게 하면 원하는데로 크기별 이미지가 딱딱딱 정상적으로 바뀌면서 작동한다.
사실 하나 밖에 없는 건 아니고, srcset를 사용하는 걸 유지하는 방법도 있다.
'개발자 도구 옵션 - 네트워크'에 있는 캐시 사용 중지를 클릭하면 새로고침을 할 때마다 뷰포트 크기에 따라 이미지가 변하는 걸 확인할 수 있다. 물론 해당 방법은 종종 안 되는 사람도 있다고 하니, 그냥 picture 태그를 쓰거나, 시크릿 모드를 껐다가 켜보며 확인하는 걸 추천한다.
<figure> & <figcaption>
<figure>
<img src="/대충_이미지.jpg" alt="멋진 전경">
<figcaption>대충 이미지인데, 자연의 멋진 전경을 보여줌.</figcaption>
</figure>figure 태그는 하나의 독립적인 콘텐츠로 분리하고 그에 대한 범위를 지정하는 태그이다.
반면 figcaption 태그는 figure 태그에 설명을 붙일 수 있는 태그이다.
- figure 태그는 캡션을 달기 위한 범위 지정 태그.
정확하게는 이미지, 다이어그램, 사진과 같은 문서의 주요 흐름과는 다소 독립적인 콘텐츠를 지정하는 목적을 가진 태그가 figure이다. - figcaption 태그는 지정된 범위에 대한 설명을 담은 캡션을 추가하는 태그.
캡션을 다는 태그이기에, 구조적으로 figure 요소의 맨 위나 맨 아래에만 위치할 수 있다.
비슷한 태그로 caption 태그가 있다. 해당 태그는 테이블에 대한 캡션을 제공하는데 그치는 반면, figcaption은 figure 범위에 따라 더 다양한 태그를 제공할 수 있다.
<video>
<!-- source를 사용하지 않은 단축형 video 버전 -->
<video src="/vid_1.mp4" poster="poster.png"> </video>
<!-- source와 이런저런 속성을 사용한 video 버전 -->
<video width="400" height="240" preload="none" poster="poster.png" autoplay muted controls>
<source src="/vid_1.mp4" type="video/mp4">
<source src="/vid_1.ogg" type="video/ogg">
이는 video 태그를 지원하지 않는 브라우저일 때 보이는 텍스트입니다.
</video>video 태그는 문서 내에 영상을 첨부할 수 있는 태그이다.
- 'src' 속성을 사용하여 영상의 경로를 설정해서 비디오를 문서 내에 첨부할 수 있다.
- 'poster' 속성을 사용하면 비디오가 로드되기 전 혹은 오류가 발생했을 때 포스터(썸네일)을 보여줄 수 있다.
- 'source' 속성을 사용하면 여러 타입의 비디오를 제공할 수 있다.
- 'controls' 속성을 사용하면 영상 컨트롤 막대를 표시할 수 있다.
(재생, 중단, 진행 바, 소리 조절 등 포함) - 'autoplay' 속성을 사용하면 영상을 자동 재생할 수 있다.
- 'loop' 속성을 사용하면 영상을 반복해서 재생할 수 있다.
- 'muted' 속성을 사용하면 영상이 재생되지만, 음소거 상태로 만들 수 있다.
- 'preload' 속성을 사용하면 웹페이지가 로드될 때 비디오 파일도 같이 로드되어야 하는지 여부를 명시한다.
<video preload="auto|metadata|none">
(auto = 전체 파일 로드, metadata = 메타데이터만 로드, none = 로드 없음)
<video width="300" controls="controls" preload="metadata">
<source src="/vid_bbb.mp4#t=0.5" type="video/mp4">
</video>특이한 속성으로 preload 속성을 metadata로 맞춘 다음, src에 적어둔 경로 옆에 #t=[시간]을 추가해 놓는 것이 있다.
과거에는 영상 썸네일을 설정하고자 해당 속성을 설정하곤 했다. 물론 이러한 속성은 poster가 있을 경우 지정하지 않아도 되기는 했다. 그리고 과거라는 말에서 알 수 있다시피, 요즘 브라우저는 알아서 첫 프레임을 썸네일로 적용한다.
해당 #t 문법은 썸네일이 아닌 다른 목적으로 만들어졌다. 기본적으로 다음을 뜻한다.
<!-- src="파일 이름.확장자#t=[시작시간],[종료시간]" -->
<video width="300" controls="controls" preload="metadata">
<source src="/vid_bbb.mp4#t=1:50:20,4:23:11" type="video/mp4">
</video>코드블럭 예시에서는 1시간 50분 20초부터, 4시간 23분 11초까지의 영상 재생을 목표로 하고 있다.
무조건적으로 시작시간부터 시작하며, 종료시간이 되면 영상은 알아서 멈춘다.
시작시간만 지정 시 해당 시간부터 시작할 수 있다. 반대로 시작시간 없이 쉼표(,)를 붙이고 그 뒤에 종료시간을 붙이면 0초부터 종료시간까지만 재생할 수도 있다.
<audio>
<!-- source를 사용하지 않은 단축형 audio 버전 -->
<audio src="/ado_1.mp3" type="audio/mpeg"> </audio>
<!-- source와 이런저런 속성을 사용한 audio 버전 -->
<audio preload="none" autoplay muted controls>
<source src="/ado_1.mp3" type="audio/mpeg">
<source src="/ado_1.ogg" type="audio/ogg">
이는 audio 태그를 지원하지 않는 브라우저일 때 보이는 텍스트입니다.
</audio>문서 내에 소리를 첨부할 수 있는 태그이다.
- 'src' 속성을 사용하여 오디오의 경로를 설정해서 오디오를 문서 내에 첨부할 수 있다.
- 'source' 속성을 사용하면 여러 타입의 오디오를 제공할 수 있다.
- 'controls' 속성을 사용하면 오디오 컨트롤 막대를 표시할 수 있다.
(재생, 중단, 진행 바, 소리 조절 등 포함) - 'autoplay' 속성을 사용하면 오디오를 자동 재생할 수 있다.
- 'loop' 속성을 사용하면 오디오를 반복해서 재생할 수 있다.
- 'muted' 속성을 사용하면 오디오가 재생되지만, 음소거 상태로 만들 수 있다.
- 'preload' 속성을 사용하면 웹페이지가 로드될 때 오디오 파일도 같이 로드되어야 하는지 여부를 명시한다.
<video preload="auto|metadata|none">
(auto = 전체 파일 로드, metadata = 메타데이터만 로드, none = 로드 없음)
전반적으로 video 태그와 비슷한 편이다. 참고로 controls 속성이 없으면 그냥 배경 음악만 몰래 까는 방식으로 활용할 수도 있다. 옛 공포 사이트의 소리 같은 것들은 이런 걸 이용해 만들어진 게 아닐까 싶다.
<svg>
svg(Scalable Vector Graphics)는 말 그대로 벡터 기반의 이미지이다.
- 일반 이미지는 픽셀 기반인 반면 svg는 수학 공식을 사용하여 그려지기 때문에 해상도의 영향을 받지 않아 확대/축소가 자유롭다.
- 주로 크기를 자주 바꾸어야 하는 작은 아이콘에서 많이 사용된다.
- 해상도가 다양하게 변화하는 최근 기기 특성상 아이콘 외에 로고 등 주요 이미지에도 많이 사용되고 있다.
- <img> 태그처럼 svg 파일을 불러올 수 있고, <svg> 태그를 그대로 사용할 수도 있다.
- 코드로 이루어져 있기에 스타일을 변경하거나, 자바스크립트를 사용해 간단한 기능을 svg에 추가할 수도 있다.
리스트
<ul> & <li>
<ul>
<li>김치 라면</li>
<li>초코 라면</li>
<li>매운 라면
<ul>
<li>폭탄 라면</li>
<li>불꽃 라면</li>
<li>열김치 라면</li>
</ul>
</li>
<li>민트 라면</li>
</ul>
정렬되지 않은 목록(Unordered List) 태그. 종종 순서 없는 목록이라고도 불린다.
- 기본 불릿(bullet) 형식으로 목록을 그린다.
- 여기서 말하는 불릿 형태는 현재 ●, ○, ■, □ 같은 도형을 뜻한다.
- 이 부분처럼 처음에 '●'로 시작하는 목록이 리스트 중 정렬되지 않은 목록이라고 할 수 있다.
- li 태그를 사용하여 목록을 구성할 수 있고 다양한 태그를 포함할 수도 있다.
- ul 태그의 자식 요소로는 li 태그만 들어와야 한다.
- 하위 리스트를 만들려면 li 태그 안에 ul, ol 태그를 사용하면 된다.
참고로 HTML5부터는 마커(앞에 붙는 도형) 종류 변경을 할 수 있게 해주는 ul의 type 속성을 더 이상 지원하지 않는다. 그렇기에 마커 종류 변경 시 CSS의 list-style-type 속성을 사용하여야 한다.
<ol> & <li>
<ol type="1" start="20" reversed>
<li>김치 아이스크림</li>
<li>초코 아이스크림</li>
<li>매운 아이스크림
<ol type="a">
<li>폭탄 아이스크림</li>
<li>불꽃 아이스크림</li>
<li>열김치 아이스크림</li>
</ol>
</li>
<li>민트 아이스크림</li>
</ol>
정렬된 목록(Ordered List) 태그. 종종 순서 있는 목록이라고도 불린다.
- 숫자/순서 형식으로 목록을 그린다.
- li 태그를 사용하여 목록을 구성할 수 있고 다양한 태그를 포함할 수도 있다.
- ol 태그의 자식 요소로는 li 태그만 들어와야 한다.
- 하위 리스트를 만드려면 li 태그 안에 ol, ul 태그를 사용하면 된다.
- 사용 가능한 속성의 개수는 3개이다.
- 'reversed' 속성: 순서 마커(숫자)의 순서를 내림차순으로 정렬함.
- 'start' 속성: 순서 마커의 시작값을 정함.
- 'type' 속성: 어떤 순서 마커 종류를 사용할지 결정함.
1, A, a, I, i와 같은 종류가 있다.
원래는 start 속성과 type 속성이 지원 중단이었으나, HTML5에 오면서 다시 지원되고 있다. 이는 ul 태그와의 차이점 중 하나이다.
<dl> & <dt> & <dd>
<dl>
<dt>참치 라면</dt>
<dd>참치 라면은 맛있고 짜다.</dd>
<br>
<dt>민트 라면</dt>
<dd>민트 라면은 최고로 맛있고 감미롭다.</dd>
<br>
<dt>초코 라면</dt>
<dd>초고 라면은 달짝지근하고 많다.</dd>
<br>
<dt>매운 라면</dt>
<dd>아주 매움.</dd>
<dd>진짜로 매움.</dd>
<dd>진짜진짜진짜 매움.</dd>
<br>
<dt>나물 라면</dt>
<dt>짜장 라면</dt>
<dt>어묵 라면</dt>
<dd>그냥 맛있는 라면들임.</dd>
</dl>
설명 목록 태그이다. 정의 리스트라고도 부른다.
- dl 태그(description-list): 정의 목록을 나타내는 태그이다. 용어에 대한 제목과 그 제목에 대한 설명을 포함한다.
- dt 태그(description-term): 정의될 용어의 제목에 대한 제목이다.
dt 태그를 여러 개 작성하고 하나의 dd 태그를 작성하는 것으로 여러 개의 용어를 설명할 수 있다. - dd 태그(description-description): 정의될 용어의 제목이 있는데, 해당 제목에 대한 설명을 나타낸다.
위와 반대로, 여러 개의 dd 태그가 dt 태그 하나를 가질 수도 있다.
이러한 설명 목록 태그들은 주로 용어사전이나 '키-값'이 있는 쌍의 목록을 나타낼 때 사용된다.
리스트는 평소에도 자주 쓰던 것이라서 그런지 참 쉽다. 심지어 타 태그에 비해 속성들도 적은 편이다.
표 (테이블)
<table>
<caption>국수집 메뉴표</caption>
<thead>
<tr>
<th>매움</th>
<th>일반</th>
<th>재료 추가</th>
<th>빈 공간</th>
</tr>
</thead>
<tbody>
<tr>
<td>김치 국수</td>
<td>가락 국수</td>
<td>어묵 국수</td>
<td>국수가 따로 없어요</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5000원</td>
<td>11000원</td>
<td>7500원</td>
<td>0원(상품 없음)</td>
</tr>
</tfoot>
</table>
<table> 태그는 HTML 상에서 표를 만드는 태그이다.
해당 태그 내부에 다양한 태그를 추가함으로써 표를 구성해 나갈 수 있다.
- <tr> 태그로 행을 구분할 수 있다. 보통 로우(row)라고 부른다.
- <td> 태그로 열을 생성할 수 있다. 보통 셀(cell)이라고 부른다.
- <th> 태그로 열 제목을 생성할 수 있다. 즉, 상단 좌우 줄에 글자를 두껍게 만든 제목을 만들 수 있다.
- 테이블 속성
- 'scope' 속성: 스크린 리더 사용자를 위한 속성으로, 열 혹은 행을 구분할 때 사용된다.
scope="row"(행) / scope="col"(열)와 같은 형태로 태그 내에 삽입된다. - 'colspan' 속성: 열 병합 속성이다. 즉, 오른쪽에 있는 칸을 병합한다.
colspan="3"와 같은 형태로 태그 내에 삽입된다. - 'rowspan' 속성: 행 병합 속성이다. 즉, 아래에 있는 칸을 병합한다.
rowspan="5"와 같은 형태로 태그 내에 삽입된다.
- 'scope' 속성: 스크린 리더 사용자를 위한 속성으로, 열 혹은 행을 구분할 때 사용된다.
- 테이블 영역 명시 태그 3개
- <thead> 태그는 제목 그룹 태그이다. 해당 태그 안에 헤더를 넣음으로써 그룹을 만들 수 있다.
쉽게 말하자면 테이블의 헤더를 그룹화. - <tbody> 태그는 표 본문 요소 태그이다. 해당 태그 안에 본문을 넣음으로써 그룹을 만들 수 있다.
쉽게 말하자면 테이블의 본문을 그룹화. - <tfoot> 태그는 표 바닥글 요소 태그이다. 해당 태그 안에 바닥글 요소를 넣음으로써 그룹을 만들 수 있다.
- <thead> 태그는 제목 그룹 태그이다. 해당 태그 안에 헤더를 넣음으로써 그룹을 만들 수 있다.
- <caption> 태그로 표 설명을 적을 수 있다. 표가 가진 데이터에 대한 설명을 적는 것이 주목적이다.
- <colgroup> 태그로 열을 그룹으로 묶을 수 있다. 즉 아래에 있는 것들을 전부 그룹으로 묶는다.
- <col> 태그는 colgroup 태그의 자식으로, 열 단위를 나눌 수 있다.
span 속성을 사용하여 몇 열을 그룹으로 묶을지 설정할 수 있다.
<col span = "4">는 해당 열부터 오른쪽 4번째까지의 열만 그룹으로 묶는다는 뜻이다.
- <col> 태그는 colgroup 태그의 자식으로, 열 단위를 나눌 수 있다.
HTML4라면 tfoot은 tbody보다 먼저 오지만, HTML5에서는 thead, tbody, tfoot이라는 상식적인 순거로 배치된다. 또한, HTML5에 오면서 기존에 있던 많은 속성들이 사용 중단되었다.
아이프레임
<iframe>
<iframe src="https://example.com" title="여기 예제 사이트임">
</iframe>
현재 문서 안에 다른 HTML 페이지를 삽입할 수 있는 태그이다.
- 다양한 속성이 아이프레임에 존재한다.
- 'src' 속성으로 원하는 HTML 문서 또는 URL을 넣을 수 있다.
- px 단위 기반의 'height', 'width' 속성을 통해 아이프레임으로 불러온 자료의 크기를 정할 수 있다.
- 'srcdoc' 속성으로 src를 통해 불러올 아이프레임 자료 대신 자신이 원하는 HTML 내용을 사용할 수 있다.
일종의 덮어쓰기 혹은 내가 직접 작성하는 아이프레임이다.
src 속성과 함께 사용 시 srcdoc가 우선권을 갖는다. 반대로 말하자면 브라우저 지원 상의 이유로 srcdoc 속성이 먹통이면 src 속성이 대신 사용된다. - 'name' 속성으로 아이프레임 요소의 이름을 정한다.
- 'sandbox' 속성으로 호출되는 아이프레임 자료에 제한을 건다.
자바스크립트, 플러그인, 페이지 호출 제한 등 일종의 보안성 향상 옵션을 제공해 준다.
- 외부 페이지를 불러올 수 있기 때문에 불러온 외부페이지의 영향을 받을 수 있다.
- 'name' 속성을 지정하면, <a> 태그의 'target' 속성을 사용해 iframe에서 문서 또는 URL이 열리게 할 수 있다.
아이프레임은 현재는 권장되지 않는 방법이다. XSS 공격에 취약해지는 등, 보안에 상당히 문제가 많기 때문이다. 또한 사용성이 떨어져서 오류가 발생할 가능성도 커지며, 크롤링 시스템에 문제를 이르키기도 한다.
양식 태그
<form action="index.html" method="post" autocomplete="on">
<label for="age">내 나이: </label>
<input id="age" type="number" name="d_age" placeholder="나이 작성">
<label for="gen">성별 선택: </label>
<select id="gen" name="d_gen">
<option>여자</option>
<option>남자</option>
</select><br>
<label for="food">선호 음식: </label>
<input id="food" type="text" name="d_food" placeholder="먹고 싶은 음식 작성" disabled>
<label for="telnum">음식점 전화번호: </label>
<input id="telnum" type="tel" name="phone" placeholder="000-0000-0000"><br>
<label for="spoon">수저 여부: </label>
<input id="spoon" type="checkbox" name="spooncheck" value="true" required>
<label for="count">음식 개수: </label>
<input id="count" type="radio" name="foodcount" value="1">1
<input id="count" type="radio" name="foodcount" value="2">2
<input id="count" type="radio" name="foodcount" value="3">3
<input id="count" type="radio" name="foodcount" value="4">4
<input id="count" type="radio" name="foodcount" value="5">5
<br>
<button type="submit">데이터 전송</button>
<button type="reset">초기화</button>
</form>
<form> 태그는 정보를 제출하기 위한 태그이다.
- 정보를 입력하고 선택할 수 있는 다양한 폼 내부 태그들이 있다.
- <input>: 단순 입력 컨트롤. 그냥 사용자가 데이터를 입력받을 수 있는 공간 겸 태그이다.
'value' 속성을 이용해 기본 내용 입력이 가능하다.
'name' 속성을 이용해 input의 이름을 지정할 수 있다. (label과 연결 가능)
'type' 속성의 값에 따라 받을 수 있는 input의 유형이 달라진다. (기본값: text)- type 목록: text, button, checkbox, color, tel, date, datetime-local, month, week, time, email, file, hidden, image, number, password, radio, range, reset, submit, search, url
- <textarea>: 여러 줄을 입력할 수 있는 텍스트 공간.
콘텐츠를 넣으면 사용자가 입력하지 않아도 표시되는 기본값이 된다.
'cols', 'rows' 속성으로 기본 너비와 높이를 지정할 수 있다. 해당 너비/높이는 글자 크기 기준으로 정의된다. - <label>: 입력 컨트롤과 연동되는 라벨을 정의. 그냥 설명 작성 태그이다.
'for' 속성에 연결하고자 하는 태그의 id를 써놓으면 label을 클릭 시 해당 태그가 선택된다.
label 태그 안에 input을 넣으면 자동으로 for -> id 연결과 같은 처리를 해준다.
id 속성 값은 결코 중복되는 곳이 있어서는 안 된다. (for에 적는 id 값을 말하는 게 아니다.) - <fieldset>: 관련 폼 요소들을 그룹화.
- <legend>: fieldset에 대한 제목 캡션.
- <select>: 드롭다운 목록. 셀렉트박스라고도 한다.
- <optgroup>: select 내에 있는 선택지 일부(option)를 그룹으로 묶음.
- <option>: 드롭다운 목록의 옵션을 설정.
첫 번째 option이 가장 먼저 드러나는 이름이 된다.
option에 value를 선언하지 않을 경우 해당 태그의 콘텐츠(내부 내용)가 value를 대체한다.
- <button>: 누를 수 있는 버튼을 생성.
'type' 속성을 submit으로 하면 제출 형식으로, reset으로 하면 초기화 버튼으로 변한다.
<button></button> 사이 공간에 html 태그들을 넣을 수 있는데, 블록 레벨 태그는 들어가지 않는다.
disabled 속성을 가질 수 있다.
- <input>: 단순 입력 컨트롤. 그냥 사용자가 데이터를 입력받을 수 있는 공간 겸 태그이다.
- 다양한 속성들이 존재한다.
- 'action' 속성으로 정보가 제출되었을 때 페이지를 이동시킬 수 있다.
서버의 url 혹은 html 링크를 입력. - 'method' 속성으로 정보가 제출될 때 처리 방식을 결정할 수 있다.
get은 제한적인 내용만 전송 가능. (url에 받는 데이터가 안 찍힘. 보안이 중요한 민감한 데이터 전송용.)
post는 입력 내용의 길이에 제한을 받지 않음. (보안성은 없기에 검색 같은 단순 기능에 사용.) - 'autocomplete' 속성으로 사용자가 이전에 사용한 값을 기반으로 자동 완성을 보여준다.
- 'enctype' 속성으로 서버 전송 시 데이터가 어떻게 인코딩 되는지를 정함.
post 방식으로 전송할 때 사용됨. - 'novalidate' 속성으로 폼 데이터를 서버에 전송 시 해당 데이터의 유효성 검사가 이뤄지지 않았다는 걸 명시함.
- 'action' 속성으로 정보가 제출되었을 때 페이지를 이동시킬 수 있다.
이외에도 폼 내부 태그들에 들어가는 다양하면서도 공통적인 속성들이 존재한다. readonly 속성은 사용자가 수정할 수 없는 읽기 전용으로 만들고, required 속성은 form이 제출될 때 필수 입력 사항으로 만들고(입력을 안 하면 해당 내용을 적으라고 브라우저 차원에서 알려준다.), placeholder 속성은 input과 textarea에 부가 설명을 입력할 수 있고, disabled 속성은 요소가 비활성화되어 사실상 깡통이 되어 제출 시 값이 전송되지 않는다. 이외에도 다양한 속성들이 있다.
사실상 폼 태그는 입력된 데이터를 서버로 전송하고, 전송된 모든 데이터를 웹 서버가 웹 프로그램으로 넘겨서 처리하고, 해당 처리 결과에 따른 HTML 웹페이지를 웹 서버로 보내고, 그걸 다시 사용자 브라우저에 전송해서 보여주는 인터렉티브 한 태그라고 할 수 있다.
주의사항 / 추천 사이트
주의사항
- 대소문자 구분하자.
태그는 대문자라도 작동하나, 소문자가 권장사항이다.
추후 어떤 문제가 생길지 모름. - 콘텐츠가 있는 태그들은 닫는 태그 생략하지 말자.
브라우저가 어느 정도는 보정해 주지만 일정 이상은 보장 못한다.
물론 셀프 클로징이 가능한 태그들은 제외. - 개발은 가능한 한 영어로.
당연하지만, 특히 class, id는 가능한 한 영어로.
콘텐츠는 별 상관없음. - id 값은 다른 요소와 겹치는 일 없이 1번만 사용.
말 그대로 고유 id임. - 깊이 계층 구조(내어쓰기, 들여쓰기) 유지.
코드 유지 보수 측면이나, 추후 다른 사람이 수정할 때 편함. - 태그 순서 이상하지 않게 잘 작성하기.
예: '<p><b>이런 식으로 하지 말자.</p></b>' - 같은 의미를 가진 태그 중첩하지 말자.
특히 굵게나 기울기를 중첩하지는 말자.
b 태그와 strong 태그처럼 비슷하게 동작하는 것도 마찬가지로 중첩하지 마자. - 링크를 걸 때 사용하는 a 태그 안에 버튼 태그를 넣어서는 안 된다.
일종의 기능 중첩 상태에 놓임.
HTML에는 몇 가지 주의사항이 있다. 위의 내용이 그 목록이다.
추천 사이트
TCP School
- https://tcpschool.com/html/intro
MDN web docs
- https://developer.mozilla.org/ko/
W3School
위는 웹 개발에 도움이 되는 추천 사이트들이다.
나중에 참고하거나 공부하도록 하자.
사족
거의 6시간? 9시간? 가까이 작성한 것 같다. 원래는 이렇게까지 늘어질 것 같지 않았는데, 이런저런 상세한 정보를 찾아보다 보니 훨씬 늦어진 것 같다. 더군다나 이번 일차의 글자수는 약 20,000자에 달하고 있다. 2일 동안 합쳐서 20,000자를 넘겼는데 하루 만에 또 그걸 갱신한 것이다.
물론 의미가 없지는 않았다. TIL를 기록하면서 난생처음 본 HTML 태그(특히 멀티미디어 부분이 어려웠다.)들을 이해하고 외우는 데 성공했기 때문이었다. 역시 필기가 최고의 공부법이다. 물론 내 팔은 무진장 아프지만 말이다. 마우스 패드나 키보드 패드를 아무래도 조만간 바꿔야 할 것 같다. 취직도 못했는데 손목이 나가면 그것만큼의 낭패는 없으니까.
문뜩 든 생각인데, CSS 공부와 JS 공부는 대체 어떻게 될까. 그래도 프로그래밍 언어이니 HTML보다는 분량 면에서 조금은 낫지 않을까 싶기도 한데, 또 모르겠다. 그래도 앞으로 취업하려면 열심히 해야 한다. 쉰다고 달라지는 건 멘탈 밖에 없으니 말이다. 쉬어도 주말에 쉬고, 평일은 열심히 하자.
아무튼 이곳에 방문해 주신 모든 분들,
항상 힘내시고 하는 일이 다들 잘 되기를 기원합니다!
그리고 오신 김에 왼쪽 아래의 공감을 눌러주시거나, 댓글을 남겨주시면 정말 땡큐하겠습니다.
귀찮으시다면 어쩔 수 없고요! 😆
'💻 종합 개발 주제 > 📚 웹앱 데브코스' 카테고리의 다른 글
| 4일차 데브코스 pt.2 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2023.12.22 |
|---|---|
| 4일차 데브코스 pt.1 - 클라우딩 어플리케이션 엔지니어링 TIL (0) | 2023.12.21 |
| 2일차 데브코스 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2023.12.20 |
| 1일차 데브코스 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2023.12.19 |
| NULL일차 데브코스 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2023.12.19 |
