-
포트폴리오 자세한 주석 필수!
-
주석 방법 ctrl + /
-
이미지 사용시(아래와 같은 이미지만 사용할 것 pixabay)
- 상업적 용도 사용 가능
- 출처 안 밝혀도 됨
- 사업적 용도로 사용하여 돈을 벌었는지가 주요 쟁점
-
폰트 사용시
- 무료폰트(개인 무료 폰트, 상업 용도 무료 폰트)
- 가급적 대기업 무료 폰트 사용(한글 제외)
- 폰트는 저작권 확인하고 써야한다.
text level semantics
텍스트 레벨 요소의 특징
-
요소안의 컨텐츠 크기만큼만 영역 점유
-
자식으로 섹션 그룹핑컨텐츠 사용 불가
ex) a, span, button
-
b: 굵은 글꼴 표현
-
strong: 굵은 글꼴에 중요도를 통해 강조할 때 사용
-
br: 줄바꿈 태그
-
wbr: 박스에서 한줄로 모두 표시 안될때만 줄바꿈
-> css word-break: 텍스트 오버플로우할 때 줄바꿈 디폴트값 normal로 설정되어 있음(단어단위 줄바꿈)
-> white-space: nowrap 으로 설정 시 wbr 지정한 곳으로 줄바꿈
cjk(한중일)만 break-all(문자단위로) 기본설정 -
a: 하이퍼 텍스트 만들 때 사용
1. href 속성을 통해 경로를 지정해 줄 수있다
2. 자바스크립트를 통해 페이지 이동 지정X
-> 에이전트가 href를 읽어서 a 어디로 이동하는지 읽기 때문에
3. a 태그만 텍스트레벨요소중에서 자식으로 섹션 그룹핑컨텐츠 사용가능
4. a 자식으로는 a나 button 갖지 않는다
5. scroll-behavior: 스크롤할 때 부드럽게 이동할 수있게 해준다
ex) scroll-behavior: smoth
6. a href="index.txt" download="a.txt"(IE 지원X)
->index.txt를 다운받을 수있게 해준다. 파일이름은 a.txt로 뜬다
7. a hef="tel:+82027777777"
-> 전화를 걸게해준다
8. a hef="mailto: ~~@gmail.com"
-> 메일로 연결해준다
9. target 속성
- target="_blank"
-> 새창으로 열림
- 해쉬링크: 페이지 내부 이동에 사용(id=three 부분으로 이동)``` <a hrf="#three"> <section id="three"> ``` -
i: 기울임 글꼴 나타냄(italic)
-> HTML5에서 의미 생김 주언어가 한글이지만 영어로 표기되었을 경우 사용(주위와 구분해야 하는 부분 표현하기 위해 사용) -
em: 기울임 글꼴 나타내고 약한강조의 의미가 있음
-
dfn: 정의하고 있는 용어 나타냄
-
abbr: 준말, 약자를 나타내고 싶을 때 사용
``` <abbr title="World Wide Web">www</abbr> ``` -> 마우스 hover 했을 때 태그 달림 -
sub: 아래 첨자 (H20)
-
sup: 윗 첨자 (x2=4)
-
span: 줄 바꿈 없이 영역을 묶는 용도로 사용
-> 여러 요소를 묶어 컨트롤하기 위한 용도로 id 나 class 주어서 사용 -
ol: 순서를 오름 차순으로 인식
-> ol reversed 넣으면 내림 차순으로 인식
-> ol start="10" 넣으면 10부터 시작 -
time: 시간을 나타내는 태그
``` <time date time="00:00"> ``` -
button: 버튼 태그
``` <button type="summit"> // 디폴트값은 제출 <button type="button"> // 버튼으로 변경 ``` ex) 사이트내 검색 ``` <form action=""> <input type="search"> <button type="submit">검색 실행</button> </form> ```
Embedded content
-
img
img src="a.jpg" alt=""
-> 스크린 리더가 읽지 X
img src="a.jpg"
-> 스크린 리더가 파일명 읽음
img src="a.jpg" alt="이미지"
-> 스크린 리더가 '이미지' 읽음 -
srcset
- srcset="img/ logo_1.png 2x, img/ logo_2.png 3x"
- srcset="img/ logo_1.png 700w, img/ logo_2.png 600w" (IE)
- srcset="babies_large.jpeg" -
sizes="(min-width: 960px) 250px, (min-width: 620px) 150px
->브라우저의 넓이가 960이상이면 이미지 크기 250으로
-> css 사이즈 컨트롤과 충돌 할 수도있음 -
picture
-
source
- media 속성``` <picture> <source srcset="~.jpg" media="(min-width:960px)"> <source srcset="~.jpg" media="(min-width:620px)"> <img src="~.jpg" alt="귀여운 라이캣"> </picture> ``` -
점진적 향상기법
(크로스브라우징 기법중 하나) -
iframe(중첩 브라우징)
ex) iframe width="1280" height="720"
src="https://www.youtube.com/embed/orf9ailzXvI"
title="[코테준비] N시간만에 끝내는 Python 코딩테스트(2018-2021년) 풀영상"
frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>-> 유튜브 중첩 브라우징<iframe src="https://www.naver..com"></iframe>-> 네이버 중첩 브라우징-
MITM(중간자공격)
1. 유저인증
2. 유저가 접속 지역 설정
3. iframe 같은 태그 지원 X
(댓글같은거에 iframe 못쓰게 해야한다.) -
audio
``` <audio src="폴더/파일명" controls autoplay loop> </audio> ```controls: 컨트롤바
-
video ( preload, none, metadata, auto 사용가능)
``` <video src="~.mp4" controls autoplay loop width="450" height="300"></video> ``` -
track: 자막
-> 오늘은 html의 text level semantics와 Embedded content에 대해서 배웠는데 이전까지 내가 html을 안다고 생각하던게 조금 부끄러워졌다... 아직 html에 대해서 배울것이 많은 것같다.
