여백 같은 줄 바꿈은 CSS 스타일로 적용하기 (스타일 적인 요소들은 무조건 CSS 사용하기)
[br]
<br> 태그 사용 권장하지 않음
[화면에 따른 줄 바꿈 처리]
1. span 태그와 CSS display 속성을 사용
2. wbr 태그 사용하기
[wbr]
- 실무에서 많이 사용되지는 않음
- 영어일 때는 속성이 필요없음
- 한글일 때는 word-break: keep-all; 을 써줘야함 wbr이 먹는다.
- 한국과 영어가 다름
- pc는 한줄로 나오고 모바일에서는 줄바꿈이 되어야한다.
[code]
노션이나 블로그에서 'push()' 이렇게 하면 코드로 뜬다.
- 짧은 코드 조각(한 줄)을 나타낼 때 사용
- 웹 접근성을 위해서 사용 push()로 적으면 텍스트로 알고 그냥 읽어버릴 수도 있음
code로 처리하면 번역할 때 번역되지 않고 정확한 정보를 준다.
[pre]
- 공백을 유지하면서 작성 가능
- HTML에 작성한 내용 그대로 표현이 가능하다.
- 텍스트는 고정 폭 글꼴을 사용, 공백 그대로 유지
- 공백이 필요한 코드나 텍스트를 사용해서 그림을 그릴 때 사용한다.
[strong]
- 긴급하거나 중대한 콘텐츠를 나타낸다. 단어나 문장일 수 있다.
- 기본적으로 굵은 글꼴이 적용
- 스크린 리더를 사용하여 컴퓨터 화면을 낭독할 때 strong 사이에 있는 문자는 거센 억양으로 소리를 내어 발음한다.
ex ) 경고! 이런 행동은 매우 위험하다.
[b]
- 웹 접근성에 맞춰서 사용하려면 권장하지 않음
- 과거에 굵은 글씨 처리를 위해 사용하였음
- 사용하지 않는 것을 권장
[em]
- 한국에서는 em 태그를 많이 사용하지 않음
- Emphasis : 강조, 강한 어조
- 텍스트의 강세를 나타낸다. 콘텐츠를 강조해서 읽었으면 하는 부분에 적용함
- 요소를 중첩하면 더 큰 강세를 뜻함
- 기본적으로 기울임 꼴이 적용되는데 스타일 적용이 위한 것이면 CSS로 처리하기!!
- 음성 강조를 하는 것처럼 문자의 의미를 변경하는 데 사용
[i]
- 외국어, 등장인물의 생각 등 일반적인 산문에서 벗어난 경우 사용
ex) ebook 에서 등장인물 생각을 말할 때 억양 번형을 주기 위해서 사용
- 기본적으로 기울임 꼴이 적용
strong, b, em, i 등 모두 굵게, 기울임 등의 스타일을 위해서 사용하지 않도록 하기!!
[q]
- 짧은 인용문을 나타냄
- 줄 바꿈 없는 짧은 경우에 사용
[blockquote]
- 긴 인용문을 나타낸다.
- 실무에서 많이 사용은 하지 않음
- 기사, 잡지 회사 페이지를 만들 때는 인용문과 cite 사용하니까 어떤 프로젝트를 하느냐에 따라서 중요해짐
[cite]
- 저작물의 출처를 표기할 때 사용, 제목을 반드시 포함
[address]
- 해당 콘텐츠에 대한 연락처 정보
- 물리적 주소, URL, 이메일 주소, 전화번호, SNS 정보, 좌표 등
- 연락처가 가리키는 개인, 조직, 단체의 이름을 반드시 적기
- 페이지 헤더 혹은 푸터에 배치하여 사업체에 연락 방법으로 사용 가능
- article 내에 사용하여 글의 작성자를 나타내기 가능
- 연락처 외의 정보(출판일 등)을 담아서는 안 된다.
* 학원, 병원, 식당처럼 직접적인 연락처가 필수인 곳이라면 address 태그를 꼭 사용하는 것이 좋음
[mark]
- 잘 사용하지는 않음
- 입력한 검색어에 형광펜으로 표시하기 위해 사용
- 형광펜으로 칠한 것처러 표현, 검색 결과에 대한 시각적 효과를 위해 사용
[abbr]
- 약어(abbreciation)를 나타내는 태그
- 약어를 풀어서 설명하면 사용자가 문서를 이해하기 쉬움
- 마우스 오버해서 보면 설명이 나옴 <title> 태그에 작성
[dfn]
- 현재 맥락이나 문장에서 정의하고 있는 용어를 나타냄
[sup]
- 위 첨자 요소로 지수,서수 표기를 위해 사용
[sub]
- 아래 첨자 요소로 각주, 변수, 화학식 표기
[kbd]
- 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타낸다.
<p>맥 브라우저 강력 새로고침 <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></p>
'HTML,CSS' 카테고리의 다른 글
| css 꿀팁 (0) | 2023.09.18 |
|---|---|
| CSS 빔캠프 (0) | 2023.03.10 |
| 텍스트 꾸미기 CSS (2) | 2023.03.02 |