[개발자의품격][부트캠프][1기][2~4차시] HTML부터 CSS까지 - HTML 주요 포인트

1~4차시까지 HTML부터 CSS까지 배울 수 있었다(5차시에 CSS로 자소서 페이지를 만들어 보는 실습이 남아 있기는 하다). 1차시에는 VS Code와 Extension, GitHub Desktop, Node.js 등을 설치 및 세팅한 후 HTML의 기본적인 내용을 약간 다루었다. 그 내용은 "[개발자의품격][부트캠프][1기][1차시] HTML 주요 포인트"에서 간단히 정리하였다.

---

HTML 주요 포인트

2차시부터 본격적으로 HTML 속으로 들어갔다. 텍스트 포맷팅 관련 태그들 중 <em>과 <i>가 있다. 둘 다 이탤릭체로 텍스트를 보여준다. 하지만 용도에는 완전한 차이가 있다. 사람의 눈과 달리 컴퓨터(검색엔진, 스크린 리더)는 이를 명확히 구분한다. 멘토님은 이 점을 매우 강조하셨다(이러한 강조는 CSS가 끝날 때까지 멈추지 않는다). 그 덕분에 별생각 없었던 웹접근성이 머릿속에 별표 쳐졌다.

 

미술작품의 제목에 쓰이는 태그가 별도로 존재한다는 것이 놀라웠다. 저작물의 출처를 표기하는 데 사용하는 <cite>이다. 참조, 인용 관련 요소에서 배운 내용이다. 그 밖에 긴 인용 <blockquote>, 약어 <abbr> 표현을 위해 사용하는 태그 들도 있었다. 인상적이었던 점은 텍스트의 의도에 따른 각각의 태그들이 존재한다는 것이다. 문서를 눈으로 볼 때에는 별 차이가 없더라도 HTML 태그가 작성된 코드에 의해서 전혀 다른 문서가 될 수 있다는 것이다. 예를 들어 <p> 태그 안에 주소를 작성할 수 있다. 하지만 <address> 태그가 별도로 존재고, 주소 작성에 사용되어야 한다. 앞서 언급한 웹접근성과 같은 맥락이다. 멘토님은 올바른 HTML 문서 작성 습관을 강조하셨고, 나에겐 표준과 야매, 고수와 하수의 차이가 발생하는 지점으로 이해되었다.

 

링크에서 <iframe>을 잠깐 다뤘는데 전체 화면에서 부분의 변화를 다루는 것으로 보였다. 'SPA 개념과 비슷하네?'라는 생각이 들었다. 아니나 다를까 예전에 JAVA, JSP, PHP에서 주로 사용하던 방식이며, 요즘은 Vue, React에서 SPA 방식으로 구현하기 때문에 잘 사용할 일이 없다고 한다.

 

<input> 태그를 꽤 길게 다뤘다. 이 태그에 대한 중요성을 직접적으로 언급하셨는지는 기억나지 않는다. 분명한 것은 특히 길고 세세하게 다루셨다는 점이다. <input> 태그로 버튼을 구현할 수 있지만 실무에서는 <button> 태그를 주로 사용한다. <input> 태그의 checkbox와 <label> 태그를 id, for 속성을 이용해 연결하는 방법을 배웠다. 이러한 연결은 조그마한 체크 박스가 아닌 텍스트를 클릭해도 체크 이벤트가 작동하는 UX를 구현한다. <label> 태그 안에 <input> 태그를 작성하는 방식도 동일한 효과를 주는데, 전자가 후자보다 코드가 길고 복잡하지만 검색엔진과 스크린리더 입장에서는 더 좋은 코드라고 한다.

 

<form> 태그 안에서 다루는 <input> 태그도 중요한 포인트이다. email 타입의 경우 <form> 태그 밖에서는 text 타입과 별 다른 것이 없어 보인다. 하지만 <form> 태그 안에서 submit 속성을 이용한 저장을 하게 되면 email 타입의 경우 입력창에 '@'가 포함되어 있지 않으면 경고 메시지가 뜬다. required 속성도 마찬가지이다.

 

<input> 태그에서 숨겨진 입력 필드에 관해서도 다루었다. hidden 타입으로 랜더링이 끝난 웹 페이지에서 보이지는 않지만, 존재하는 입력 필드에 관한 것이다. "폼 제출 시 사용자가 변경해서는 안 되는 데이터를 함께 보낼 때 유용하게 사용"되는 것으로, 좀 더 구체적인 사례로 "업데이트되어야 하는 데이터베이스의 레코드를 저장하거나, 고유한 보안 토큰 등을 서버로 보낼 때 주로 사용"된다고 한다.

 

<input> 태그에서 셀렉트 박스와 라디오 버튼에 대해서 다뤘는데, 선택 옵션이 많은 경우에는 셀렉트 박스를, 그렇지 않을 경우에는 라디오 버튼을 사용하는 것이 UX적으로 좋다고 강조하셨다. 라디오 버튼에 비해 셀렉트 박스가 코드가 더 간편하기 때문에 개발자들은 UX를 외면하고 싶은 유혹을 많이 받는다고 한다. 하지만 멘토님은 시종일관 품격 있는(?) 자세를 강조하신다.

 

<datalist> 태그는 멘토님이 애용하는 기능이라고 한다. 셀렉트 박스와 유사한 기능으로서 셀렉트 박스와 비교했을 때 장점은 입력창에서 검색이 가능하다. 단점은 선택된 내용을 사용자가 수정할 수 있기 때문에 DB에 없는 결과가 날아갈 수 있다. 또한 셀렉트 박스의 value 속성에 지정하는 코드와 같은 기능을 사용할 수 없다는 점이다. 개인적으로는 리스트 들을 검색 가능하다는 점과 잘 빠진 입력창이 마음에 들었다.

 

<form> 태그는 서버에 폼을 보낼 때 사용한다. 파이썬 Django를 독학할 때 이 태그를 접한 경험이 있다. method 속성에서 get과 post로 조회가 가능하다. get과 post의 차이점은 url에 있다. 조회 시 url을 보여주면, 그래서 그 url을 복붙 해서 사용할 수 있으면 get이고, 그렇지 않으면 post이다. 이 부분을 복습할 때 REST API(GET, POST, PUT, DELETE)와 어떻게 다른지 궁금해졌다. REST API에서 POST는 조회가 아니라 생성이기 때문이다. 다음 수업에서 이 부분을 질문했고 "클라이언트 단에서 조회하는 방식이며, REST API는 서버단에서 정의하는 방식"이라는 답변을 들었다.

 

화면 레이아웃에 관한 내용이 마지막으로 다뤄졌다. 예전에는 <div> 태그로 레이아웃을 잡았다. HTML5부터는 "<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>"와 같은 시맨틱 태그(Semantic tag)를 사용한다. 시맨틱 태그를 이용하는 것이 웹접근성을 고려한 자세이며, 처음 배울 때부터 품격 있는 습관을 들여야 한다고 강조하셨다!

 

실습 소스코드 : https://github.com/postforty/bootcamp/tree/main/html