3가지 미니 코딩 챌린지

2022.08.06

• <비전공자를 위한 첫 코딩 챌린지> - DAY 5

: 06 3가지 미니 코딩 챌린지

---

Review

 

• <비전공자를 위한 첫 코딩 챌린지> - DAY 5

 

: 3가지 미니 코딩 챌린지를 통해 HTML 맛보기 예제를 시작했다. 문제를 보고 고민한 후 힌트를 보고
문제 풀이를 하는 식이다.
우와 아직 하나도 모르겠어서 고민은 해봤지만 결국 그대로 따라했다.
몇 번 반복해서 연습하다 보면 감이 올 거라고 하셔서 시키는 대로 해보려고 한다.

---

 

1. 화면에 Hello world 출력하기

 

 

처음에 <h>Hello world</h> '이게 다가 아닐까?' 바보같은 고민을 하다가 힌트를 보고 '아 맞다 HTML 만들기 예제였지' 하고 다시 고민했다.
책에서 힌트로 준 HTML 구조에 삽입해보기 시도를 하다 하나도 모르겠어서 일단 풀이를 보고 그대로 따라 쳤다.
웹 페이지 제목을 정하려면 meta 태그와 title 태그를 써야 하나보다. 그러고 나서 'Hello world' 부분은
body 태그를 이용한다. span 태그는 줄을 바꾸지 않는 태그인데 여기서는 h 태그로 대체하는 것도 가능해보인다.

 

2. 나만의 폼 만들기

 

 

일단 첫번째 문제에 썼던 코드를 복붙해서 수정해나갔다.
h 태그가 제목 태그라서 'body 태그 안에 h 태그가 가장 먼저 쓰이겠구나' 까지는 예상이 가능했다.
그다음 img 태그가 쓰일 것 같지만 어떻게 쓰는 건지 잘 모르겠고 그 뒤는 예상도 못했다.
풀이를 보고 그대로 따라했다.

 

 

 

-h 태그는 글자 크기를 2로 설정해서 h2로 썼다.
-img src 태그를 이용해서 이미지 주소를 삽입하고 넓이와 높이를 설정했다.
-form 태그는 사용자 입력 양식을 만들 떄 사용한다.
-Username, Password 폼을 만들 때는 label, input 태그를 사용한다.
사실 이 부분은 잘 모르겠다. 내가 보기에는 이건 외우는 게 아니라 복사해서 쓰는 태그로 보인다.
id는 뭐고 name은 또 뭐지? value는?
*id는 input의 이름을 지정해주는 역할.
-input 태그는 사용자 입력을 받는 폼이다.
-비밀번호를 만들려면 input 태그를 사용하고 type에 password를 쓴다.
-input 태그에 type 속성을 'submit' 으로 주어 실행 버튼을 만들었다.
-'form action="#"'이라고 쓴 것은 #은 공백으로 지정해놓는다는 뜻이다. 아직 넘겨줄 페이지가 없어서
이렇게 설정한다고 한다. 여기에 이동할 페이지를 넣으면 해당 페이지로 이동하게 된다.

3. 메뉴판 만들기

: 이번에도 역시 첫번째 문제에 있던 코드를 복사 붙여넣기 하고 나서 고민을 시작했다.
두번째 문제보다는 쉬웠다.
리스트를 입력하는 부분에서 순서가 조금 헷갈렸지만 따라하다보면 쉬워질 것 같았다.

 

 

 

 

- 메뉴판 제목과 목록으로 레이아웃을 나눈다.
- 숫자 없이 목록만 나열하기에 ol 태그가 아니라 ul 태그를 사용해야 한다.
- style 태그는 CSS와 관련이 있는 것 같은데 head 태그 안에 style 태그로 스타일링을 해줄 수 있다고 한다.

 

 

<코딩하기 순서 정리>

1. 코드를 작성하기 전에 구조를 어떻게 짜면 좋을지 생각해본다.
2. HTML 기본 구조를 먼저 만든다.
3. 원하는 효과를 구현 단위별로 나눈다.
4. 각 단위마다 해법을 고심해본다.
5. 해법은 다양하다. 자신만의 스타일로 구현하고 다른 사람 코드와 비교해본다.

 

 

 

 

 

 

 

 

 

 

 

*이미지 출처

instagram : @inmyflora