[코딩] 제목과 문단을 작성할 수 있어요! - html 제목/문단/줄바꿈 태그

오늘 배울 내용의 주요 키워드를 먼저 정리해 봅니다.
#태그작성 팁     #<hn> 제목(헤드라인) 태그     #<p> 문단 태그      #<br>줄바꿈       

 

 

오늘 배운 내용은

글을 작성하는데 필요한 기본 태그들이였어요. 

• <h1>, <h2>,<h3>,<h4>,<h5>,<h6> ; 제목(헤드라인)을 쓸 때 쓰는 태그로 글자가 크고 굵음
  메모!) 숫자가 작을 수록 글자가 큽니다!
• <p> ; 문단을 시작됐음을 알리는 태그로, 한줄을 띄고 문장이 시작됨
• <br> ; 문단 내, 줄바꿈이 필요할 때 사용.

html 태그 작성 팁!

 

이제 제시된 태그들을 이용해서 웹페이지 내 문서를 만들 수 있는데요, html 작성할 때 알아두면 유용한 팁을 공유합니다.

1. html 태그 작성은 소문자로만! 
   html은 대소문자 구분없이 작성가능하지만, 추후 java script를 함께 쓸 때를 대비해 소문자로만 작성하는 것이 암묵적인 룰이라고 해요. 나중에 코딩이 복잡해 지면, 구조 파악에 도움이 되겠죠? 
2. 태그 열고, 닫는 것을 정확히!
   태그는 오픈태그 <p>로 시작해 닫는 태그</p>를 함께 잘 써 주어야 구조가 혼동되지 않습니다. 
3. 적당히 들여쓰기
   태그는 구조 파악이 용이하도록 적당히 들여써 주는 게 좋다 해요. 
4. VSC 내 줄바꿈 단축키 ; [alt]+z
   VSC 내 html을 작성하다 보면, 우측으로 계속 길어지는데요, 자동줄바꿈 단축키를 눌러 놓으면 아주 쾌적합니다^^ (뼈속에서 우러나오는 경험!)

지금까지 배운 것들을 이용해서 '그저 그런 조개의 꿈'이라는 짧은 동화를 html로 작성해 보겠습니다. 

 

작업 순서를 먼저 머릿속으로 정리해 볼게요! 

 

VSC 실행 ==> 새문서 만들기 ==> 문서 이름 지정 ==> 기본 태그 나오게 하기_!+[enter] ==> 언어 코드 변경 ==> title 작성 ==> body 내용_제목 작성 ==> body 내용_본문작성 ==> 저장 ==> html 문서 실행&확인 ==> 수정 확인

 

1) 새 문서를 만들고 기본 태그들을 불러 와요. 

VSC를 실행시켜, 새 html 문서를 만들어 기본 내용을 먼저 작성해 주었어요! 쉽죠잉?^^

비쥬얼스튜디오 코드 작성 화면

 

2) <h1> 태그를 써서 제목을 작성해요. 

 

3) <p>, <br> 태그를 써서 본문(body)을 작성해요.

 

4) 저장하고 문서를 확인해요!

html 폴더내 해당 파일을 실행 시켜 확인!

 

5) 수정과 확인을 거쳐요!

제목이 너무 커서 h2 태그로 바꿔 주고, 줄바꿈과 문단을 좀더 나누어 시와 같이 표현할 수 있게 수정해 보았어요. 반드시 저장을 하고 새로고침을 해야 수정 내용이 적용되어요^^

수정한 vsc 화면 --> 수정 적용된 웹문서

 

드디어!

html 웹문서 하나를 만들었습니다!

여기에 사진도 들어가고 소리도 들어가고 서식도 들어가면 점점 더 그럴듯 해 지겠죠?

 

다음 수업 때 만나요!

감사합니다^^