오늘은 2020.07.19 일요일 오전입니다. 일주일을 쉴 틈 없이 달려왔더니 오늘은 12시간 정도를 잤네요 ㅎㅎ 하루는 이렇게 잠을 푹 자는 날이 있어서 너무 좋습니다. 그럼 개운한 마음으로 웹 개발 공부를 해보려고 합니다. 오늘 배울 내용은 바로 지금까지 우리가 배운 태그와 속성을 이용해서 웹 사이트를 완정 하는 것입니다. 설명하기 앞서 지난 시간까지 코딩 한 내용을 가져오겠습니다.
지난 시간에 링크 연결하는 것 까지 배웠죠? 좀 더 사이트 같이 만들어보기 위해 큰 제목을 음식으로 바꾸고 그 다음 큰 제목을 "프링글스는 스위트 마요가 맛있더라"로 바꾸겠습니다. 바꾸는 법은 간단합니다. 지난 강의에서 <h1>, <h2> 태그를 배웠었죠? 그럼 <body> 안에 <h1> 음식 </h1>을 넣어주고 <h2> 프링글스는 스위트 마요가 맛있더라 </h2>로 바꿔주시면 됩니다. 한번 해보겠습니다.
그럼 우리는 음식이라는 큰 제목 아래 FOOD, DRINK, ALCOHOLE이라는 카테고리가 있고 그 밑에 다음 큰 제목인 프링글스는 맛있더라 라는 구조가 있습니다. 여기까지 따라오셨나요? 자 잘하셨습니다! 그러면 이제 각각의 카테고리를 클릭했을 때 어디로 이동시키는 걸까를 생각해봐야 합니다. 그 요소는 바로 7강 때 배운 링크를 이용하여 각각의 atom 코딩으로 연결해주고 싶습니다. <a href="1.html>, <a href="2.html">, <a href="3.html>로 만들어주시면 됩니다.
물론 아직 우리는 1.html만을 완성해놓은 형태입니다. 2.html과 3.html은 따로 직접 만들어주세요. 만드는 방법은 atom왼쪽 부분을 보면 1.html이 보이시죠? 우클릭으로 복사 붙여 넣기를 해서 큰 틀을 그대로 하시고 내용물만 바꿔보세요.
food는 프링글 스니깐 drink 카테고리에서는 소주로 내용물을 바꿔보겠습니다 ㅋㅋ
자 atom에서 링크 태그를 넣어주니 웹사이트에서 밑줄이 그어진 모습을 확인하실 수 있습니다. 즉 FOOD를 누르면 1.html 코딩과 연결이 되고 DRINK는 2.html, ALCOHOLE은 3.html과 연결됨을 알 수 있습니다. 저는 미리 2.html과 3.html을 수정하였습니다. 그러면 웹 페이지의 DRINK 부분을 클릭해보겠습니다.
웹페이지의 제목은 음료이고 큰 제목은 음료, 그다음 제목은 "음료는 사이다가 맛있더라"입니다. 다음은 ALCOHOLE 부분을 클릭해보겠습니다.
웹페이지의 제목은 소주이고 큰 제목은 소주, 그다음 제목은 "소주는 진로가 맛있더라"입니다. 어때요? 감이 좀 잡히시나요? 이렇게 웹페이지는 링크와 링크의 연결을 통해서 완성을 해주면 되는 구조입니다. 여기까지 따라오셨다면 여러분들은 어느 정도 완성된 웹페이지를 스스로 개설하신 겁니다. 뿌듯하지 않나요? ㅎㅎ
아직은 겉보기에 화려하진 않지만 우리는 태그와 속성을 배웠기 때문에 여러분이 어떻게 활용하냐에 따라서 웹 개발 활용도는 무궁무진할 겁니다. 혹시 설명이 부족하거나 이해 안 되는 부분 혹은 다음 글 쓸 때는 이런 식으로 설명해주면 좋겠다 라는 부분이 있다면 언제든지 댓글 달아주시면 바로 답변드리겠습니다. 구독 눌러주시면 자료들 무료로 빠르게 받아보실 수 있습니다~ 그럼 더 좋은 자료들로 찾아뵙겠습니다!
'웹개발' 카테고리의 다른 글
| 10강. 웹 호스팅, 웹 서버, Github (0) | 2020.07.23 |
|---|---|
| 9강. 웹 브라우저와 웹 서버의 관계 (0) | 2020.07.22 |
| 7강. 링크 태그 <a> 속성 href, title, target (0) | 2020.07.18 |
| 6강. HTML에 가장 자주쓰이는 태그(<!doctype html>, <html>, <body>, <head>) (0) | 2020.07.17 |
| 5강. 웹개발 목록 만들기<li>,<ol>,<ul> (0) | 2020.07.16 |
