Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 부트캠프
- 개발공부
- 날씨 웹 만들기
- 삼항연산자
- JavaScript
- 프로그래머스
- 간단한 날씨 웹 만들기
- HTML
- 코딩부트캠프
- RN 프로젝트
- leetcode
- 자바스크립트 sort()
- 엘리스 ai 트랙
- [파이썬 실습] 기초 문제
- 프론트개발
- [파이썬 실습] 중급 문제
- 프론트개발공부
- reactnativecli
- 코드스테이츠
- 자바스크립트 split()
- 엘리스
- 자바스크립트
- 자바스크립트 날씨 웹 만들기
- [AI 5기] 연습 문제집
- [파이썬 실습] 심화 문제
- 자바스크립트 날씨
- 자바스크립트 reduce()
- 개발일기
- 리트코드
- 엘리스 AI 트랙 5기
Archives
- Today
- Total
개발조각
[HTML] <p> 본문
728x90
반응형
<p> : 문단(단락) 정의 태그
<p>는 하나의 문단을 나타냅니다.
HTML에서 문단은 이미지나 입력 form등 서로 관련있는 콘텐츠 무엇이나 될 수 있다.
=> 아무곳이나 써도 괜찮다는 말인듯 하다.
예제
- <p>태그는 블록 레벨 요소
- 시작, 닫기 태그 필수
<p>문단을 정의 태그 입니다.</p>
<p>문단을 정의 태그 입니다.</p>
p태그의 기본 css
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
접근성 고려사항
콘텐츠를 문단으로 나누면 페이지의 접근성을 높인다.
스크린 리더 등 보조 기술에서 다음 문단으로 넘어갈 수 있는 단축키를 제공한다.
<p>문단문단</p>
<p></p> // 이렇게 쓰면 스크린 리더 사용자가 혼란을 줄 수 있다.
그러나 이와 같이 문단 사이에 여백을 추가하면 스크린 리더 사용자에게 좋지 않다.
문단의 존재는 알려주나, 더 읽을 내용이 없기 때문에 스크린 리더 사용자가 혼란을 느낄 수 있다.
여분의 공간이 필요하다면 css의 margin등을 사용해서 여백을 만들어라.
728x90
반응형
'HTML' 카테고리의 다른 글
[HTML] <a> (0) | 2023.09.26 |
---|---|
[HTML] <h1> ~ <h6> (0) | 2023.09.05 |
[HTML] html태그에 대해 다시 공부하는 이유 (0) | 2023.09.04 |
Comments