02강-리스트와 이미지와 하이퍼링크와 테이블

리스트의 종류

• HTML에서 리스트는 크게 ul, ol, dl로 구분한다
• ul은 순서가 없는 항목의 나열에 사용한다
• ol은 순서가 있는 항목의 나열에 사용한다
• dl은 용어와 설명, 항목과 값처럼 대응 관계를 가진 내용을 표현할 때 사용한다

관련 요소

• li
• dt
• dd

순서 없는 리스트 ul

• ul은 순서가 중요하지 않은 항목의 집합을 표현할 때 사용한다
• 각 항목 앞에는 기본적으로 블릿 기호가 표시된다
• 메뉴, 내비게이션, 일반 항목 나열 등에 많이 사용된다

특징

• 각 항목은 li 요소로 작성한다
• 블릿 기호의 모양은 CSS로 변경할 수 있다
• 블릿 기호를 제거하고 메뉴 구조로 사용하는 경우도 많다

중요한 점

• 단순 줄바꿈이나 문단 나열과 달리 ul은 목록이라는 의미를 가진다

리스트 항목을 만드는 li

• li는 리스트의 각 항목을 나타내는 요소이다
• ul 또는 ol 안에서 사용한다
• 기본적으로 항목별 줄바꿈과 들여쓰기가 적용된다

기본 원칙

• 시작 태그와 종료 태그를 모두 사용하는 것이 좋다
• 종료 태그를 생략할 수는 있지만 협업과 가독성 측면에서는 권장되지 않는다

중첩 리스트

• 리스트 안에 또 다른 리스트를 넣을 수 있다
• 이 구조를 이용하면 다단계 목록을 표현할 수 있다

활용 예

• 대분류와 소분류
• 상위 메뉴와 하위 메뉴
• 드롭다운 메뉴 구조

순서 있는 리스트 ol

• ol은 순서 자체가 의미를 가지는 항목의 나열에 사용한다
• 각 항목 앞에는 기본적으로 번호가 표시된다

사용 예

• 절차
• 단계
• 조리 순서
• 가입 순서
• 처리 과정

특징

• 항목은 li 요소로 작성한다
• 기본 번호 형식은 1, 2, 3 ... 이다

ol에서 사용할 수 있는 속성

번호 형식 지정

• 숫자
• 영문 대문자
• 영문 소문자
• 로마자 대문자
• 로마자 소문자

시작 번호 지정

• 특정 번호부터 시작할 수 있다

역순 표시

• 번호를 역순으로 표시할 수 있다

항목 번호 조정

• 특정 항목부터 번호를 변경할 수 있다

주의

• 번호 모양을 바꾸는 작업은 CSS로 처리하는 경우가 많다

정의 리스트 dl

• dl은 정의 리스트를 나타내는 요소이다
• 용어와 설명, 항목명과 값처럼 대응 관계를 가지는 내용을 표현할 때 사용한다

적절한 예

• 용어와 설명
• 질문과 답변
• 항목명과 값
• 제품 사양과 상세 정보

구성 요소

• dt
• dd

dt와 dd의 의미

dt

• 설명의 대상이 되는 용어 또는 항목명을 나타낸다

dd

• dt에 대한 설명 또는 값을 나타낸다

예시 구조

• 프로세서 / Intel i5
• 저장공간 / 512GB
• 질문 / 답변

이미지를 표현하는 img

• img는 웹페이지에 이미지를 삽입하는 요소이다
• 인라인 요소이므로 내용이 차지하는 범위만큼 공간을 사용한다
• 정보 전달, 시각적 보조, UI 구성 등에 널리 사용된다

기본 속성

• src
• alt

src와 alt의 역할

src

• 이미지 파일의 위치를 지정하는 필수 속성이다

alt

• 이미지를 불러오지 못할 때 대신 표시할 텍스트이다
• 스크린 리더가 읽는 설명으로도 사용된다
• 웹 접근성 측면에서 매우 중요하다

작성 원칙

• 의미가 있는 이미지는 내용을 구체적으로 설명한다
• 장식용 이미지는 alt=""처럼 비워서 처리할 수 있다

이미지 파일 형식과 경로

파일 형식

• 사진 계열
  • WebP
  • AVIF
  • JPG
• 로고, 아이콘, 단순 그래픽 계열
  • PNG
  • SVG

경로 지정 방식

• 절대 경로
• 상대 경로

이미지 크기와 모양 처리

• 이미지의 크기를 HTML 속성으로 일부 지정할 수는 있다
• 그러나 테두리, 여백, 정렬, 장식과 같은 시각적 표현은 CSS로 처리하는 것이 원칙이다

