👀OL, UL, LI
-
ol + li (정렬된 목록)
ol tag 속성
type="A, a, i, I ..." (앞에 표시되는 숫자가 달라짐)
각각의 표시를 사용하는 문서가 아니면 CSS의 style-type을 사용하세요.
reversed (번호 역순으로 바뀜)
start="시작값을 설정할 수 있음"/ 알파벳이어도 숫자로 표시를 해야한다. a=1
-
ul + li (정렬되지 않은 목록)
ol과 ul은 서로 중첩해서 사용하기도 한다. (이럴경우 li 태그 안에 새로운 ol이나 ul 생성)
<ul>
<li>first item</li>
<li>second item
<ol>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ol>
</li>
</ul>li tag
value="**" (번호 값을 설정, 이하의 값이 지정된 값에 따라 달라짐)
ul태그를 조금 더 많이 사용한다.
🙌dl(집합)/dd(정의)/dt(용어)
dl은 dd,dt 태그만을 사용해야함
-
하나의 용어와 하나의 정의
Beast of Bodmin A large feline inhabiting Bodmin Moor. -
여러개의 용어와 하나의 정의
-
하나의 용어와 여러개의 정의
용어와 정의 부분은 div를 사용해서 스타일링하기가 어렵기 때문에 사용도가 높지가 않음.
ul,ol로 대체 되어서 사용됨.
혹은 과
사용 : 요소에 title이 없다면 이 감싸고 있는 텍스트 콘텐츠가 현재 정의 중인 용어입니다.
-
body block elements
문단을 설정
문단의 분리를 위해 설정
수평선이 시각적으로 표현되나 의미적으로 사용을 해야한다.
(시각적으로 보이는 것이 싫다면 css로 삭제가 가능하다.)
→요소는 4각형이기 때문에 bottom이나 top으로 한 면만 선을 추가해 주어야한다.
서식이 지정된 텍스트 공백과 줄바꿈을 유지하여 표시됨
서식이 지정되서 에디터의 서식도 나오기 때문에 문단의 시작과 끝에 태그를 붙여서 사용해야 한다.
일반적인 긴 인용문을 설정
내용
6
-
body inline elements
약어를 지정
약어
마우스를 올리고 기다리면 title에 적은 글을 보여줍니다.
의미 X
읽기 흐름에 도움이 주는 범위..
글자가 두껍게 표시됨
아이콘이나 특수기호를 나타낼때
이탤릭체를 표시됨
b,i는 다른 태그들이 다 안될 때 마지막에 사용
의미X
의미보다는 시각적으로 표현되는..
의미의 강조
중첩이 되면 강조의 의미가 강해진다.
(접근성) 정보통신보조기기에서 구두 강조로 발음됨
이텔릭체로 표시됨
의미의 중요성
글자가 두껍게 표시됨
(definition)
용어를 정의할 때 사용
랑 같이 사용한다. -p를 용어를 설명할 때 사용
보다 사용성이 높다(꾸미기에 용이)창작물에 대한 참조
The Scream by Edward Munch. Painted in 1893.
짧은 인용문 (속성에 cite를 사용해서 url을 표현할 수 있다.)
는 block
의미X
밑줄
컴퓨터 코드 범위를 설정
사용자가 코드임을 인식할 수 있도록 보여주기 위한 부분
사용자가 키보드 키임을 인식할 수 있도록 보여주기 위한 부분
CSS를 사용하여 키보드 키임을 보여줄 수 있음.
위 첨자
아래 첨자
날짜나 시간을 표시
datetime 속성은 유효한 날짜 문자를 표현한다(대체로 년-월-일)
July 7
줄바꿈
간격을 만들어내는 용도로 사용해서는 안된다.
제거가 되었다를 표시한다.새로 추가 되었다를 표시한다.
둘다 cite(변경사항을 설명하는 url)와 datetime(변경이 일어난 날짜)을 속성값으로 갖는다.
✔ a tag
다른 url로 연결할 수 있는 하이퍼 링크
속성
- download: 다운로드하는 용도로 사용된다. (값 = boolean)
- href (hypertext reference): 링크 url (필수속성은 아님. 생략가능하다.)
- hreflang: 링크 url 언어 명시 (자주 사용하지 않음.
- rel: 문서와의 관계 (값이 다양하기 떄문에 필요할때 찾아서 사용한다.)
Link types - HTML: HyperText Markup Language | MDN
-
target: _self(기본값) , _blank
-
type: 링크 url의 mime타입 (text/html)
id값을 이용해서 문서내의 이동이 가능하다.(rel = bookmark?)
😁span tag
인라인요소의 의미가 없는 컨텐츠 입력
