NOW OR NEVER
[2주차] 2. HTML의 Inline text 태그 본문
인라인 텍스트
: 글씨를 다루는 데 특화되어 있는 태그들 다수 포함, h1-h6 태그와 p태그는 예외
1. a 태그 anchor : 기본적으로 현재문서에서 외부의 문서로 내보낼 때 사용하는 태그(링크를 건다)
- display : inline; 인라인 요소
- 이미지 파일도 가능
- 버튼형식으로 많이 쓰임 하지만 인라인 요소라 가로 세로 값 지정할 수 없어서 display:block 으로 바꿔서 사용하는 경우가 많다.
- 현재문서를 제외한 다른 url로 연결할 수 있는 하이퍼링크 설정
- href, rel, target 속성 중요->가장 많이 사용
- download 속성 : 해당하는 링크가 페이지를 넘어가는 용도로 사용하는 것이 아니라 파일을 다운로드 받는 용도로 사용한다는 것을 명시해주는 것. 실질적으로 링크를 통해서 뭔가를 다운로드 받게 해주지는 않지만 힌트를 주는 용도로 사용한다. 불린(Boolean)형태로 유무를 명시해줘야 하는 방식 하지만 download=”download” 는 download 와 같으므로 download라고만 작성해도 된다.
- href(hypertext reference) 속성: 다른 문서 어디로 나갈 것인지 링크(url) 설정, 요즘은 생략속성(선택가능)으로 바뀌었지만 거의 필수처럼 활용해야 함
-hreflang 속성: 나가는 경로의 페이지의 언어 설정
- rel (relationship) 속성 : a 태그를 통해서 빠져나가는 그페이지가 현재문서와 어떤 관계인지 설정
(license: 현재 문서의 해당하는 라이선스의 다른페이지 넘어가게 할 때 해당하는 페이지가 라이선스 관련 페이지다. prev(previous): 해당하는 페이지의 이전페이지, next: 해당하는 페이지의 다음 페이지)
-target 속성: 링크 눌렀을 때 위치(_self : 현재 창에 해당하는 링크의 다른 페이지를 띄움, _blank: 새로운 창을 띄워서 그 새로운 페이지를 띄움), target 작성 안할 시 기본값:_self 로 자동 입력
-type 속성: 해당하는 링크 페이지의 MIME 타입, 기본적으로 text/html 많이 사용하지만 대부분의 경우 생략
- a 태그로 구글 사이트 들어가는 버튼 만들기 : a 태그를 이용해 버튼을 만들어서 이용할 때는 a태그가 인라인 요소이므로 블록요소로 바꿔서 모양을 넣어야 한다.
a {
font-weight: bold;
width : 100px;
line-height: 40px;
height: 40px;
border: 1px solid black;
border-radius: 6px;
display: block;
text-align: center;
}
/* a태그에 마우스를 올렸을 때 */
a:hover {
background: orange;
}
- 같은 페이지 위치로 이동 가능 : 같은 페이지 내에 있는 특정한 위치로 바로 이동해줄 수 있다. 또한 주소창에 페이지 주소#id를 붙여넣으면 페이지 내 특정한 위치를 설정해서 그 특정한 위치로부터 시작하는 페이지를 볼 수 있다
<body>
<ul>
<li><a href="#title1">제목1</a></li>
<li><a href="#title2">제목2</a></li>
</ul>
<h2 id="title1">제목1</h2>
<h2 id="title2">제목2</h2>
<h2 id="title3">제목3</h2>
</body>
2. ABBR 태그 abbreviation(뜻: 약어) : 특정한 문서 내용 중 약어로 사용된 단어가 있다면 이 단어를 이태그를 통해 묶어준 다음에 설명을 추가해줄 수 있다.
- 사용시 브라우저에 이 태그가 적용된 약어 부분에 밑줄이 생기고 마우스 올려놓을 시 title에 작성한 설명 부분이 밑에 나타나게 됨
- title 속성 : 전역속성이다. 이 속성을 통해 약어를 지칭해주고 지칭된 약어 부분에 간략한 설명 추가 가능, 약어가 어떤 단어들의 약어인지를 알려주는 역할이다. title=”약어의 전체단어 설명”
3. dfn 태그 definition : 용어 정의할 시 사용
-italic 체
- <dfn id=””>용어<dfn>문장
- dl, dt, dd 태그와 비교 : dl, dt, dd 태그는 용어와 설명을 나열하는 형식으로써 용어가 좀 많을 때 용어를 정의하는 태그이다. dfn의 경우에는 전체 문장에서 특정한 용어 하나를 설명할 때 설명보다는 용어를 정의할 때 사용하는 태그
- 설명은 따로 명시되어 있지 않고 용어라는 것을 알려준다.
- 어떠한 문장에서 특정 부분을 용어라고 명시하고 싶을 때 사용하는 태그
4. cite 태그 : 책, 논문, 영화, 노래 등의 창작물에 대한 참조 설정하는 태그
- italic 체
- 창작물의 제목
- 어떤 콘텐츠를 나타낼 때 어떤 창작물에 대한 참조를 나타내기 위해서 사용할 수 있는 태그
5. q 태그 inline quotation : 짧은 인용문 설정
- blockquot 태그도 인용문을 다루긴 하지만 q 태그는 인용문 중에서도 짧은 인용문을 다룸
*주의 : 인용문이 길면 blockquote 사용, 짧으면 q 태그 사용
- cite 속성: 짧은 인용문의 대한 실질적인 정보를 url로 q 태그에 명시 가능
6. u 태그 underline : 밑줄을 칠 수 있는 방식을 제공하는 태그
- 순수하게 꾸미는 용도로도 사용할 수 있지만 css로도 밑줄을 그을 수 있고 밑줄을 긋는 용도로서만 이 태그를 사용하는 것은 의미적인 부분은 없는 태그이기 때문에 추천하지 않는다.
- u태그를 활용해 밑줄을 치게 되면 a 태그와 밑줄 쳐 있는 방식과 비슷하여 헷갈릴 수 있으므로 주의
- span 태그의 style 속성을 사용해서 text-decoration : underline 입력시 u태그를 사용하지 않고 밑줄을 그을 수 있지만 사용하는 것 추천하지 않음.
- span 태그에 css로 text-decoration : underline 입력시 u태그 대체 가능
- 밑줄이 그어지게 되면 사람들이 클릭하는 것으로 오해 할 수 있으므로 주의해야 함
- 시각적인 부분은 태그로만 구성하려 하지말고 되도록 css를 쓰되 css를 사용할 수 없는 경우 u태그를 쓸 수 있다.
7. code 태그 : 컴퓨터 코드 범위 설정하는 태그
- 특정한 문장 안에 code가 일부분이 삽입되어 있을 시 code 태그로 wrapping 함으로써 code임을 명시할 수 있다.
- 사용자가 code 부분이 어디인지 명확하게 인지시켜 주기 위해 사용되는 태그
- 기본적으로 글꼴이 가로사이즈가 동일한 monospace 계열로 표시됨
8. kbd 태그 : Ctrl, Alt, K, ESC 키 등 특정 키를 명시하는 태그
- 키라는 것을 사용자에게 명확하게 인지시켜 줄 수 있음
- monospace 글꼴 계열
- 예제
<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>K</kbd>
<br><kbd>ESC</kbd>
-> html
kbd {
padding: 0 3px;
border-radius: 3px;
border-top: 2px solid rgb(240,240,240);
border-bottom: 2px solid rgb(205,205,205);
border-left: 2px solid rgb(240,240,240);
border-right: 2px solid rgb(225,225,225);
}
-> css
9. sup(superscripted) 태그와 sub(subscripted) 태그
- sup 태그는 윗첨자 ex) x^6, sub 태그는 아래첨자 ex)y_2
10. time 태그 : 날짜와 시간을 나타내기 위한 태그
- 유효한 날짜 문자(date 등의 값을 사용함 ex)yyyy-mm-dd 형식)를 통해 datetime 속성에 정확한 날짜를 적어줘야 함
- 많이 사용하지 않는다
- 인터넷 익스플로러에서는 사용 불가능
[헷갈릴 수 있는 태그들]
1. b 태그 : 예전에는 bold의 약자로 사용됐었지만 요즘에는 문체가 다른 글자의 범위를 지정하게되었다.
- css의 font-weight를 통해 스타일을 바꿀 수 있다.
- mark, strong, em, I 태그를 사용하는데 적합하지 않은 곳에 이 태그를 사용한다.
- b태그를 이용해 글자를 두껍게 하는 것은 요즘에는 사용되지 않으며 그렇게 사용하면 안된다.
- 의미를 가지지 않으며 읽기의 흐름에 도움을 주는 용도로서 범위를 지정할 때 사용한다.
2. mark 태그 : 활용시 책에 노란색 형광펜을 통해 중요 부분을 체크하듯이 그런 용도로 쓰는 것 처럼 글자배경이 노란색처럼 표시된다.
- 관심있는 부분을 표시
- 의미 보다는 시각적인 부분에 특화되어 있는 태그
3. em 태그 emphasis : 단순하게 의미를 강조할 때 사용하는 태그
- b 태그와 mark 태그는 태그로 묶여져 있는 텍스트에 어떠한 의미를 강조하기 보다는 단순한 범위 지정과 관심있는 부분을 표시하는 걸로 사용한다. em 태그의 경우 그 텍스트가 가지는 범위를 사용자에게 강조하기 위해 사용된다.
- em 태그 안에 또다른 em 태그 사용 가능
- em 태그 안 가장 하위 요소의 em 태그가 가장 강조의 의미가 크다. 브라우저 화면 상 달라진 것은 없지만 강조된 것 이다.
- 사용자에게 강조하는 것 뿐만 아니라 검색엔진 등 정보통신보조기기에도 강조를 할 수 있다.
- 실질적으로 의미를 강조하는 것이기 때문에 예를 들어 정보통신보조기기가 실질적으로 발음해줄 때 이부분을 더 강조해서 말한다
- 글자가 기울어져 있는 글씨체(italic)로 표시-> css의 font-style을 통해 바꿀 수 있다.
4. strong 태그: 의미의 중요도를 나타낼 때 사용
-em과 다른 점 : 의미가 강조하는 것과 의미가 가지는 실질적인 맥락의 중요성을 표시하는 건 차이가 있다. 강조하는 부분과 의미가 실제로 그 문맥 상에서 중요하게 쓰이는 부분은 확실하게 다르다. 그래서 강조와 중요도는 다르다
- 그텍스트 부분이 문장이 될 수도 있고 단어도 될 수 있다.
- 그 텍스트 부분이 실질적으로 의미로 중요한 부분일 때 사용
- 글자 두껍게 됨
- b태그와는 의미적으로 다른 의미로 쓰이지만 화면상에서는 똑같이 글자가 두껍게 보인다. 그래서 사용자가 혼용하지 않도록 색깔을 달리하는 등 차이점을 줘서 작성하는 것이 좋다.
5. i 태그: b태그와 공통적으로는 적합한 의미가 아닌 경우 사용하는 것은 같지만, b태그는 일반적인 텍스트를 사용할 때 쓰는 것이고 i 태그는 일반적이지 않은 이미지나 특수문자 같은 일반적인 텍스트와 구별되는 부분에서 활용한다.
- 글자가 기울어져 있는 글씨체(italic)로 표시(css로 제거하거나 바꿔서 쓸 수 있음)
TIP
- .md 확장자: markdown 이라는 이름의 파일의 확장자
- id는 class와 비슷하지만 class와 다르게 고유해야 한다는 성질을 갖고있다. 즉, class는 중복될 수있지만 id는 중복될 수 없다. 일종의 이름이라고 생각하면 된다. id를 의미하는 것은 #id이름 이런식으로 쓰인다. #(해쉬)은 id를 의미하는 일종의 선택자
- 전역속성 global : 전체의 영역에서 사용할 수 있는 속성
- link 태그로 이미지 링크를 가져올 때(외부에서 내가 작성하지 않는 라이브러리를 가져올 때)는 css 파일을 가져오는 link 태그 위에 작성해야 한다.
- 아이콘 사이트 : https://fontawesome.com/
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
참고 https://heropy.blog/2019/05/26/html-elements/
한눈에 보는 HTML 요소(Elements & Attributes) 총정리
인터넷에 검색 가능한 많은 HTML 문서들의 내용을 요소(Elements), 속성(Attributes)의 개념으로 핵심적인 내용들만 요약해서 정리했습니다. 각 요소들의 자세한 설명은 패스트캠퍼스 온라인 강의(online
heropy.blog
'강의 > 제로베이스 프론트엔드 99일' 카테고리의 다른 글
| [2주차] 5. HTML의 양식 관련 태그들 (0) | 2021.08.13 |
|---|---|
| [2주차] 4. HTML 스크립트 태그와 표 콘텐츠 태그 (0) | 2021.08.12 |
| [2주차] 3. HTML 인라인 텍스트 & 수정 & 멀티미디어 & 내장 콘텐츠 관련 태그들 (0) | 2021.08.11 |
| [2주차] 1. HTML의 콘텐츠 구분 태그와 문자 콘텐츠 태그 (0) | 2021.08.09 |
| [1주차] (8/2-8/8) 강의 요약 정리 및 하게 된 계기, 일주일 후기 (0) | 2021.08.08 |