주의

• 예전 방식의 border 속성 사용은 지양한다
• 디자인 관련 처리는 CSS에 맡겨야 한다

반응형 이미지

• 화면 크기에 따라 이미지가 자연스럽게 변하도록 구성해야 한다
• 특히 모바일 환경에서는 이미지가 부모 영역을 넘지 않도록 처리하는 것이 중요하다

핵심 원리

• 이미지 너비를 부모 영역 기준으로 제한한다
• 높이는 비율에 맞게 자동 조정되도록 한다

이미지 지연 로딩

• 페이지에 이미지가 많으면 초기 로딩 속도가 느려질 수 있다
• 이를 줄이기 위해 실제 화면에 보일 때 이미지를 불러오는 방식을 사용할 수 있다

효과

• 초기 로딩 속도 개선
• 불필요한 요청 감소
• 긴 페이지에서 성능 향상

해상도에 따라 이미지를 선택하는 srcset

• 같은 이미지라도 크기가 다른 파일을 여러 개 준비할 수 있다
• 브라우저는 화면 해상도와 환경을 고려해 적절한 파일을 선택한다

예시 개념

• 500px 이미지
• 1000px 이미지
• 2000px 이미지

장점

• 필요 이상으로 큰 이미지를 내려받지 않아도 된다
• 품질과 성능을 함께 고려할 수 있다

화면 조건을 지정하는 sizes

• sizes는 이미지가 실제 화면에서 어느 정도 크기로 사용될지를 브라우저에 알려준다
• 브라우저는 srcset과 sizes를 함께 참고하여 적절한 이미지를 선택한다

사용 예

• 모바일에서는 전체 너비 사용
• 태블릿에서는 절반 너비 사용
• 데스크톱에서는 일부 너비만 사용

picture 요소

• picture는 단순히 해상도만 다른 이미지를 선택하는 것보다 더 넓은 목적에 사용된다
• 파일 형식이 다르거나 화면 조건에 따라 다른 이미지를 보여주고 싶을 때 사용한다

활용 예

• AVIF 지원 브라우저에서는 AVIF 사용
• 그렇지 않으면 WebP 사용
• 모바일에서는 세로형 이미지 사용
• 데스크톱에서는 가로형 이미지 사용

즉, 여러 후보 중에서 조건에 맞는 이미지를 선택하게 하는 구조이다

하이퍼링크를 만드는 a 태그

• a는 하이퍼링크를 만드는 요소이다
• HTML 문서가 일반 문서와 구별되는 핵심 특징 가운데 하나가 링크 기능이다

기본 속성

• href

사용 범위

• 내부 페이지 이동
• 외부 사이트 이동
• 특정 위치 이동
• 파일 다운로드
• 메일 연결
• 전화 연결

href에 들어갈 수 있는 값

href에는 다양한 종류의 대상이 들어갈 수 있다

• 내부 페이지 주소
• 외부 사이트 주소
• 파일 주소
• 이메일 주소
• 전화번호
• 문자 전송 주소
• 같은 페이지 안의 특정 위치
• 다른 페이지 안의 특정 위치

링크 텍스트 작성 원칙

• 링크 텍스트는 사용자가 무엇이 열리는지를 판단하는 기준이 된다
• 따라서 모호한 표현보다 목적이 드러나는 표현을 사용하는 것이 좋다

예시

• 강의 계획서 PDF 다운로드
• 회의록 전체 파일 다운로드(zip, 25MB)

target 속성

• 링크를 현재 창이 아니라 새 창 또는 새 탭에서 열 수 있다
• 이 경우 보안과 관련된 추가 설정을 함께 사용하는 것이 좋다

주의

• 새 창 열기 설정만 하고 보안 설정을 하지 않으면 취약점이 생길 수 있다

download 속성

• 링크를 클릭했을 때 파일을 바로 내려받도록 만들 수 있다
• 저장되는 파일 이름을 따로 지정할 수도 있다

주의

• 모든 파일에 동일하게 적용되는 것은 아니다
• 브라우저 보안 정책상 같은 출처 파일에서 주로 안정적으로 사용된다

페이지 내부 이동 앵커

• 문서 안의 특정 위치로 바로 이동할 수 있다
• 이때는 href="#이름"과 id="이름"을 함께 사용한다

활용 예

• 목차에서 본문으로 이동
• 맨 위로 가기
• 긴 문서에서 특정 항목으로 이동

이미지 맵

• 하나의 이미지 안에 여러 개의 클릭 영역을 지정할 수 있다
• 각 영역마다 서로 다른 링크를 연결할 수 있다

