1. 인라인 텍스트
1)A
:다른 페이지, 같은 페이지 위치, 파일, 이메일 주소, 전화번호 등 다른 url로 연결할 수 있는 하이퍼링크 설정
[anchor, 외부로 내보내기]
속성
href : 링크 url설정 (사용자가 a 태그를 통해 넘어갈 페이지에 대한 경로) but 생략 가능
rel : 관계를 설정해준다 값: license, prev, next(이전, 다음 페이지)
target : 링크 url의 표시(브라우저 탭) 위치 값: _self(현재 창에 새로운 탭을 띄우겠다, 기본값) , _blank(다른 페이지에 새로운 탭을 띄우고 싶으면 _blank를 해야 한다)
이외 속성
download: 이 요소가 리소스를 다운로드하는 용도로 사용됨을 의미(페이지를 넘어가는 용도가 아닌 다운로드를 받도록 하는 신호를 보낸다
- 값: Boolean
hreflang: 링크 url 페이지 언어
type: 값: text/html
- a는 inline이지만 block으로 써줘야
=> <a href = "url" target="_blank"></a>
=><a href="파일 경로" download>README.md</a> : 클릭하면 해당 파일이 다운로드가 된다/ 만약 download가 없으면 해당 파일이 페이지에 뜬다
download는 불리언(참, 거짓). 그러므로 값을 넣을 필요 없다.
- 버튼의 모양으로 만들고 싶으면 a를 block 요소로 바꿔서 사용한다 : display: block;
cf. a: hover {background : orange;}
- a로 같은 페이지 위치로 이동하기
ex. 목차의 컨텐츠의 제목을 누르면 해당 컨텐츠로 이동하는
목차
<ul>
<li><a href = "#title1">제목1
<li><a href = "#title2">제목2
<li><a href ="#title3"> 제목3
</ul>
<h2 id="title1">제목1
<h2 id="title2">제목2
<h2 id ="title3">제목3
=> 목차와 링크가 같은 화면에 있으면 화면을 옮기면 안됨
=>a href = "#id" 로 들어갈 수 있다 같은 페이지에서 움직일 수 있다
cf. id는 고유해야 한다
=> h2{
padding-bottom: 1000px;
}
2)abbr
- abbreviation, 약어 지정
- title 속성을 사용하여 전체 글자나 설명 제공
=> title 속성은 전역 속성
<abbr title = "">: title속성으로 html의 설명을 알려준다
ex. Using <abbr title = "HyperText Markup Language">HTML</abbr> is fun and easy!
3)b
: 문체가 다른 글자의 범위를 설정
bold. 글자가 두껍게 표시됨
html5되면서 bring attention
- 특별한 의미를 가지지 않음
-읽기 흐름에 도움을 주는 용도로
-다른 태그가 적합하지 않은 경우 마지막 수단(strong, em, mark로 쓸 수 있으면 쓸 수 있다)
: 글자를 두껍게 하기 위해 쓰는 것이 아님!
4)MARK
: 사용자의 관심을 끌기 위해 하이라이팅할 때 사용
형광펜을 사용하여 관심있는 부분을 표시하는 것과 같은 의미 (의미<시각)
글자 배경이 노란색으로 표시됨
css로 대체 가능
====> b, mark는 태그로 묶인 text의 의미를 강조하기 보다는 표시용
5)em
emphasis, 의미를 강조할 때 사용
중첩이 가능 <em> 안에 <em>을 또 쓸 수 있음: 시각은 더 강조되지 않지만 의미는 더 강조됨
정보통신보조기기 (시각장애인에게 text를 읽어주는) 등으로 구두 강조로 발음됨
기본적으로 italic체로 쓰여진다
6)strong
의미의 중요성을 나타내기 위해 사용(강조와 중요도는 다름: 강조 : em/ 중요도: strong)
기본적으로 글자가 두껍게 표시됨
7)i
em, strong, mark, cite, dfn 등에서 표현할 수 있는 적합한 의미가 아닌 경우
(평범한 글자와 구분(아이콘이나 특수 기호 같은)
이탤릭체로 표시됨
인라인 요소
b, wrap, mark(의미적 강조X, 시각적 강조), em(이탤릭체, 중첩 가능 but 시각적 차이 없음)
=> 모두 font-style:normal, font-weight:normal로 css로 형식을 원상태로 만들 수 있다
i
=> fontawesome에서 icon을 검색하서 쓸 수 있다
ex. <i class = "fas fa-bars"></i>
<head>에 <link rel= "stylesheet", href로 url>
8)dfn
용어를 정의할 때 사용
Definition
=> dl, dt, dd
정의를 하고 <def id ="def-internet">Internet</def>
9)cite
창작물에 대한 참조를 설정
(책, 논문, 영화, TV 프로그램, 노래, 게임 등의 제목)
이탤릭체로 표시
ex. <cite>The Scream</cite> by Edward Munch. Painted in 1893.
display: inline
10)q
짧은 인용문을 설정
(inline quotation)
=> 긴 인용문은 blockquote
속성 : cite = "url"
인용된 정보의 url을 사용한다
인라인 요소
11)u
밑줄이 있는 글자를 설정
underline
- 순수하게 꾸미는 용도의 요소로 사용
- a와 헷갈릴 수 있는 위치에서 사용하지 않도록 주의 (밑줄이기 때문에 링크가 있다고 착각할 수 있음)
- <span style = "text-decoration: underline">을 활용할 수 있는 경우에는 u 사용을 권장하지 않음
12)code
컴퓨터 코드 범위를 설정
<code>document.getByElementById("id-value")</code>is a piece of computer code.
고정폭(monospace)글꼴 계열로 표시됨.
인라인 요소
=> 사용자가 문장을 읽을 때 code라는 것을 인지할 수 있도록
code로 css할 수 있다
13)kbd
텍스트 입력 장치(키보드)에서 사용자 입력을 나타내는 텍스트 범위를 설정
(keyboard Input)
<p><kbd>Ctrl<kbd>+<kbd>Alt</kbd>+<kbd>K</kbd></p>, <kbd>ESC</kbd>
다른 텍스트와 더 섞여 있으면 이 부분이 키인지 모르기때문에 css로 더 꾸며서 사용자들에게도 이 부분이 정확히 키라는 것을 표현한다
14)sup, sub
sup: 위 첨자 (superscripted text)
sub: 아래 첨자 (subscript text)
X<sup>4<sup> + Y<sup>2</sup>, H<sub>2</sub>0
=> X의 4승, Y의 2승, H20(물 기호) 형태로 나온다
둘 다 인라인 요소
15)time
날짜나 시간을 나타내기 위한 목적으로 사용
속성: datetime
의미: 유효한 날짜 문자 - 정확한 날짜를 적어준다
값: Date( YYYY-MM-DD)
<time datetime="2018-07-07">July 7</time>
IE에서 쓸 수 없다
16)span
div와 유사. 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정
인라인 요소, 의미가 없다
div는 block 그러므로 한줄을 다 차지해서 줄바꿈이 된다.
정확하게 잡기 위해서는 span을 쓰는 것이 좋다
17)br
빈태그: /를 넣어도, 안 넣어도 되는데 통일은 해야!
줄바꿈을 설정한다
인라인 요소
줄 사이에 간격을 벌리기 위해 br을 여러개 쓰는 것은 좋지 않음.
=> 스타일링을 하는 것은 css를 쓰는 것이 더 바람직
cf. p안에 line-height로 바꾸는 것이 좋음
2. 수정
1)del
삭제된(변경된) 텍스트의 범위 지정 (예전에 있었지만 현재는 삭제되었다는 것을 표현하기 위해 사용)
중앙선이 들어간다
속성 = 값
cite = "url" 변경을 설명하는 리소스의 url
datetime = "Date" 변경이 일어난 유효한 날짜 문자
인라인 요소
2)ins
새로 추가된(변경된) 텍스트의 범위를 지정 (원래 없었는데 추가되었다)
밑줄이 쳐진다
속성 = 값
cite = url 변경을 설명하는 리소스의 url
datetime = Date 변경이 일어난 유요한 날짜 문자
인라인 요소
<p>My favorite color is <del>blue</del><ins>red</ins>
=> html태그들은 스타일이 아니라 의미에 집중을 해야 한다
'패캠 네카라쿠배 도전: HTML CSS' 카테고리의 다른 글
| [패캠 네카라쿠배 2기 도전] HTML/ 요소 - 표 콘텐츠&양식 (0) | 2021.05.24 |
|---|---|
| [패캠 네카라쿠배 2기 도전] HTML/요소 - 멀티미디어&내장 콘텐츠&스크립트 (0) | 2021.05.23 |
| [패캠 네카라쿠배 2기 도전] 4.HTML/ 개요, 요소 - 주요범위, 메타데이터 (1) | 2021.05.21 |
| [패스트캠퍼스 네카라쿠배 2기 도전] CSS (0) | 2021.05.14 |
| [패캠 네카라쿠배 2기 도전] html 문법 (0) | 2021.05.14 |