BOOK : 모던 웹을 위한 HTMl5 + CSS3 바이블
| 이미지 태그 | |
| <img> | 이미지를 생성할때 사용 |
| <img>태그의 속성들 | |
| src / alt | 이미지의 경로 지정 / 이미지 없을 때 나오는 글자 지정 |
| width / height | 이미지의 너비 지정 / 이미지의 높이 지정 |
이미지 크기는 아는데 아직 이미지가 없을 때 사용하는 좋은 방법 중 하나로
-> dummyimage.com 사이트에서 크기 이미지 이미지 얻어 와서 사용
| 오디오 태그 | |
| <audio> | 플러그인의 도움 없이 음악을 재생할 수 있게 만들어 주는 태그 |
| <audio>태그의 중요 속성들 | |
| src / preload | 음악 파일의 경로 지정 / 음악 재생 전 모두 불러올지 지정 |
| autoplay / loop / controls | 음악을 자동 재생할지/ 반복할지/ 재생 도구를 출력할지 지정 |
<body>
<!-- XHTML5 표기 방법 -->
<audio src="Kalimba.mp3" controls="controls" autoplay="autoplay"></audio>
<!-- HTML5 표기 방법-->
<audio src="Kalimba.mp3" controls autoplay></auduio>
</body>
<source> 태그 -> 웹 브라우저 미세 버전에 따라서 실행되지 않을 수 있다.
브라우저마다 지원하는 확장자 형식이 다르기 때문이다.
이러한 문제를 해결하고자 만들어진 태그가 바로 <source> 태그
<source> 태그는 <audio> 태그 또는 <video> 태그 안에 입력하는 태그
<body>
<audio controls="controls">
<source src="Kalimba.mp3" type="audio/mp3" />
<source src="Kalimba.ogg" type="audio/ogg" />
</audio>
</body>
type 속성을 입력하지 않아도 상관은 없다. BUT 입력하지 않으면 웹 브라우저가 음악 파일을 내려받은 뒤에 재생 가능한 파일인지 확인하므로 트래픽이 낭비된다. 따라서 type 속성을 꼭 지정해주자.
| 비디오태그 | |
| <video> | 플러그인 도움 없이 웹 표준만으로 동영상 재생 가능 |
| <video>태그의 중요 속성들 | |
| src / poster | 비디오 파일 경로지정 / 비디오 준비 중일 때의 이미지 경로 지정 |
| preload | 비디오 재생하지 전에 모두 불러올지 지정 |
| autoplay / loop / controls | 비디오 자동 재생할지 / 반복할지 / 재생 도구 출력할지 지정 |
| width / height | 비디오 너비 지정 / 높이 지정 |
<body>
<!-- poster 속성사용 -->
<video poster="http://placehold.it/640x360"
width="640" height="360" controls="controls">
<!-- source -->
<source src="wildlife.mp4" type="video/mp4" />
<source src="wildlife.webm" type="video/webm" />
</video>
</body>
poster 속성은 동영상이 대기 상태일 때 표시할 이미지를 의미한다.
| 입력양식 태그 | |
| <form> | 입력 양식 태그 |
| <textarea> | 여러 줄의 글자를 입력할 때 사용 |
| <select> | 여러 개의 목록에서 몇 가지를 선택할 수 있는 입력 양식 요소 사용 |
| <form> 태그의 속성들 | |
| action / method | 입력 데이터의 전달 위치 지정 / 전달 방식 선택 |
| <textarea> 태그의 속성들 | |
| cols / rows | 태그의 너비를 지정한다 / 높이를 지정한다 |
Get 방식 -> 주소에 데이터를 입력해서 보내는 방식 - 주소에 데이터를 입력하므로 / 크기 한정
Post 방식 -> 주소변경 X 비밀스럽게 Data 전달 - 별도로 택배를 붙여 데이터 전송 / 용량 제한 X
| <form> 과 <input> 태그 | |
| <input> | 사용자에게 정보를 입력받는 기능 수행 |
| <input> 태그의 속성 중 type 의 속성 값 <input type="---"> | |
| button / checkbox / file | 버튼 생성 / 체크박스 생성 / 파일 입력 양식 생성 |
| hidden / image / password | 보이지 않습니다 / 이미지 형태 생성 / 비밀번호 양식 생성 |
| radio / reset / submit | 라디오 버튼 생성 / 초기화 버튼 생성 / 제출 버튼 생성 |
| text | 글자 입력 양식 생성 |
HTML5 버전 추가된 type 속성의 속성 값
( color / date / datetime / datetime-local / email / month / number / range / search / tel / time / url / week )
일반적으로 <input> 태그는 form 태그 안에 있다. ↓
<textarea> 태그와 <select> ↓
<label> 태그는 <input> 태그를 설명하는 데 사용한다 ↓
| 공간 분할 태그 | |
| <div> | block 형식으로 공간을 분할 |
| <span> | inline 형식으로 공간을 분할 |
block 형식 - 차곡차곡 쌓아 올려지는 형식
inline 형식 - 글자가 한 줄에 차례차례 들어가는 형식
공간을 분할해야 하는 가장 큰 이유는 우리가 원하는 레이아웃을 구성하기 위해서이다.
| block 형식 태그 | inline 형식 태그 |
| div 태그 | span 태그 |
| h1 태그 ~ h6태그 | a 태그 |
| p 태그 | input 태그 |
| 목록 태그 | 글자 형식 태그 |
| 테이블 태그 | |
| form 태그 |
block 형식과 inline 형식은 일반 태그에도 적용된다. (h1/p/a/i 등등)
| HTML 시멘틱 구조 태그 | |
| header | 헤더를 의미 |
| nav | 내비게이션을 의미 |
| aside | 광고와 같이 페이지의 내용과는 관계가 적은 내용들 |
| section | 여러 중심 내용을 감싸는 공간을 의미 |
| article | 글자가 많이 들어가는 부분을 의미 |
| footer | 푸터를 의미 |
의미론적 태그 - semantic delement
div 태그로 코딩 ↓
시멘틱 태그로 코딩 ↓
화면에 표시되는 결과는 같지만 시멘틱 태그로 작성된 코드가 의미를 구분하기 훨씬 쉽다.
review
image / audio / video / 태그는 쓰는 속성이 비슷하면서도 사용하는 속성과 속성 값들이 조금씩 달랐다.
image / audio / video / 각 태그 밑에 <source> 코드 쓰는 것을 알았다.
<type> 코드도 삭제 가능한데 사용하는 이유가 트래픽 시간을 줄이기 위해서라는 점이 새로웠다.
운영 시간 감소를 위해서도 노력해야 하는 코딩.
<label for="--"> / <input id="--">
텍스트를 클릭하였을 때 칸으로 연결되는 것이 신기하였고,
무엇을 입력하여야 하는지 명확히 보여줄 수 있어서 이용자가 이해하기 좋을 것 같다.
<form> / <input type="--">
여러 가지 타입들만 잘 활용해도 평소 보던 로그인 창이나 설문조사 사이트 같은 거는 쉽게 만들 수 있을 거 같았다.
radio - 단일 선택 / checkbox - 다중 선택
block형식과 inline형식
레이아웃을 짤 때 어떤 형식으로 적용되는 태그인지 확인해야 할 필요가 있다고 느꼈다.
시멘틱 태그
확실히 div태그로만 표현된 코드보다
시멘틱 태그로 표현한 코드들이 눈으로 구분하기도 쉽고, 의미를 단번에 알 수 있었다.
나 혼자 일하고 나 혼자 페이지를 만드는 것도 아니므로 다른 사람이 보더라도
쉽게 확인하고 수정할 수 있도록 알맞은 태그로 알맞은 위치에 코딩해야 된다고 느꼈다.
주석으로 표시해 놓는 것과 의미는 같다고 생각한다.
'Front-end > HTML' 카테고리의 다른 글
| HTML : HTML 태그 기본 (0) | 2021.12.16 |
|---|---|
| HTML - HTML5 개요 및 기본 환경 설정 (0) | 2021.12.16 |