[패스트캠퍼스 수강후기] 프론트엔드 강의 6회차 미션

오늘도 HTML 요소에 대해서 배우는 시간을 가졌다

06. HTML / 요소 - 인라인 텍스트 & 수정

 

솔직히 이걸 책으로도 배울 수도 있을 것 같지만

실제로 따라해보게 하는 건 동영상 강의라서 가능한 것 같다

 

*

a

anchor 태그를 걸 때

a { display: inline;}

[속성]

- download : 이 요소가 리소스를 다운로드하는 용도로 사용됨

- href* : 링크 url / 생략가능하지만 링크로서의 기능 생략됨

- hreflang : 링크 url페이지 언어

- rel : 현재문서와 링크 url의 관계 / license, prev(이전), next(다음)

- target* : 링크 url의 표시 위치

  target="_self" : self가 기본값임, 그 페이지에서 옮겨가는 것

 target="_blank" : 새로운 탭이 열림,밑줄이 쳐진다

- type : 링크 url의 MIME 타입

 

*

image도 href로 불러올 수 있는데

download를 쓰면 다운로드로 쓸 수 있음

어제 내가 올린 이미지를 a 태그를 이용해 열리게 해봄

 

다운로드 태그로도 활용

 

* 

a태그는 인라인요소라서

block으로 바꿔야

틀을 가질 수 있음

 

*

같은페이지에서 이동도a로 할 수 있음

<ul>

   <li><a href="#title1">제목1</a>></li>

   <li><a href="#title2">제목2</a>></li>

   <li><a href="#title3">제목3</a>></li>

</ul>

   <h2 id="title1">제목1<h2>

   <h2 id="title2">제목2<h2>

   <h2 id="title3">제목3<h2>

id는 별명처럼, 고유함

#은 id를 선택할때

 

*

abbr

전체의 영역에서 사용할 수 있는 속성

전역속성

Using <abbr title="Hyper Text Markup Language>HTML</abbr> is funny

마우스를 올린 채 가만히 있으면 설명이 나옴

 

*

b

글자가 두꺼워짐, 문체가 다른 글자의 범위

특별한 의미를 가지지 않는데

읽기 흐름에 도움을 주고

다른 태그가 적합하지 않은 경우

 

*

mark

사용자의 관심을 갖기 위해 하이라이팅 할 때

글자 배경이 노란색으로 표시됨

CSS로 커버됨

inline임

 

*

em

emphasis약어

단순한 의미를 강조할 때

중첩가능, 중첩될수 의미가 강해짐

ex_ <em><em></em></em>

시각적으론 달라지는 거 없음

정보통신보조기기 등에서 구두 강조로 발음

이탤릭채로 표현

 

*

strong

의미의 중요성

(em과는 강조와 중요성의 차이...)

기본적으로 글자가 두껍게 표시됨

 

*

i

위에있는 게 적합하지 않을 때

b와 비슷하지만 평범한 글자와 구분(아이콘,특수기호)하기 위해

이탤릭채로 표현

인라인구조

 

*

font awesome : 이미지 찾을 수 있는 사이트

 

*

dfn

용어정의

 

*

cite

창작물에 대한 참조

이탤릭채로 표현

<cite>the scream</cite> by edward munch

인라인요소

 

* 

q

짧은 인용문

긴용문은 blockquote

인라인요소

 

*

u

underline밑줄이 있는 글자를 설정

순수하게 꾸미는 용도

 a와 헷갈리지 않게(링크라고 오해 )

span style을 활용할 수 있을땐 사용을 권장하지 않음

인라인요소

 

*

code

컴퓨터 코드범위를 설정

모노스페이스

인라인요소

 

 

*

kbd

키보드에서 사용자 입력을 나타내는 텍스트 범위를 설정

인라인요소

 

* 

sup 위첨자

sub 아래첨자

인라인요소

 

*

time

날짜나 시간을 나타내기 위한 목적

IE지원불가

 

* 

span

본질적으로 아무것도 나타내지 않음

div랑 비슷한데 인라인요소

div를 쓰면 블록요소라 다른 줄이랑 분리가 되서 한줄에 들어갈 것

 

 *

<br/>

줄바꿈, 빈태그, 인라인

line-height 줄의 윗부분, 아랫부분의 합

br/ 의 line height 34를 입력했을 때

 *

ins : insert새 추가된 텍스트의 범위

del : 삭제된 텍스트의 범위, 인라인

이제 웹이 파워포인트처럼 만들어지는 것 같다...

https://bit.ly/3g7RJpi

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스