19. 책에서 내준 문제 예제.

마지막에 책에서 내준 간단한 예제 3가지를 풀어보았다.

조금 불만족 스러운 부분도 있었지만 

문제없이 내나름대로 머리속에 그려서 금방 레이아웃을 잡을수 있었다. (사실 너무 밋밋해서 인라인 style로 간단한건 조금 추가하긴하였다.

뭔가 배우긴 배웠구만 하는 생각이 들었다. 이렇게 구성하는것이 옳은 것인지는 모르겠으나 일단은 내 나름대로 구현해보왔다.

아래는 작성한 예제다.

 

1. 포스트잇 예제.

See the Pen Untitled by Super Novice (@Super-Novice-the-typescripter) on CodePen.

2. 로그인 폼.(시멘틱 태그를 생각해서 article태그에 넣어서 만들어보았다. 로그인은 웹페이지 문서내에 공통된 컴포넌트?로 들어가기때문에 article태그를 사용하였다.)

 

See the Pen Untitled by Super Novice (@Super-Novice-the-typescripter) on CodePen.

3.목차 구현.(예제에는 depth마나 숫자가 하나씩 더붙는데 그냥 태그만을 사용해서는 뎁스가 늘어날때마다 숫자가 하나씩 더 붙지 않는다 )

 

See the Pen Untitled by Super Novice (@Super-Novice-the-typescripter) on CodePen.

HTML은 들여쓰기를 어떤식으로 해야할지 감이 잘 안온다. br태그의 위치도 그렇고 vscode로 작성하고 코드펜으로 옴길때 들여쓰기가 지옥의 황천들여쓰기로 변해서 조금 잔망스럽다. 예제에 표만들기가 당연히나올줄알았는데 안나와서 조금 섭섭하다. table,tr,th,td태그들이여 잊지 못할친구들(실제로는 표를 잘 안사용하나? 게시판은 뭐로 만들지? 무튼...) 

 

느낀점.

학습을 해보며 HTML이 왜 알아보기 어려운지를 알게 되었다. 태그의 이름을 너무 줄여서 사용하기 때문에 뭔지 몰랐던것이다.(자체적으로 난독화 걸어논느낌) 

그래서 학습하며 무엇의 약자인지를 하나씩 알아보니. 이제는 눈에 잘보이는것같다. 

HTML의 의미가 Hyper Text Markup Language라는것. 마크업 언어 ! 프로그래밍 언어가 아니다. 이건 예전부터 알고있었지만. 무엇에 약지인지는 머리속에 넣어 놓고 있지 않았다.

컴공인 대학 초기때가 생각난다. C언어 책들고 다니면서 Scanf로 간단한 입력 프로그래밍만 하던 내게 어떠한 사람이 CPU가 무엇의 약자인지 알고있냐고 물어봤을때 대답을 못했었던 그 창피함을 기억하고 있다.(중앙처리장치Central Processing Unit) 그후로 10년이 넘는 시간동안 잃어버리지 않고 내머리속에 각인되었다. 이처럼 HTML도 각인될것이다. 어떠한 강렬한 창피함은 머리속에 잘기억남는다. 또한 학습할 대상에 어떠한 스토리를 만들어내면 더욱 기억하기 쉬운거같다. 해당 블로그를 마치 싸이월드 다이어리처럼 작성하는 이유이기도하다. 

 이제 웹페이지의 스케치(HTML) 하는 법은 대락 배웠으니 채색(CSS)을 하는것으로 넘어가자!