문단과 줄바꿈, 주제 구분선을 올바르게 사용합니다.
p는 하나의 문단을 나타내며 브라우저는 앞뒤에 기본 여백을 둡니다. br은 주소나 시처럼 의미 있는 줄바꿈에, hr은 장면이나 주제 전환에 사용합니다.
첫 p는 소스에서 여러 줄에 걸쳐 들여쓰기까지 되어 있지만, 브라우저는 연속된 공백과 줄바꿈을 공백 하나로 합쳐 한 줄기 글로 흘려 놓습니다. 반대로 주소 문단의 br은 서울시 중구와 학습로 10 사이를 실제로 끊어 두 줄을 만들고, 두 문단 사이의 hr은 가로줄로 이야기의 갈래가 바뀌었음을 보여 줍니다.
소스의 줄바꿈과 공백을 그대로 살려야 하는 코드 조각이나 시는 pre 요소에 넣습니다. pre 안에서는 공백이 합쳐지지 않고 글자가 기본으로 고정폭 글꼴로 표시되므로 줄마다 br을 넣을 필요가 없습니다. pre 시작 태그 바로 뒤의 줄바꿈 하나는 파서가 버리기 때문에 내용을 다음 줄부터 써도 빈 줄이 생기지 않습니다.
화면 폭에 맞추려고 br을 여러 번 넣거나 빈 p로 간격을 만들지 마세요. 간격은 CSS margin으로 처리합니다.
직접 바꿔보세요첫 문단 뒤에 새로운 주제의 p를 하나 추가하세요.