1: 인터넷과 웹 기초
- 인터넷 vs 웹: 인터넷은 네트워크, 웹은 그 위에서 동작하는 데이터 공유 시스템.
- 클라이언트/서버 구조: 서버는 요청에 따라 자료 제공, 클라이언트는 요청을 보냄.
- 웹 주소(URL) 구성: 프로토콜, 도메인, 문서 경로.
- HTTP 프로토콜과 상태 코드: 요청-응답 사이클, 200 OK, 404 Not Found 등.
- IP, DHCP, DNS 설명.
2: HTML 기초
- HTML 문서 구조: <!DOCTYPE html>, <html>, <head>, <body>.
- 요소(Element)와 속성(Attribute): 모든 텍스트는 태그로 감싸야 함.
- 문단, 제목, 목록(unordered, ordered, description) 작성 방법.
- DOM(Document Object Model) 이해.
3: 이미지, 링크, 페이지 구성
- 이미지 삽입: <img> 태그 (필수 속성: src, alt).
- 링크 생성: <a> 태그 (href 속성).
- 페이지 레이아웃: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>.
- 인라인 요소와 블록 요소 구분.
- 특수문자(escape characters) 및 <figure> 사용.
4: 테이블과 폼 기본
- 테이블 구조: <table>, <tr>, <td>, <th>.
- 셀 병합: colspan, rowspan 사용.
- 테이블 접근성 향상: caption, scope, <thead>, <tbody>, <tfoot>.
- 폼 기본: <form>, <input>, action, method (GET/POST 방식).
6: 폼 심화
- 폼 컨트롤 종류: 텍스트 입력, 비밀번호 입력, 라디오 버튼, 체크박스, 드롭다운 메뉴, 파일 업로드.
- HTML5 폼 입력 타입: 이메일, URL, 전화번호, 날짜/시간, 숫자 입력 필드.
- 접근성 향상: <label>, <fieldset>, <legend> 사용.
7: HTML5와 멀티미디어
- HTML5 주요 특징:
- 플러그인 없이 오디오, 비디오 지원
- <canvas> API로 그래픽 처리
- 드래그 앤 드롭 지원
- 비디오/오디오 포맷:
- 비디오: MPEG-4(.mp4), Ogg Theora(.ogv)
- 오디오: MP3(.mp3), WAV(.wav), Ogg Vorbis(.ogg)
- 비디오/오디오 삽입 방법:
- <video>, <audio> 태그 사용
- controls, autoplay, poster, 여러 소스 지원
- 외부 동영상 삽입: YouTube 링크 삽입.
Images / Links / Organizing page content
Adding images
<img>tag를 사용하는 것으로 이용
empty element로 닫는 태그가 없다
반드시 두 가지 속성를 가져야 한다
1. src = 브라우저에게 이미지 파일이 어디 있는지 알려준다
2. alt = 이미지에 대한 텍스트 설명을 제공한다
추가 속성 = title = 이미지에 대한 추가 정보를 제공하며, 사용자가 이미지 위에 마우스를 올렸을 때 표시된다
웹에서 사용되는 일반적 이미지 포맷은 JPEG, PNG, GIF이다
Height and Width of images
이미지에는 두 가지 속성이 있음
1. height = 이미지의 높이를 픽셀 단위로 지정한다
2. width = 이미지의 너비를 픽셀 단위로 지정한다
이미지는 페이지의 나머지 코드보다 로딩이 느릴 때가 많다. 따라서 이미지의 크기를 미리 지정하는 것이 좋은 습관이다. 그러면 브라우저의 아직 로딩되지 않은 이미지에 맞춰 적절한 공간을 남기고, 그외 텍스트를 미리 렌더링 할 수 있다
요즘은 CSS로 이미지 크기를 지정하는 경우가 많아지고 있다
Where to place images in your code
이미지를 코드 안에 어디에 배치하는가에 따라서 화면에 표시되는 방식이 달라진다
1. 문단 앞에 이미지 패치
이미지를 넣은 후, 문단은 새로운 줄에서 시작된다
2. 문단의 시작 부분에 이미지 삽입
텍스트의 첫 번째 줄이 이미지의 아래쪽에 정렬된다
3. 문단 중간에 이미지 삽입
이미지가 문단 안의 단어들 사이에 끼어 배치된다
Adding Links
링크는 <a>element를 사용하여 만든다
사용자는 <a></a>의 사이에 있는 어떤 것이라도 클릭할 수 있다
연결하고 싶은 페이지는 href attribute를 사용하여 지정한다
다른 웹사이트를 연결할때는 사이트의 전체 웹 주소를 입력하야 한다. 이를 절대경로 URL(absolute URL)이라고 한다
Linking to other pages on the same site
같은 사이트 안에 있는 다른 페이지로 링크를 걸때는 상태 경로(relative URLs)를 사용할 수 있다
상대 경로는 브라우저에게 파일이 어디에 있는지 짧은 방법으로 알려주는 것이다
Directory Structure
규모가 큰 웹사이트에서는 사이트의 각 다른 섹션에 해당하는 페이지들을 새로운 폴더에 정리해서 넣는 것이 좋은 방법이다
Opening links in a new window
링크를 새 창에서 열고 싶다면 a tag에 target attribute를 사용해야 한다
_blank를 사용한다
Linking on a specific point in a page
페이지 안의 특정 지점으로 링크하기
1. 목적지 설정
목적지 element에 id attribute를 추가하여 고유 이름을 넣어준다
이를 fragment identifier라고 한다
2. 목적지로 링크하기
a element에 href attribute에 링크 위치 id를 넣어준다
이때 a에는 #id로 작성해야 한다
Organizing Page Content
HTML5는 일반적인 웹페이지나 애플리케이션의 구역에 의미를 부여하는 새로운 요소를 도입함
1. <header>
웹 페이지의 시작 부분이나 섹션 또는 기사 상단에 주로 등장하는 소개 자료를 위해 사용됨
페이지, 섹션 소개에 사용된다
2. <nav>
navigation
개발자들에게 웹사이트의 탐색영역을 의미적으로 식별할 수 있는 방법을 제공한다
3. <main>
문서의 주요 콘텐츠를 감싼다
하나의 문서에는 main요소가 2개 이상 존재하면 안된다
사이드바, 내비게이션, 저작권 정보 등 문서마다 반복되느 콘텐츠를 포함해서는 안된다
4. <aside>
추가적인 정보를 나타내기 위해 사용된다
주변 콘텐츠와 관련이 있어야 한다
5. <section>
웹 문서가 길 경우, section element를 사용해서 주제별로 나눌 수 있다
6. <article>
독립적으로 존재할 수 있거나, 다른 문맥에서도 재사용될 수 있는 콘텐츠에 사용한다
section이 여러개의 article로 구성할 수도 있고
aricle을 여러개의 sction으로 나눌 수도 있다
7. <footer>
페이지나 article의 끝부분에 일반적으로 오는 정보를 나타낸다
작성자 정보, 저작권 정보, nav링크 등
Inline elements
HTML5에서는 텍스트 수준의 semantic element를 사용하여 문장이나 구절이 의미를 부여할 수 있다
하지만 줄바꿈을 일으키지 않기에 inline element라고 한다
<em></em> = 글자를 휘게 한다
<strong></strong> = 글자에 볼드를 넣어준다
Renewed Elements
b, i, u, s, small elements는 각각 굵게, 기울임, 밑줄, 취소순, 작은 글자를 의미한다
Short quotations
q element를 사용해서 텍스트 흐름속 짧은 인용문을 markup할 수 있음
Id and class attributes
id속성은 문서 안의 고유 식별자를 부여할 때 사용된다
하나의 문서에 같은 id를 두번 사용하면 안된다
class속성은 요소를 개념적으로 같은 그룹으로 분류하는 데 사용한다
여러 요소가 같은 class를 공유할 수 있다
Generic Elements (div and span)
콘텐츠를 완벽하게 설명할 수 있도록 사용자가 정의할 수 있는 두가지 일반 요소를 제공함
1. div
콘텐츠의 구획을 나타냄
2. span
현재 html에 적절한 요소가 존재하지 않는 단어, 구절을 감싸는데 사용된다
이 일반 요소들은 id, class를 통해 의미, 문맥을 부여할 수 있다
Divide it up with a div
div 요소는 페이지 안의 콘텐츠나 요소들을 논리적으로 그룹화할 때 사용된다
div로 묶음으로써 이들이 개념적으로 서로 관련되어 있다는 것을 명확히 할 수 있다
Get inline with span
span element는 div와 동일한 이점을 제공하지만 문장이나 구절에 사용된다는 차이점을 가지고 있다
줄바꿈 = line break를 유발하지 않는다
텍스트와 다른 인라인 요소만 포함할 수 있다
Special Characters = 특수문자
일부 문자들은 표준 아스키 문자 집합에 포함되어 있지 않다
<와 같은 문제를 사용하면 태크의 시작으로 해석하듯, 이러한 문자를 사용하려면 excape처리를 해주어야 한다
escape란 문자 자체를 입력하는 대신 숫자 코드나 이름으로 대체해서 표현하는 것을 의미함
특정 문자를 참조하는 방법
1. 할당된 숫자 값 = numeric entity 사용
2. 미리 정의된 축약 이름 = nemed entity 사용
Figures
독립적인 콘텐츠를 나타냄
보통 하나의 단위로 참조됨
일반적으로 이미지, 일러스트레이션, 다이어그램, 코드 조각 등이 들어간다
'공부 > WebPage' 카테고리의 다른 글
| Web page html 공부 정리 6: 폼 심화 (1) | 2025.04.27 |
|---|---|
| Web page html 공부 정리 4: 테이블과 폼 기본 (0) | 2025.04.26 |
| Web page html 공부 정리 2: HTML 기초 (0) | 2025.04.26 |
| Web page html 공부 정리 1: 인터넷과 웹 기초 (0) | 2025.04.26 |
| HTML 요소 공부 (0) | 2025.04.14 |
