2023.07.13 모각코 1회차 결과

먼저 html의 개발환경을 구성하기 위해서 visual studio code와 chrome 을 다운로드 받아주었습니다. 

 

그 다음으로는, 수월한 웹 개발을 위해여, vscode 내부에서 몇 가지 확장 프로그램을 설치하였습니다. 

 

 

대표적인 확장 프로그램으로는 

.

.

.

<Bracket Pair color> - 코드가 복잡해질 수록 구분해지기 어려워지는 괄호 같은 기호를 쉽게 구분하게 해줍니다

<indent - rainbow> - 탭 영역의 색깔을 길이마다 다르게하여 코드의 가독성을 증가시켜줍니다.

<Live Server> - 코드에 수정사항이 있으면 웹 페이지를 새로고침 할 필요 없이 실시간으로 업데이트 해줍니다.

 

정도가 있고, 이외에 개발을 더 편하고 코드를 더 잘 보이게 해주는 확장 프로그램을 설치하였습니다. 

 

 

 

 

 

 

 

 

이후, !  + enter 버튼으로 완성되는 자동완성 스켈레톤 코드를 이용하여 , 가장 기초적인 Hello html을 출력해보았습니다.

 

 

 

 

 

 

 

그 다음은, 한 단어가 아닌 위키백과에서 복사한 문서의 텍스트를 그대로 vscode에 붙여넣어 보았습니다.

vscode 상으로는 개행 구분이 잘 되어있지만 막상 페이지에 들어가서 보면, 그냥 일렬로 정렬되어있는 것을 

확인할 수 있습니다.

 

 

 

 

 

따라서 이를, html의 기초가 되는 다양한 태그들을 붙여서, 조금 더 가독성있게 만들어보았습니다. 

어떤가요? html 언어의 태그들을 사이사이 갖다 붙였을 뿐인데, 꽤나 봐줄만한 형식의 문서가 완성되었습니다 !!

마지막으로, 아직 저 태그들을 정확히 사용할 줄은 모르지만, 사용한 태그들에 대해 정리하고 마무리하겠습니다.

.

.

.

 

<h1></h1> 태그 - 텍스트를 강조해줍니다. 직접 해본결과 h뒤의 숫자가 커질수록, 글자의 크기는 작아졌습니다. 

<hr/> 태그 - 오른쪽 사진의 "헬스" 글자 밑에서 확인할 수 있듯이 , 가로 구분선을 만들어줍니다.

<p></p>태그 - 기본적인 개행을 구분해줍니다.

<a>태그 - 텍스트에 링크를 첨부해줍니다.

<li></li>태그 - 오른쪽 사진에서 볼 수 있듯이, 인덱스 기호로 구분해줍니다.