block level element
부모의 컨텐츠 너비만큼, 가용 가능 범위만큼 차지할 수 있음
text level element
-자기가 가진 컨텐츠 크기만큼만 영역 유지
-자식으로 sections와 grouping contetnt 가질 수 없다
br
줄바꿈을 위한 태그
wbr
간혹 사용함. 텍스트박스에서 한줄로 모두 표시가 안될때만 줄바꿈이 일어나게
막간을 이용한 CSS
-word break
텍스트가 자신의 영역에서 overflow될때 줄을 바꾸는 프로퍼티
word break: break-all;
/* 어떠한 두 문자 사이에서도 줄바꿈이 발생(한중일 텍스트 제외) */CJK(한중일) 한글자 한글자 줄 나뉨. word-break 속성이 기본적으로 break-all로 정해져있기 때문에.
영어는 기본적으로 단어 단위로 라인브레이크된다.
-white space
요소가 공백 문자를 처리하는 법
white space: nowrap;
/* 연속 공백을 하나로 합침. */
white space: pre;
/*연속 공백 유지.*/a태그
href attribute로 경로 지정 가능.
html의 문법상 sections,grouping content 요소들은 텍스트레벨 요소의 자식으로 사용되지 않지만,
a태그만 예외적으로 sections,grouping content 요소를 자식으로 사용 가능하다.
but a 요소 안의 자식으로는, a 요소나 button 태그 처럼, 사용자와 interaction가능한 요소를 자식으로 두지 않는다.
<a href="https://www.naver.com">click</a>
<!-- 그 창 그대로 새로운 링크로 이동된다 -->
<a href="https://www.naver.com" target="_blank">click</a>
<!-- 새로운 창이 열리며 링크로 이동된다 -->
<a href="./index.html">click</a>
<!-- 현재 경로를 기준으로 찾는다 *-->
<a href="#three">click</a>
<!-- 해쉬링크. 페이지 안에서 이동하고 싶을때. (id에만 사용 가능하다).
scroll behavior: smooth; 사용하여 부드럽게 스크롤 가능함 -->
<a href="./index.html" download>click</a>
<!--파일 다운로드 할 수 있음-->
<a href="tel:+82027777777">(02)777-7777</a>
<!-- 전화번호 사용하는 어플리케이션 실행할 수 있게 함 -->
b,strong 태그
굵은 글꼴 표현하고 싶을때
b태그는 시멘틱하지 않음. strong 태그는 굵은 글꼴에 중요도를 더해 강조함.strong 태그 사용하기!
중요도 더 강조하고 싶을 때는 strong 중첩하기도 함.
i,em 태그
i태그는 기울임 글꼴 나타냄
html5에서는 전문용어,문단에서 주 언어와 다른언어로 표현된 부분(주언어:한글 다른언어:영어 등)
소설에서는 등장인물의 생각이 표기되어 있는 부분 등 어떠한 이유로 주위와 구분되어야 하는 부분 표현하기 위해 사용
em 태그는 같은 기울임 글꼴로 표현되지만 강조의 의미가 있음(emphasize)
dfn (define)
현재 문맥에서 정의하고 있는 용어 나타냄
dfn의 가장 가까운 부모가 p이거나 dt/dd쌍, section 요소일 경우 그 컨텐츠를 dfn의 정의에 대한 설명
(문서에서 최초로 나타났을때 사용)
abbr
준말, 약자를 나타내고 싶을 때. 보통은 홀로 쓰다가 dfn 로 감싸주기도 함
sup,sub
윗첨자/아래첨자
span
줄바꿈 없이 영역 묶는 용도.
Embedded content
img태그
<Img>
<img src="img/a.jpg" alt="이미지 없음"> -> 스크린 리더가 읽지 않음(읽지 않게 하려고)
<img src="img/a.jpg" alt=""> -> 스크린 리더가 a를 읽음
<img src="img/a.jpg" alt="스크린 리더가 읽어야 하는 문구"> -> 스크린 리더가 문구 읽음절대경로
지금 열고있는 파일과 관련없이 열수있는 경로
상대경로
지금 열고 있는 파일 기준
.img/ -> 현재폴더의 img
..img/ -> 상위폴더의 img
picture
source 요소와 img 요소를 통해 각기 다른 디스플레이 혹은 디바이스에 따라 조건에 맞는 이미지를 보여주는 요소
type 속성
이미지의 포맷 타입을 브라우저에게 알려줌
<picture>
<source srcset="babies.webp" type="image/webp">
<source srcset="babies.avif" type="image/avif">
<img src="babies.jpeg" alt="귀여운 아기 팽귄들">
</picture>위에서부터 차례로 브라우저가 지원하는 포맷인지 탐색. 지원하지 않는 포맷이라 판단되면 다음 source 요소로 넘어감. 만약 모든 source 요소 이미지 사용 불가하면 최후에 img 요소의 이미지 랜더링
이러한 방식의 크로스 브라우징 기법을 '점진적 향상기법' 이라고 부름
-> 기본적으로 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고, 최신 기술을 사용할 수 있는 환경에서는 최신 기술을 제공하여 더 나은 사용자 경험 제공할 수 있는 방법
Iframe
현재 html 내에서 또 다른 html 페이지 보여주고 싶을 때 사용함
보통 유튜브 영상 불러올때 많이 사용함
주의해서 사용. 해킹조심
위니브 사이트 클론코딩
-
폰트는 용량이 크기 때문에, 한 페이지에 한두개만 설정해서 사용하기
로고부분 폰트를 다르게 해야한다면 -> h1안에 img 넣고 alt 값 넣기 -
button 도 alt 값 넣어주기. 버튼의 용도가 명시되어 있어야 한다. (정보전달)
-
광고는 aside!
-
시간정보를 표현하는 time 태그로 이용해주기
-
article 쓸때 고민해보아야 하는 것
- 이것이 독립적인 어플리케이션으로 작동할수있는 위젯 같은것인가
- 다른 페이지 중간에 들어가도 어색하지 않은가
- ol 태그는 오름차순으로 판단. ol reversed -> 역순으로 파악
<ol start="10" reversed>
<!--10부터 시작-->- <> 이런 모양의 버튼들은 속성 넣어주기.
<button type="button" alt="다음 슬라이드로 이동 버튼"> < </button>- 검색창: input 태그 사용하기
input type="search"다른 창으로 넘어가는게 아니라 모달창을 띄우는 기능이면 버튼.
- more 버튼같은 경우는, 스크린리더가 읽는 순서 고려해서 맨 마지막에 작성해주기
