3강.HTML 태그 <h1> , <br>(줄바꿈)

안녕하세요 오늘은 2020.07.14 화요일입니다. 작심삼일이라는 사자성어가 떠오르네요. 저는 항상 이 3일을 기준으로 포기를 하거나 끝까지 진행하거나를 결정하는데 오늘도 꾸준히 적는 걸 보니 아마 웹 개발 쪽으로 열심히 배울 것 같습니다.

오늘 배울 태그는 <h1>~~~</h1> 입니다. 제목과 같은 느낌을 연출할 수 있는 태그(문법)입니다. 먼저 Atom을 켜주세요.  혹시 Atom 설치 법 혹은 초기 설정법을 모르신다면 1강의 Atom 설치법 및 세팅법을 보고 와주세요 ㅎㅎ

 

https://pon-9940.tistory.com/21

1강. HTML 코딩환경 만들어주기 (Atom 설치법)

자 잘 보고 오셨나요? 그러면 Atom 에디터에 <h1>~</h1> 관련 문장들을 나열해보겠습니다

 

여기서 어떤 점들이 보이는 지 캐치하셨나요? 여러분들은 훌륭하게도 다음과 같은 특징들을 발견하셨을 겁니다. 

1. h1부터 h6까지만 작성할 수 있다.

2. h의 숫자가 커질 수록 글씨가 작아진다.

3. 자동으로 줄바꿈이 된다.

4. 제목과 같은 느낌이 난다.

 

다음은 줄바꿈이 가능한 태그(문법) <br>에 대해서 설명해 보도록 하겠습니다. 우선 Atom에 예시로 문장 2개를 적어보겠습니다.

 

보시는 것처럼 Atom에서는 2개의 문장이 줄 바꿈이 되어있지만 웹페이지에서는 줄 바꿈 없이 한 라인에 표시가 된 것을 확인할 수 있습니다. 이때 바로 <br> 태그를 사용해주면 됩니다. 줄 바꿈을 하고자 하는 위치에 <br>을 넣어주시면 됩니다. 저는 delicious. 뒤에 <br>을 넣어보겠습니다.

 

보시는 것처럼 Atom상에서는 한 라인에 있지만 <br>을 적어준 이후 문장은 줄바꿈이 된 형태임을 확인하실 수 있습니다. 자 그럼 우리가 단락을 나눌 때는 <br>을 여러 번 해줌으로써 단락을 나누는 방법도 있겠습니다만 단락을 나눠주는 태그도 있습니다. 바로 <p> 내용 </p>입니다. 이 p 태그 사이에 내용을 적으면 이 사이만큼 이 한 단락이 되겠습니다. 그러면 바로 실습을 해보도록 하겠습니다. 

 

프링글수 문장들과 eat 문장들로 임시방편 예시를 들었고 <p>~</p>태그를 통해 프링글스 단락과 eat 단락으로 나누어짐을 다음 사진을 보며 알 수 있겠습니다. <br>과 <p>를 그나마 비교했을 때 <p>는 내용을 한 번에 묶어주는 장점이 있지만 단락과 단락 사이에는 정해진 여백만 이용할 수 있다는 단점이 있습니다. 즉 자유도가 떨어진다는 말이죠. 반면 <br>은 원하는 만큼 쓰면 되니깐 여백을 자유롭게 정할 수 있습니다. 이 두 태그는 각자 상황에 맡게 사용하신다면 좋으실 것 같습니다.

 

오늘은 태그 2가지를 배웠습니다. 제 첫글인 개발 초보자가 처음으로 배워야 할게 웹 개발이라고 했는데 왜 그런지 알 것 같습니다. 확실히 쉽고 눈에 선명한 결과를 바로바로 보여주기 때문이 아닐까 생각이 듭니다. 작은 성취감은 결국 큰 결과를 만들 듯 저도 하나하나 1시간씩 투자해서 나중에는 유능한 개발자가 되길 바라고 있습니다. 언젠가 제 글을 볼 여러분들도 파이팅해서 좋은 결과 있으시길 바라겠습니다. 그럼 내일 뵙겠습니다~!