간단한 html만들기

hyuk(정윤혁)·2021년 4월 2일

웹사이트 구현

html 지식 없는 상태에서 웹사이트를 봤을 때 이건 어떻게 만드는 걸까..?라는 궁금증을 항상 가지고 있었다. 어쩌다 한 번 키보드를 잘 못 눌렀을 때 뜨는 검사창에 뜨는 무수한 코드들을 보며 영어로 써있는데 뭐라는 건지 알 수 없는 말들이라고 단정지었던 날들이 있었다. 하지만 조잡하지만 내가 이러한 웹사이트를 구현해볼 수 있다는 사실에 매우 흥분됐다.

  • 지식이 사실 전무했기 때문에 간단히 따라하는 것부터 시작했다.
  • 주제는 평소에 관심이 많은 운동에 관한 사이트를 만들어보기로 했다.
  1. vscode를 사용하여 index.html파일을 생성했다.
  2. !+tap을 통해 기본적인 html양식을 불러왔다.
  3. 웹사이트 상단에 제목으로 뜨는 부분을 title을 통해 혁`s 운동루틴이라고 제목을 지어봤다.
  4. body부분의 색을 body style="background-color:white;"를 통해 하얀색 바탕으로 만들었다.
  5. 밋밋한 배경에 뭔가 운동을 하는 active한 헬스장 배경을 넣고 싶어서 img scr="gym.jpg" width="20%"를 넣었고, width="20%"를 통해 크기 조정을 했다.
  6. 본문은 h1을 통해 혁`s 운동루틴이라고 똑같이 제목을 작성했다.
  7. 그리고 추가적으로 2가지 파트에 대한 정보를 보여주는 html을 만들어 a href="1,2.html을 통해 켜질 수 있도록 링크를 걸어놨다.

이렇게 간단하게 웹 사이트를 만들어 봤는데 아직 부족한 부분이 많아 좀 더 공부를 해 update할 필요성을 느꼈다.

profile
노션 저장소는 🏠홈버튼 눌러주세요 !

0개의 댓글