728x90
파이썬이나 C언어는 겨울방학때 조금 배워놓은게 있어서 완전초보는 아닌지라 이렇다 할 결과물이 있지만 HTML은 정말 처음 배우는거라 부끄럽지만 결과물은.. 쌩 기초입니다.
그 전까지는 비주얼스튜디오 코드만 사용하여 1차원적인 웹페이지를 만들었다면 8주차부터는 깃허브(github)에 HTML과 CSS를 업로드 하여 나만의 홈페이지를 만들 수 있었습니다.
아래는 HTML 코드입니다. (신상 정보는 모두 바꾸었습니다)
<!DOCTYPE html> <htmllang="kr">
<head>
<metacharset="UTF-8">
<title>이름</title>
<link rel="stylesheet" href="myfirstccs.css">
</head>
<body>
<header>
<h1>이름</h1>
<nav>
<a href = "#one"> One </a>
<a href = "#two"> Two </a>
<a href= "#three"> Three</a>
</nav>
</header>
<section>
<h2 id="one"> 여행 가보고싶은 국가</h2>
<ul>
<li>포루투갈</li>
<li>코스타리카</li>
<li>멕시코</li>
<li>콜롬비아</li>
<li>페루</li>
<li>크로아티아</li>
<li>캐나다</li>
<li>프랑스</li>
<li>오스트리아</li>
<li>스위스</li>
<li>스웨덴</li>
<li>핀란드</li>
<li>독일</li>
<li>벨기에</li>
<li>미국</li>
<li>슬로베니아</li>
<li>칠레</li>
<li>오스트레일리아</li>
</ul>
</section>
<section>
<h2 id="two">내가 20대 때 이루고 싶은 목표</h2>
<p>
잘 자고 잘 먹기(100%) <progress value = "1"> </progress>
<br> 1000만원 모으기(20%) <progress max = "100" value = "20"> </progress>
<br> 교환학생 다녀오기(0%) <progress max = "100" value = "0"> </progress>
<br> 드럼 배우기 (13%) <progress max = "100" value = "13"> </progress>
<br> 여러가지 알비 해보기(15%) <progress max = "100" value = "15"> </progress>
<br> 1년에 영화 12개 보기(45%) <progress max = "100" value = "45"> </progress>
<br> 매일매일 일기쓰기(90%) <progress max = "100" value = "90"> </progress>
<br> 글 100개 쓰기(8%) <progress max = "100" value = "8"> </progress>
<br> 엑티비티 도전하기(30%) <progress max = "100" value = "30"> </progress>
<br> 강아지 산책 매일하기(88%) <progress max = "100" value = "88"> </progress>
</p>
</section>
<section>
<h2 id="three"> 내가 살면서 행복을 얻는 취미 </h2>
<details open>
<summary>영화관에서 혼자 영화보기</summary>
<p>제가 2020년에 본 영화는 1917, 블랙스완, 하울의 움직이는 성이 있습니다.
저는 이른 아침이나 늦은 밤에 영화관에서 혼자 영화보는 것을 좋아합니다.
저는 영화관에서 영화 볼 때 간식으로 핫도그를 먹는 것을 좋아합니다. 특히
마늘 후레이크가 올려진 뜨거운 갈릭 핫도그를 좋아합니다. 음료는 콜라보다는
사이다를 더 좋아합니다. 하지만 매번 핫도그와 사이다를 먹는 것은 아닙니다.
때에 따라 나초를 먹기도 합니다. 영화의 장르가 슬프거나 어두운 경우 핫도그 보다는
나초와 자몽 에이드를 선호하는 편입니다. 제가 좋아하는 영화 장르는 뮤지컬 영화입니다.
5월 21일 "위대한 쇼맨"이 재개봉 한다고 하여 새벽에 혼자 영화보러 갈 예정입니다.
위대한 쇼맨은 슬프거나 어둡지 않기 때문에 갈릭핫도그와 사이다를 먹을 예정입니다.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum." "Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis
et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur
aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</details>
</section>
<footer>
<p>
<img src= "uni.jpg" alt = "대학 이름"/> <br>
이페이지는<b>이름</b>에의해만들어졌습니다.
더자세히알고싶으면<a href="http://www.instagram.com">
저의인스타그램</a>을 방문해주세요.
</p>
</footer>
</body>
</html>CSS입니다. 사진 크기조절, 폰트 크기, 색깔 기능을 추가하였습니다.
html, body { height: 100%; font-family: "Open Sans", sans-serif; color: plum; }
h1 { font-size: 70px; }
h2 { font-size: 36px; }
p {
font-size: 13px; color:black; line-height: 2;
}
img { max-width: 100%; }
오류 해결 부분:
깃허브를 처음 사용해보았는데 나의 링크 주소를 받아 붙여넣기 하면 자꾸 404에러가 뜨거나 초기 설정했던 제목만 뜨는 것이였습니다. 오류를 구글링해봐도 이해하지 못했고, 결국 교수님께 여쭤보았습니다. 그 결과 HTML의 이름을 "index"로 바꿔보라는 답변을 받았고 문제를 해결할 수 있었습니다. 정확한 이유는 모르겠지만 교수님의 답변을 빌리자면 깃허브는 업로드 된 파일을 읽어들일 때 HTML은 무조건 파일명이 index여야 읽는다는 것이였습니다. 잘 이해가 되지는 않았으나 실제로 후에 수업에서도 index로 파일명을 설정했더니 오류가 발생하지 않았습니다. 혹 이에대해 정확히 아시는 분은 댓글 부탁드립니다.
느낀점:
깃허브는 처음 사용해보았는데 돈을 지불하지 않아도 나의 자료를 하나로 묶어주고 이를 무료로 도메인 주소로 제공한다는 점이 흥미로웠습니다. 학과 선배님이 말씀해주신 건데 개발자들 사이에서 깃허브에 업로드 된 자료들을 "잡초를 심는다"라고 표현한다고 합니다. 잡초가 많이 심겨있을 수록 고평가를 받는다는 말이겠죠? 저는 아직 초보자이지만 열심히 대외활동이나 공모전에 참가하여 다양한 경험을 가진 개발자가 되도록 노력하겠습니다.
728x90
'프로그래밍 > 웹 프로그래밍' 카테고리의 다른 글
| [학교/웹프로그래밍프로젝트/20.06.22] 웹 프로그래밍 프로젝트 기획 (2) (1) | 2020.06.28 |
|---|---|
| [학교/웹프로그래밍프로젝트/20.06.01] 웹 프로그래밍 프로젝트 기획 (1) (0) | 2020.06.28 |
| [학교/HTML+CSS/20.05.23] HTML 10주차 (0) | 2020.06.28 |
| [학교/HTML+CSS/20.05.14] HTML 9주차 (0) | 2020.06.28 |