형태

• 사각형 영역
• 원형 영역
• 다각형 영역

주의

• 반응형 환경에서는 좌표 관리가 어렵다
• 모바일 화면에서 깨질 가능성이 높아 실무에서는 사용을 지양하는 편이다

iframe 요소

• iframe은 현재 페이지 안에 다른 페이지를 삽입하는 요소이다
• 외부 서비스를 포함할 때 제한적으로 사용한다

대표 예

• 유튜브 영상 삽입
• 지도 삽입
• 결제 창 삽입

주의

• 일반적인 페이지 삽입 용도로 남용하지 않는다
• 명확한 목적이 있을 때만 사용한다
• 접근성을 위해 title 속성을 함께 쓰는 것이 좋다

테이블의 의미

• table은 표 형식의 데이터를 표현할 때 사용한다
• 성적표, 일정표, 게시판 목록처럼 행과 열 구조를 가진 데이터에 적합하다

중요 원칙

• 예전처럼 페이지 전체 레이아웃을 만드는 용도로 사용하면 안 된다
• 레이아웃은 CSS의 Flexbox나 Grid로 구성해야 한다
• table은 오직 표 데이터 표현에 사용해야 한다

table의 기본 구성 요소

• table: 표 전체
• tr: 행
• td: 일반 데이터 셀
• th: 제목 셀
• caption: 표 제목

정리

• 행은 tr
• 셀은 td, th
• 표 제목은 caption

th와 td의 차이

th

• 제목 셀을 나타낸다
• 기본적으로 굵게 표시되고 가운데 정렬된다
• 열 제목이나 행 제목에 사용한다

td

• 일반 데이터 셀을 나타낸다
• 실제 데이터 내용이 들어가는 칸이다

caption의 역할

• 표 전체의 제목을 나타낸다
• table 시작 직후에 두는 것이 원칙이다
• 시각적 제목일 뿐 아니라 표의 의미를 설명하는 정보이므로 접근성 측면에서도 중요하다

테이블 모양은 CSS로 처리

• 테두리
• 셀 간격
• 정렬
• 배경색
• 글자색

이와 같은 시각적 표현은 CSS가 담당한다

주의

• 예전 방식의 HTML border 속성 사용은 지양한다

셀 병합

• 테이블에서는 셀을 세로 또는 가로로 합칠 수 있다

세로 병합

• 여러 행에 걸쳐 하나의 셀로 합친다

가로 병합

• 여러 열에 걸쳐 하나의 셀로 합친다

활용 예

• 시간표
• 일정표
• 여러 열을 묶는 제목 행

주의

• 병합이 많아질수록 구조가 복잡해진다
• 유지보수와 모바일 대응이 어려워질 수 있다

테이블의 구조화

• 표를 머리글, 본문, 바닥글로 나눌 수 있다
• 이렇게 하면 의미 구조가 더 분명해지고 스타일 적용도 쉬워진다

구성 영역

• 머리글
• 본문
• 바닥글

장점

• 의미 구분이 명확해진다
• 스타일링이 쉬워진다
• 출력이나 스크롤 처리에도 유리하다

thead와 tbody와 tfoot

• thead: 표 머리글
• tbody: 표 본문
• tfoot: 표 바닥글

활용 예

• thead: 항목명, 제목
• tbody: 실제 데이터
• tfoot: 합계, 평균, 요약

열 단위 스타일 지정 colgroup

• 표는 셀 단위와 행 단위뿐 아니라 열 단위로도 스타일을 지정할 수 있다
• 이때 사용하는 것이 colgroup과 col이다

장점

• 각 셀마다 따로 스타일을 지정하지 않아도 된다
• 열 전체에 동일한 규칙을 한 번에 적용할 수 있다

정리

• 리스트는 ul, ol, dl로 구분하며 목적에 맞게 사용해야 한다
• 순서 없는 항목은 ul, 순서가 중요한 단계는 ol, 용어와 설명 구조는 dl이 적절하다
• 이미지는 img로 표현하며 src와 alt가 핵심 속성이다
• 반응형 이미지, 지연 로딩, srcset, picture 등을 통해 성능과 품질을 함께 고려할 수 있다
• 링크는 a 요소로 만들며 다양한 대상과 연결할 수 있다
• 테이블은 표 데이터 표현에만 사용해야 하며 레이아웃 용도로 사용하면 안 된다
• 테이블은 table, tr, th, td, caption을 중심으로 구성된다
• 이번 내용에서도 HTML은 구조와 의미를 담당하고 시각적 표현은 CSS가 담당한다는 원칙이 중요하다