[생활코딩] HTML 4일차 - 웹사이트를 제작해보자
*이 포스팅은 생활코딩 수업을 따라가고 있습니다
https://opentutorials.org/course/3084/18431
여태까지 배웠던 것을 끌어모아 간단하게 웹사이트를 제작해보자!
1. 웹사이트의 구조
홈에 해당하는 index.html 파일과 각각의 내용을 포함하고 있는 1, 2, 3.html 파일을 엮어 웹 사이트를 들고자 한다. h1와 h2로 메인 제목인 WEB과 중간 제목 HTML을 차별화시켜주자.
<h1>WEB</h1>
<h2>HTML</h2>
더 크고 아름다운 WEB과 약간은 작아진 HTML을 볼 수 있다.
2. 구조를 짰던 대로 페이지들을 링크로 연결
리스트의 이름을 클릭하면 해당 페이지로 이동하도록 링크를 걸어준다.
그 결과 아래와 같이 클릭할 수 있게 바뀌었다.
3. 링크로 연결될 웹페이지를 만든다.
링크를 걸어는 놨지만 사실 아직 "1.html "이라는 파일밖에 만들지 않은 상태이다.
얼른 요 파일을 복사해 다른 파일들을 만들어보자. 순서는 아래와 같다.
1) html 파일을 툴(또는 윈도 창에서) 복사해서 2, 3, index 등을 만들고 내용을 수정한다.
2) 각 html 파일의 내용을 넣어준다.
- 예제 작성을 위해 위키피디아에서 항목별 관련 내용을 긁어왔다.
위키피디아에서 긁어온 CSS 관련 내용이다!
나머지도 비슷한 형식으로 만들어준다.
4. 짜잔 순식간에 웹페이지 완성!
자 이제 링크로 연결된 모든 페이지들이 완성되었다!
순서대로 링크를 눌러보며 스스로 직접 만든 웹페이지에 감탄해보자!
#코딩 #html #생활코딩 #코딩독학 #프로그래밍
SF 소설을 좋아하신다면 아래 링크에서 밀리의 서재에서 출판한 책 [Dome - 기억 정렬 붕괴 - part1] 도 둘러봐주세요. part2 또한 집필이 완료되어 계약 대기 중에 있습니다.
종이책 출간도 가능하오니 관심 있으신 SF 출판사 분들의 연락을 환영합니다.
돔: 아무나 - 밀리의 서재 (millie.co.kr)
21세기 사랑에 관한 시 - 사랑의 파산
https://brunch.co.kr/brunchbook/love-bankruptcy
↑↑↑↑
길지 않으니 후루룩 읽기 편합니다!
빠르게 감성 충전이 필요하시면 읽어보시기를 강력 추천드려요!
