[배운내용]

(웹프로그래밍 2강 html 후반부 내용)

1. 설계도면 만들기

페이지의 설계도면을 만들 때는 페이지 전체를 한번에 만들려는 생각보다는 페이지를 구역별로 나누어 부분씩 만드는 것이 중요하다. 그래서 비슷한 성격의 콘텐츠를 div를 이용해서 잘 나누고, 합치는 것이 매우 중요하다.
내용들을 옮기거나 변경할 때에도, div로 잘 분류되어있다면 div로 묶인 콘텐츠들을 한꺼번에 옮길 수 있으므로 수월해 질것이다.

① 카카오 친구목록

친구목록의 한 줄에는 왼쪽(이미지)와 오른쪽(이름과 정보)으로 나뉜것을 알 수가 있다. 하지만 이미지를 누르던, 이름을 누르던 그 친구와의 대화페이지로 이동하기 위해 상단에 a태그로 감싸준 후, 이미지를 위치시키고, div태그를 이용해 이름과 정보를 하나로 묶어낼 수 있다.

또한 친구들 목록에는 등급이 없으므로 ul - li 태그를 이용하여 나열할 수 있다.

아래쪽의 메뉴의 경우 footer를 이용하여 메뉴목록을 만드는 nav로 묶고 또다시 ul - li 태그를 이용하여 메뉴를 작성한다.

---

※TIP) 이미지가 들어갈 공간의 크기는 정해졌지만, 이미지가 아직 준비되지 않은 경우
https://via.placeholder.com/(이미지크기) 를 사용해서 공간을 차지하게 할 수 있다.

ex)

<img src="https://via.placeholder.com/100x50">

---

② 네이버 홈페이지 - 경제M

네이버 메인화면의 '경제M'부분은 여러가지 기사들이 줄지어 있는데, 이에 등급이 없으므로 ul - li 태그로 하나의 기사를 담는다. a 태그 안에 img를 삽입하고, 오른쪽 텍스트 부분은 div로 따로 구분한다. 오른쪽 기사의 첫줄인 '경제M' 부분은 span으로 묶어주고, 다음줄은 제목으로 h3로 입력, 아래 본문부분은 p태그를 이용해 작성해준다.
또한, 아래 '머니그라운드-4일전' 부분은 각각 span으로 묶어주는데,

<span>-</span>

※ 이 부분은 보통은 span으로 묶어주지 않고 다른 방법으로 묶는다.(추후 배울 예정)

③ Bootstrap Agency 홈페이지 - 상단부분

사진 속 구역은 가장 윗부분에 해당하므로 header로 묶어서 표현한다.

그 중 가장 윗부분을 div으로 묶고, 왼쪽 홈페이지로고는 기업명이므로 h1으로 입력 후, 사진파일을 삽입하였고 오른쪽 메뉴는 메뉴태그인 nav로 묶어 리스트화를 해주었다.

그 다음 중간부분인 문구가 나오는 부분을 div로 묶어 "Welcom~"으로 시작하는 부분은 h2로, "It's Nice~"로 시작하는 부분은 h3로 지정한다.

"Tell Me More"은 버튼모양이지만 누르면 다른 페이지로 넘어가는 기능이 있으므로 a태그로 지정해준다.

④HELBAK 홈페이지 - 하단부분

가장 아래 쪽 을 구현하기 위해서, 왼쪽/중앙(화살표)/오른쪽으로 구분한다.

세 부분을 각각 div로 구분하여 묶는다.

왼쪽은 ul - li - a 태그를 이용하여 각각 작성,
중앙은 a태그,
오른쪽은 문구는 p태그, 그 옆의 아이콘들은 ul - li - img 태그를 이용해 작성한다.

2. Quick Review

• input : 타입에 어떤 속성값을 사용하는지에 따라 형태가 달라짐

• checkbox, radio의 차이점 : 다중선택가능 여부

• textarea : 보다 장문의 정보를 서버에 전달

• select option : 드랍다운 형태의 선택옵션

• table : 표정보
  - thread- tr-th : 상단부분
  - tbody : 내용
  - tfoot : 총합계 등 요약부분

• 공간을 만들 때
  - header
  - nav
  - main : 익스플로러에서 지원하지 않으므로 반드시 role과 함께 사용
  - section : 섹션을 대표하는 타이틀 정보가 있어야하므로 반드시 h태그와 함께 사용
  -article : 구역의 정보를 담는 공간. 구역을 대표하는 타이틀정보다 있어야하므로 h태그와 함께 사용
  - aisde : 관계성이 떨어지는 정보입력
  - footer : 웹사이트 최하단 정보기입
  - div : 임의의 구역, 공간을 만드는 태그
  - inline : x축으로 정렬. 줄바꿈현상이 일어나지 않음.
  공간을 만들지 못하고, 상하배치작업이 불가능.
  - block : y축으로 정렬. 즉 줄바꿈현상이 일어남.
  공간을 만들수 있고, 상하배치작업이 가능.

[어려웠던 점]

1. h태그는 순서대로 입력해야하는데, 오늘 실습에서는 h3를 입력했다. 홈페이지에서 가장 1순위 정보가 아니기 때문에 h1이 아닌건 알겠는데, 3이라는 건 어떻게해서 결정하는것일까?
2. span태그에 대한 개념이 아직 잡히지 않아서 조금 혼란이 있었다.

[해결방법]

1. 아직 다른 질문들과 함께 멘토님께 질의 할 예정
2. 팀즈에 나와 비슷한 생각을 하신 분의 질문이 올라와서 답변을 보았다.

p는 paragraph로 문단을 작성할 때 사용하고 span은 보통 글자를 꾸며줄 때 사용합니다. 그래서 사용은

<p>안녕하세요! <span>박용</span>입니다</p>

보통 이렇게 하곤 합니다.

라는 답변이 올라왔다.
또한 구글에 검색한 결과 아래와 같은 속성을 알 수 있었다.

• span 태그의 기본 속성들은 다음과 같습니다.
  display : 디스플레이 요소 변경
  width : 가로 크기 지정
  height : 세로 크기 지정
  background-color : 배경색 지정
  color : 글자색 지정
  font-style : 글자 폰트 설정

실습 강의에서 span의 style정보를 head부분에 입력하는 것을 보았다.
이렇게 스타일 정보를 설정하지 않으면 아무런 변화가 없지만, 상단에서 스타일 정보를 설정하면 span태그를 입힌 단어는 강조색이 입혀지는 것으로 이해했다.

네이버 홈페이지 상단의 경우 '메일 ~TV'까지가 span값, '사전~웹툰'부분이 기본 값인 것으로 이해할 수 있다.

[학습 소감]

아주 조금씩이지만 홈페이지 구성에 대해 알아가는 것이 흥미롭게 느껴지고, '문과라서 안돼' 라고 스스로 한계지은 것이 무색할 정도로 재미도 있고 앞으로가 기대되는 과정이다. 또한, 개발은 가이드라인만 있을뿐 정답은 없다는 생각이 든다. 오늘 강사님이 말씀하신 것처럼 최대한 다양한 사이트들의 케이스를 보고 내것으로 만들어가는 것, 그리고 나의 스타일을 구축해 가는 것이 앞으로 개발자로서 필요한 자세라고 생각된다.