[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 20회차 미션

미션 2/5 달성!

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 20일차입니다!

최소 30일차까지는 HTML 요소와 속성에 대해서만 공부할 것 같아요. 😂

좀 지겨워지려는 찰나, 오늘은 힘이 나서 이전보다 강의도 많이 듣고 집중해서 학습했답니다.

지난 주에는 좀 늘어지는 기분이 반영이 되었는지, 미션 글을 쓰는 시간이 많이 늦었지요. 😓

어제 집에서 오후 23시 30분 이후에 빠르게 글을 쓰면서 이건 아니라는 생각이 들어서... 다시 마음을 고쳐먹었어요!

 

오늘은 06~11.인라인 텍스트 - DFN, CITE, Q, U, CODE, KBD 에 대하여 학습했습니다.

<dfn> 태그는 저번에 <dl>, <dt>, <dd> 태그를 공부하면서 잠깐 언급되어 알게 되었고, 그 외에는 모두 처음 보는 태그였어요.

HTML 내에 정말 수많은 태그가 있다는 것을 알게 되는 시간입니다. 머릿속에 넣고 잘 활용할 수 있겠죠?!

---

<dfn>

◾ 용어 하나에 대하여 설명(정의)할 때 사용

◾ 문장에서 '용어'라고 명시하고 싶을 때 사용

 

<cite>

◾ 창작물(책, 논문, 영화, TV 프로그램, 노래, 게임 등의 제목)에 대한 참조를 설정할 때 사용

◾ 기본 CSS: 이탤릭체

 

<q>

◾ '짧은' 인용문을 설정할 때 사용 ↔ '긴' 인용문: <blockquote> 태그 사용

◾ cite 속성을 사용하여 인용 출처 URL을 속성값으로 기입할 수 있음

 

<u>

◾ Underline, 글자에 밑줄 설정

◾ 순수하게 밑줄을 기입하여 꾸미는 용도로 사용함 ➡ CSS로 스타일 꾸미기를 대체하는 것을 추천

◽ <a> 태그와 헷갈릴 만한 위치에서 사용하지 말기

◽ <span style="text-decoration: underline"> 을 활용할 수 있는 곳에서 사용하지 말기!

◾ 시각적 효과는 CSS로 우선 적용하고, CSS 적용을 할 수 없을 때 <u> 태그 사용하기

 

<code>

◾ 컴퓨터 코드 범위 설정

◾ 특정한 문장 위에 '코드 부분'을 래핑하여 설정 가능

◽ 확실하게 강조하기 위해 CSS를 설정해주면 좋음. 사용자에게 이 부분이 코드 부분이라는 것을 정확하게 인지시키기 위함.

 

<kbd>

◾ Keyboard 의 약어

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

◾ 기본 시각적 효과: monospace 폰트 ➡ 추가 CSS 적용해주면 좋음

---

학습 내용 출처: https://heropy.blog/2019/05/26/html-elements/

강의 링크: https://bit.ly/3m0t8GM