1. html 확장자와 htm 확장자
- html과 htm은 서로 같은 형식의 파일이다. htm을 쓰는 이유는 도스(MS-dos), Window3.x 시점부터 확장자의 문자 길이를 3글자로 제한했기 때문에 당시엔 htm확장을 사용했는데 호환성을 위해 남겨 둔 것이다.
2. html 요소의 태그
- html의 태그명은 사실 대소문자를 구분하지 않고 사용할 수 있지만 관례상 소문자를 사용한다.
3. HTML5 <video> , <audio> 태그
HTML5에서는 웹브라우저 플러그인 없이 오디오를 재생하거나 비디오를 볼 수 있다.
<video poster="썸네일 역할" controls="controls" autoplay>
<source src="abc.mp4" type="video/mp4"></source>
</video>
<audio src="abc.mp3" controls="controls" type="audio/mp3"></audio>4. HTML5에 추가된 <a>태그의 download 속성
<a href="/examples/images/tcpschool_logo.png" download>
<img src="/examples/images/tcpschool_logo.png" alt="tcpschool" width="196" height="26">
</a>target으로 연결되지 않고 해당 콘텐츠가 다운로드됨을 명시함 다만 브라우저별 지원 여부가 미 정확함
5. HTML5 추가 속성
1. multiple (boolean타입으로 기본값 false)
- input 태그의 multiple속성은 input요소에 사용자가 둘 이상의 값을 입력할 수 있음을 명시한다.
해당 속성을 사용할 수 있는 input type은 file, email이다. email은 , 쉼표를 구분하여 여러 개의 값을 명시하며, 파일은 선택 시 CTRL, SHIFT를 활용한 다중 선택이 가능하다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML input tag - multiple attribute</title>
</head>
<body>
<form action="/examples/media/action_target3.php" method="post" enctype="multipart/form-data">
업로드할 파일 : <input type="file" name="upload[]" multiple><br>
다중 이메일 : <input type="email" name="user_email" multiple>
<input type="submit">
</form>
</body>
</html>
- select 태그에도 multiple 속성이 있으며 size 속성과도 연관성이 있다.
select 태그의 설정한 multiple은 두 개 이상의 option값을 선택할 수 있으며 드롭다운에 표현되는 옵션 개수가 4개로 조정됩니다. (default size=4)
ㄴ. input 태그의 accept태그는 서버에 보낼 파일의 형식을 지정할 수 있습니다.
<form action="/examples/media/action_target.php" method="get">
이름 : <input type="text" name="st_name"><br>
학번 : <input type="text" name="st_id"><br>
사진 : <input type="file" name="st_picture" accept="image/*"><br>
<input type="submit">
</form>오직 file타입만 가능합니다.
ㄷ. autocomlete속성
- input 요소에서 사용작 이전에 입력했던 값들을 기반으로 드롭다운 옵션을 보여줍니다.
on/off를 사용하여 명시해야 합니다.
autocomplete를 사용하는 type은 color, datepickers, email, password, range, search, tel , text타입입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML input tag - autocomplete attribute</title>
</head>
<body>
<form action="/examples/media/action_target.php" method="get">
text : <input type="text" name="st_name"><br>
: <input type="text" name="st_id" autocomplete="on"><br>
: <input type="text" name="department" autocomplete="off"><br>
search : <input type="search" name="department" autocomplete="off"><br>
datepickers : <input type="datepickers" name="department" autocomplete="off"><br>
color : <input type="color" name="department" autocomplete="off"><br>
<input type="submit">
</form>
</body>
</html>
ㄹ. pattern속성
- HTML5에 정의된 속성으로 정규표현식으로 FORM전송 시 input.value값을 검사할 때 사용되는 정규표현식을 명시합니다.
6. <datalist> 속성
datalist속성은 input요소를 입력할 때 미리 정의해둔 드롭다운 옵션을 리스트로 보여주어 사용자에게 값을 유도할 수 있습니다.
<form action="/examples/media/action_target.php" method="get">
학과 : <input type="text" name="st_department" list="depList"><br>
이름 : <input type="text" name="st_name"><br><br>
<datalist id="depList">
<option value="컴퓨터공학과"></option>
<option value="영어영문과"></option>
<option value="경영학과"></option>
<option value="사회체육과"></option>
</datalist>
<button type="submit">제출하기</button>
</form>
7. CSS
a. Table관련 CSS
- table-layout의 auto는 사용자가 지정한 width에 한정하여 테이블의 크기를 유동적으로 조절합니다. fixed값을 사용할 경우 해당 크기 값으로 테이블이 고정됩니다.
- border-collapse는 표 테두리가 separate(분리)될 것인지 collapse(상쇄)될 건지 정하는 옵션으로 separate를 사용 시 각 셀마다 고유의 테두리가 생성됩니다.
- border-spacing은 인접한 셀의 테두리 간격을 지정합니다.
- caption-side는 표의 caption이 지정될 경우 해당 caption의 위치를 지정하며 default값은 top입니다.
b. Text관련 CSS
- text-color라는 속성은 없으며 대신 font-color를 사용한다.
- text-transform은 text의 대소문자를 지정하는 속성이다.
- text-shadow는 글자의 수평, 수직, 색, 번짐을 통해 그림자를 생성할 수 있다.
c. margin css
- 속기 속성
margin: top,right,bottom,left 4개
: top, right/left, bottom 3개
: top/bottom, right/left 2개
: top/bottom/right/left 1개
'웹 프로그래밍 기초' 카테고리의 다른 글
| [HTML] Mark Up literal (0) | 2021.06.06 |
|---|---|
| HTML/CSS 웹 프로그래밍 복습(2) (0) | 2021.05.19 |
| Staging website (0) | 2021.04.14 |
| Ant 경로 패턴 (0) | 2020.06.24 |
| [CSS] 속성 선택자 (0) | 2020.06.15 |
댓글