[운동 기록 웹페이지 만들기] html 기본 틀 코드 작성하기 (2023.03.02)

Notice

Recent Posts

Recent Comments

Link

« 2024/09 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Tags more

Archives

Today

Total

관리 메뉴

JiYoung Dev 🖥

[운동 기록 웹페이지 만들기] html 기본 틀 코드 작성하기 (2023.03.02) 본문

project

[운동 기록 웹페이지 만들기] html 기본 틀 코드 작성하기 (2023.03.02)

Shinjio 2023. 3. 2. 15:04

어제 간단하게 스토리보드를 만들었고, 오늘은 만든 스토리보드를 보면서 HTML 코드를 작성해 보았다. 아직 HTML 기초 과정만 배운터라 버튼이나 인풋, 테이블 등 안배운 것들이 있었지만 안배운 내용들은 구글링이나 기타 사이트의 개발자 콘솔을 활용해 코드를 따라하며 넣었으며 앞으로 배워나가면서 차차 알맞게 수정하고자 한다. 오늘까지 작성한 코드는 스타일은 하나도 들어가 있지 않은 코드이며, 스타일은 내일 적용해볼 계획이다.

운동 기록 웹페이지 만들기 : 기획 포스팅

[운동 기록 웹페이지 만들기] 기획 (2023.03.01)

프로그래밍 공부를 시작하고 나서 만드는 나의 첫 웹페이지. 사실 파이썬 알고리즘 강의를 듣다가 어렵기도 하고 흥미도 줄어들고 그래서 CSS와 HTML 공부를 같이 시작하며 나만의 웹페이지를 만

danyoujeong.tistory.com

참고로 현재의 웹페이지를 만드는 방법이나 순서는 이에 대해 공부한 적이 없는 관계로 전부 나의 생각에서 나온 순서이다.

HTML 기본 틀 코드 작성하기 1 : 각 페이지별 html 파일 생성하기

코드 작성에 들어가기 전에 웹페이지에 들어가는 여러 페이지들을 html 파일로 생성하였고, 각각의 페이지에 이름을 붙였다. 페이지는 크게 로그인, 회원가입, 다이어리, 캘린더 4개의 페이지로 구성되어 있고 하위로 기타 필요한 페이지를 집어 넣었다. 페이지를 만든 후에는 ! 단축키를 사용해 html의 기본 코드를 입력하고, <head> 태그 안에 <title>을 작성했다.

HTML 기본 틀 코드 작성하기 1 : 스토리보드 보면서 각 요소 집어넣기

스토리보드를 보면서 <body> 태그 내에 페이지에 들어가는 요소들을 순서대로 집어 넣었다. 아래는 작성된 코드와 구현 화면, 스토리보드 화면을 비교한 사진이다.

1. 로그인

아직 배우지 않은 <label>, <input>, <button> 태그가 있는데 타사이트의 로그인 화면을 개발자 콘솔을 보고 html 코드를 따라 작성해 본 것이다. input은 text나 날짜 등을 입력할 수 있도록 하는 입력칸을 뜻하는 것 같고, button은 흔히 아는 버튼이다. button type으로 button이 있고, submit이 있는데 submit은 서버로 데이터를 전달하는 그런 과정을 포함하는 것이라 생각된다. 로그인을 하면 서버로 정보를 전달하고 다음 페이지로 넘어가는데 다음 페이지로 넘어가는 동작은 아마 자바스크립트에서 진행될 거라 생각된다. 따라서 일단은 버튼만 넣어 놓은 상태이다.

2. 로그인 성공

3. 아이디/비밀번호 찾기

4. 아이디/비밀번호 찾기 성공

버튼<button>태그와 링크<a> 태그의 차이점을 확실하게 알 필요가 있을 것 같다. 다 똑같이 버튼처럼 생겨서 <button> 태그를 쓰면 되는 줄 알았는데 네이버를 보니 a태그를 사용하는게 눈에 띄었다. 어떨 땐 <a> 태그를 쓰고 어떨땐 <button> 태그를 쓰는지 알 필요가 있을 것 같다.

<a> vs <button>

<a> 태그의 역할
페이지의 이동, 페이지 내의 다른 영역으로의 이동 등 상호작용이 필요할 경우 사용
문서를 url로 연결

<button> 태그의 역할
url을 연결하지 하고 단순하게 사용자 인터페이스만을 조작하기 위한 버튼
단순 클릭 이벤트, foam 요소에 입력된 내용을 서버로 전송할 때 사용

<button> 태그 type 속성
1. submit: 폼(foam)을 전송하는 기능 (default)
2. reset: 폼(foam) 입력한 내용을 초기화 하는 기능
3. button: 자바스크립트의 도움을 받아 기능 구현 인터페이스를 조작하는 기능

<button>과 <input type="submit"> 차이점
button 요소는 텍스트 뿐 아니라 이미지 요소를 자식으로 포함할 수 있음
그리고 button은 열고 닫는 태그이고, input은 스스로 닫는 태그이기 때문에 button 요소는 span, img 같은 인라인 요소를 안에 포함할 수 있으며 CSS로 스타일을 줄 때 다양한 스타일이 가능

<a>태그와 <button> 태그의 차이 참고 자료

5. 회원가입

6. 회원가입 성공

7. 다이어리

8. 캘린더

간단하게 현재 내가 작성가능한 만큼 코드를 작성해보았고, 오늘 CSS 강의를 다 듣고나서 내일은 위의 코드에 스타일을 입혀보고자 한다.

'project' 카테고리의 다른 글

[Git&GitHub] branch 만들기 (0)	2023.06.13
[Git&GitHub] Git과 Git Hub 사용 기본 (0)	2023.06.13
[JAVA MINI PROJECT] 개발자 키우기 게임 만들기 (2023.04.17~2023.04.23) (0)	2023.04.23
[운동 기록 웹페이지 만들기] css 스타일시트 작성하기 (2023.03.04) (0)	2023.03.04
[운동 기록 웹페이지 만들기] 기획 (2023.03.01) (1)	2023.03.01

'project' Related Articles

JiYoung Dev 🖥

[운동 기록 웹페이지 만들기] html 기본 틀 코드 작성하기 (2023.03.02) 본문

[운동 기록 웹페이지 만들기] html 기본 틀 코드 작성하기 (2023.03.02)

HTML 기본 틀 코드 작성하기 1 : 각 페이지별 html 파일 생성하기

HTML 기본 틀 코드 작성하기 1 : 스토리보드 보면서 각 요소 집어넣기

1. 로그인

2. 로그인 성공

3. 아이디/비밀번호 찾기

4. 아이디/비밀번호 찾기 성공

5. 회원가입

6. 회원가입 성공

7. 다이어리

8. 캘린더

'project' 카테고리의 다른 글

티스토리툴바