줄 바꿈

이전 두가지 포스팅에서 태그를 이용하여 내용을 강조하는 방법, 자주 사용되는 태그, 모르는 태그를 찾는 방법 등을 배웠다.

다음으로 서로 경쟁관계에 있는 두 태그를 이용하여 줄바꿈을 하는 방법을 알아본다.

이전 포스팅에서 작성한 본문은 다음과 같다.

위의 코드 빨간 박스를 보면 단락을 구분하기 위해 줄바꿈을 했지만 웹페이지에서 동작하지 않는다.

이는 줄바꿈을 위해서 태그가 필요하기 때문이다.

우리는 줄바꿈 태그가 무엇인지 모르기 때문에 찾아야 한다. 이전의 포스팅에서 다룬 내용과 같이 태그는 일상생활의 경험을 토대로 유사한 단어를 활용하기 때문에 검색할때도 필요한 기능과 유사한 내용으로 검색하면 된다.

위와 같이 검색을 하면  태그에 관한 글들이 나온다.

따라서, HTML에서 새로운 줄을 표현할 때는 태그를 사용한다.

위의 화면을 보면 줄바꿈이 잘 된것을 알 수 있다.

여기서 눈썰미가 있다면  태그의 특이한 면을 발견할 수 있을 것이다.

지금까지 배운 태그들은 열리는 태그와 닫히는 태그가 쌍으로 존재하는 반면 br태그는 닫는 태그가 존재하지 않는다. 이는

HTML의 여러 태그 중에 무엇인가를 설명하지 않는 태그들은 감싸야하는 컨텐츠가 없으므로 태그를 닫지 않는다는 규칙이 존재하기 때문이다. 이와 같은 태그는 img, input, br, hr, meta 등이 있다.

다시 원래 하던 내용으로 돌아와 줄바꿈을 한 이유는 단락을 표현하기 위함이다.

HTML을 만든 사람들은 단락을 표현할 때 쓸 수 있는 태그를 마련해 두었다.

이 태그 또한 알지 못하므로 검색을하여 찾아본다.

위와 같이 검색하면 바로 태그가 나온다.

p태그는 br태그와 달리 하나의 단락을 그룹핑할 수 있도록 열고 닫는 태그가 존재한다.

아래와 같이 태그를 이용하여 코드를 변경해 본다.

위의 화면을 보면 웹페이지의 결과는 같지만 사용된 태그는 다르다.

단락을 표현할 때는 줄바꿈 br태그보다 단락을 표현하는 p태그가 더 좋다.

br 태그는 단지 줄바꿈을 의미할 뿐이므로 단락 태그를 사용하는 것이 웹페이지를 정보로서 보다 가치있게 해준다.

그러나 p태그는 단락과 단락의 간격이 고정되어 있기 때문에 시각적으로 자유도가 떨어지는 단점이 존재하는 반면 br태그는 쓰는만큼 줄바꿈이 되기 때문에 원하는 만큼 간격을 줄 수 있는 장점이 있다. 이러한 이유로 사람들이 br태그를 선호하는 상황이 존재한다.

이를 극복하기 CSS라는 기술을 이용할 수 있다.

CSS는 HTML과 다른 문법을 가진 언어이다. HTML이 정보를 표현한다면 CSS는 정보를 꾸며준다.

CSS를 이용해 첫번째 단락과 두번째 단락의 간격을 세밀하게 조정해본다.(CSS는 추후에 더 자세히 다룰 예정이다.)

위와 같이 p 태그에 style="margin-top:45px"를 추가하면 p 태그 위에 45px만큼의 여백(margin)이 생긴다.

이와 같이 p태그를 이용하면 단락의 경계를 분명히 하면서 CSS를 통해 p태그의 디자인을 자유롭게 변경할 수 있어 br태그보다 유용하다.

줄바꿈 - 생활코딩

--- 이번 시간에는 인기있는 태그 두 가지를 살펴볼 거에요. 이 두 태그는 서로 경쟁관계에 있는데요. 어떤 경쟁관계에 있는가를 통해서 정보로서 웹이라는 관점에 대해서 생각해 봅시다. 또 CSS

opentutorials.org

잡다한기술블로그