[44일차]HTML의 태그와 문법, 내 첫web프로젝트
생활코딩webn 수업을 진행하면서 나만의 프로젝트를 같이 만들려고 한다.
프로젝트이름은
My Report For Web
매일 데일리리포트를 다른곳에 작성하는것에 귀찮았고
좀더 직관적인 ui로 직접 눈으로 확인하고
그 시간대에 별점까지 매기는걸 목표로한다.
그리고 가능하면 친구랑 공유하는것을 목표로해본다.
깃헙에 레포지토리부터 만들자
데일리리포트를 웹으로 편하게 관리하고 그것을 친구들과 공유할수있게 하고싶다.
할게 산더미같지만 하나하나 차근차근해보자.
대충콘티?
허접하지만 당장 원하는 모냥새가 이렇다. kor eng은 가능하다면 구현하고싶다
그렇게 많은 문장이 들어가지 않을것이기 때문 ㅋㅋ
vscode로 html 시작하기
vscode를 실행시켜주면 저렇게 환영해준다.
Start쪽에 Open folder를 열어준다.
원하는 프로젝트위치에다가 설정해주면된다
How_to_use.html 이라는 파일을 만들었다
대충 데일리리포트에대한 설명을 먼저 적어놓고 그 다음에 어떻게 사용하는지 알려주고싶다.
How to use의 내용은대충 이렇게 만들었다.
What is daily report?
The Daily Report is a record of what I did in a day.
Why do I have to record this?
First, it prevents you from wasting your time.
Second, we can reflect on the past.
How do we use this?
Click the Report tab, and record and evaluate every hour.
이걸 크롬으로 당장열고싶다면 (크롬이 기본 확장자일때)
vscode에서 브라우저 바로열기
Extention 탭에서 open is browser 확장자를 깔고
Open In Default Browser를 누르면 된다.
이페이지에 다소 떨어지는 부분이 많다.
- 문단나누기
- 제목설정
- 강조하기
- 칸띄우기
그래서 강의를 통해 배운 <h1>태그를 활용할거다.
제목으로 할래 <h1></h1>
제목으로 정하고싶은 부분을
저 두개사이에 넣자
h뒤에 붙는 숫자에따라 어떻게 변하는지 확인하자
<h1>What is daily report?</h1>
The Daily Report is a record of what I did in a day.
<h2>Why do I have to record this?</h2>
First, it prevents you from wasting your time.
Second, we can reflect on the past.
<h3>How do we use this?</h3>
Click the Report tab, and record and evaluate every hour.
오호라! h뒤에 숫자가 커질수록 제목의 크기가 작아지구나!
나는 그냥 전부다 h1로 바꿨다.
강조해줘 <strong></strong>
First 와 Second를 좀 진하게 하고싶다.
<h1>What is daily report?</h1>
The Daily Report is a record of what I did in a day.
<h1>Why do I have to record this?</h1>
<strong>First,</strong> it prevents you from wasting your time.
<strong>Second,</strong> we can reflect on the past.
<h1>How do we use this?</h1>
Click the Report tab, and record and evaluate every hour.
말을 꽤나 잘 듣는다.
칸띄워줘 <br>
first와 second를 한칸띄우고 싶다
<h1>What is daily report?</h1>
The Daily Report is a record of what I did in a day.
<h1>Why do I have to record this?</h1>
<strong>First,</strong> it prevents you from wasting your time.<br>
<strong>Second,</strong> we can reflect on the past.
<h1>How do we use this?</h1>
Click the Report tab, and record and evaluate every hour.
문단좀 나눠줘 <p></p>
아까처럼 br로도 띄우는 방법이 있지만 <p>를활용해 문단을 나눌 수 있다.
<h1>What is daily report?</h1>
The Daily Report is a record of what I did in a day.
<h1>Why do I have to record this?</h1>
<p><strong>First,</strong> it prevents you from wasting your time.</p>
<p><strong>Second,</strong> we can reflect on the past.</p>
<h1>How do we use this?</h1>
Click the Report tab, and record and evaluate every hour.
아직 배우지않았지만 css문을 활용해서 문단간에 넓이를 제어할 수 있다.
<h1>What is daily report?</h1>
The Daily Report is a record of what I did in a day.
<h1>Why do I have to record this?</h1>
<p><strong>First,</strong> it prevents you from wasting your time.</p>
<p style="margin-top:25px;"><strong>Second,</strong> we can reflect on the past.</p>
<h1>How do we use this?</h1>
Click the Report tab, and record and evaluate every hour.
문단사이 25px만큼 넓이가 넓어진것을 확인할 수 있다.
이미지 넣어줘 <img>
두번째 제목, 첫번째에 시간을 상징하는 이미지를 하나 넣고싶고
두번째에 반성하는 이미지를 하나넣고싶다.
프로젝트 디렉토리에 저장하고, 찾기 쉽도록
First와 Second로 이름을 바꿔준다.
그리고 해당 이미지를 불러와보자
<h1>What is daily report?</h1>
The Daily Report is a record of what I did in a day.
<h1>Why do I have to record this?</h1>
<p><strong>First,</strong> it prevents you from wasting your time.</p>
<img src="Why_First.jpg" width="50%">
<p style="margin-top:25px;"><strong>Second,</strong> we can reflect on the past.</p>
<img src="Why_Second.jpg" width="50%">
<h1>How do we use this?</h1>
Click the Report tab, and record and evaluate every hour.
뒤에 넓이설정을 안해주면 지멋대로 사진이 자기 크기대로 칸을 차지한다.
꼭 100%아니더라도 픽셀단위로 수정가능하다.
어느정도 하나는 페이지 구실을 하긴했다.
슬슬 이런 탭을 만들고싶다.
그렇다고
How to Use
Report
Friends
Chat
이런식으로 코드를 넣어도 칸을무시한다.
그렇다고 하나하나 <br> 넣기에는 뻔하다.
리스트 만들어줘<li></li>
<li>How to Use</li>
<li>Report</li>
<li>Friends</li>
<li>Chat</li>
<h1>What is daily report?</h1>
The Daily Report is a record of what I did in a day.
<h1>Why do I have to record this?</h1>
<p><strong>First,</strong> it prevents you from wasting your time.</p>
<img src="Why_First.jpg" width="50%">
<p style="margin-top:25px;"><strong>Second,</strong> we can reflect on the past.</p>
<img src="Why_Second.jpg" width="50%">
<h1>How do we use this?</h1>
Click the Report tab, and record and evaluate every hour.
목록앞에 숫자를 넣고싶으면
<ol></ol>
로도 활용가능하다
<li>의 부모태그 <ul></ul>
<li>는 <ul></ul>이라는 부모태그를 갖는다.
<ul>
<li>How to Use</li>
<li>Report</li>
<li>Friends</li>
<li>Chat</li>
</ul>
<h1>What is daily report?</h1>
The Daily Report is a record of what I did in a day.
<h1>Why do I have to record this?</h1>
<p><strong>First,</strong> it prevents you from wasting your time.</p>
<img src="Why_First.jpg" width="50%">
<p style="margin-top:25px;"><strong>Second,</strong> we can reflect on the past.</p>
<img src="Why_Second.jpg" width="50%">
<h1>How do we use this?</h1>
Click the Report tab, and record and evaluate every hour.
ul로 묶은것처럼
ol로 묶으면 앞에 숫자를 매겨준다
<ol>
<li>How to Use</li>
<li>Report</li>
<li>Friends</li>
<li>Chat</li>
</ol>
굳이 사용하지는 않겠다.
페이지 제목 설정해줘 <title></title>
페이지 제목이 파일명이니까 조금 촌스럽다.
<title>My Report for Web - How to Use</title>
<ul>
<li>How to Use</li>
<li>Report</li>
<li>Friends</li>
<li>Chat</li>
</ul>
<h1>What is daily report?</h1>
The Daily Report is a record of what I did in a day.
<h1>Why do I have to record this?</h1>
<p><strong>First,</strong> it prevents you from wasting your time.</p>
<img src="Why_First.jpg" width="50%">
<p style="margin-top:25px;"><strong>Second,</strong> we can reflect on the past.</p>
<img src="Why_Second.jpg" width="50%">
<h1>How do we use this?</h1>
Click the Report tab, and record and evaluate every hour.
utf-8형식으로 열기
<title>My Report for Web - How to Use</title>
<meta charset="utf-8">
<ul>
<li>How to Use</li>
<li>Report</li>
<li>Friends</li>
<li>Chat</li>
</ul>
<h1>What is daily report?</h1>
The Daily Report is a record of what I did in a day.
<h1>Why do I have to record this?</h1>
<p><strong>First,</strong> it prevents you from wasting your time.</p>
<img src="Why_First.jpg" width="50%">
<p style="margin-top:25px;"><strong>Second,</strong> we can reflect on the past.</p>
<img src="Why_Second.jpg" width="50%">
<h1>How do we use this?</h1>
Click the Report tab, and record and evaluate every hour.크롬에선 딱히 한글출력 이상없는데
다른브라우저로 실습하면 간혹
출력을 utf-8이아닌것으로 출력한다고 했다 그래서 한글이 깨진다고한다.
타이틀밑에
<meta charset="utf-8">를 추가해준다.
본문구분하자 <body></body> <head></head>
<head>
<title>My Report for Web - How to Use</title>
<meta charset="utf-8">
</head>
<body>
<ul>
<li>How to Use</li>
<li>Report</li>
<li>Friends</li>
<li>Chat</li>
</ul>
<h1>What is daily report?</h1>
The Daily Report is a record of what I did in a day.
<h1>Why do I have to record this?</h1>
<p><strong>First,</strong> it prevents you from wasting your time.</p>
<img src="Why_First.jpg" width="50%">
<p style="margin-top:25px;"><strong>Second,</strong> we can reflect on the past.</p>
<img src="Why_Second.jpg" width="50%">
<h1>How do we use this?</h1>
Click the Report tab, and record and evaluate every hour.
</body>
위에 타이틀과 utf-8로 설정하는 코드는 본문이라기 보다 해당 페이지를 설명하는 코드다.
그래서 html에선 구분을 해줘야한다. 각각 head와 body로
최고위층태그 <html></html>
그리고 코드맨 첫줄 이게 html문이라고 적어줘야하는게 국룰이란다.
<!doctype html>
<html>
<head>
<title>My Report for Web - How to Use</title>
<meta charset="utf-8">
</head>
<body>
<ul>
<li>How to Use</li>
<li>Report</li>
<li>Friends</li>
<li>Chat</li>
</ul>
<h1>What is daily report?</h1>
The Daily Report is a record of what I did in a day.
<h1>Why do I have to record this?</h1>
<p><strong>First,</strong> it prevents you from wasting your time.</p>
<img src="Why_First.jpg" width="50%">
<p style="margin-top:25px;"><strong>Second,</strong> we can reflect on the past.</p>
<img src="Why_Second.jpg" width="50%">
<h1>How do we use this?</h1>
Click the Report tab, and record and evaluate every hour.
</body>
</html>링크로 연결해 <a></a>
데일리레포트가 뭐냐는 문단에서 유튜브링크를 하나 걸고싶다.
체인지그라운드의 데일리레포트 권장 영상인데
이링크를 넣어서 좀더 용이하게 설명하고싶다.
<!doctype html>
<html>
<head>
<title>My Report for Web - How to Use</title>
<meta charset="utf-8">
</head>
<body>
<ul>
<li>How to Use</li>
<li>Report</li>
<li>Friends</li>
<li>Chat</li>
</ul>
<h1>What is daily report?</h1>
The Daily Report is a record of what I did in a day.<br>
Let's refer to <a href="https://www.youtube.com/embed/-L8P4MisfRI">this video.</a>
<h1>Why do I have to record this?</h1>
<p><strong>First,</strong> it prevents you from wasting your time.</p>
<img src="Why_First.jpg" width="50%">
<p style="margin-top:25px;"><strong>Second,</strong> we can reflect on the past.</p>
<img src="Why_Second.jpg" width="50%">
<h1>How do we use this?</h1>
Click the Report tab, and record and evaluate every hour.
</body>
</html>
한칸띄고 Let's refer to this video라는 문장을 하나 더 넣었다.
this video에 링크를 걸었다.
배운걸 토대로 각메뉴마다 탭을 활성화 시키자
<!doctype html>
<html>
<head>
<title>My Report for Web - Home</title>
<meta charset="utf-8">
</head>
<body>
<ul>
<li><a href="Home.html">홈</a></li>
<li><a href="How_to_use.html">사용법</a></li>
<li><a href="Report.html">레포트</a></li>
<li><a href="Friends.html">친구</a></li>
<li><a href="chatting.html">채팅</a></li>
</ul>
<h3>login form 구현예정</h3>
</body>
</html>기본 메뉴 틀이다
전부 한글로 바꿨다.
결국 사용자 편의성을 따지려면
친구들한테 더 친근한 언어로 해야하기 때문이다.
아직 더 구현해야할게 많다 하지만 시작이 반이다.
홈탭
대충 영업하는 화면과 로그인, 회원가입형태를 구현하고싶다.
사용법탭
마지막 문단에 어떻게 사용하나요?가 있는데
기능구현이 어느정도 되면 작성예정이다.
나머지 탭도 다 구현예정이다.