[김버그 HTML & CSS] - (1)

yongkini ·2021년 10월 12일
0

수업 내용을 바탕으로 만들어본 only html 자기 소개 - 용기위키 사이트

=> 사이트 링크

: 안에는 h1, ul, ol, li, a태그 등 다양한 태그를 썼지만 일단 전체적인 프레임을 시맨틱으로 잡아본다는 측면에서 작성했고, 위와 같이 짜봤다. 먼저 이 페이지의 이름 혹은 로고와도 같은 부분인 '용기위키'를 header로 했고, 그 밑에 나에 대한 소개부분을 한 섹션으로 나눴다. 큰 틀에서 그 바로 밑에 전체 페이지의 내용이 나를 소개하는 내용이기에 사이드 프로젝트 바로가기도 나의 소개에 해당되지만 직접적으로 관련되지는 않으면서도 페이지의 내용과 관련되므로 aside에 배치했다. nav는 position:fixed를 걸어놓고 우측 하단에 놨고, footer에는 나의 깃헙 링크를 걸어뒀다. 그리고 마지막으로 section안에 article들은 각각을 따로 떼어놔도 고유의 영역으로 독자적인 의미를 갖는다고 판단하여(각각 나의 인적사항, 기술 스택, 개발 경험이다) article을 썼다.

=> 내가 만든 html 코드를 테스팅 해본 결과

: 꽤나 많은 오류가 있었다.

  • 일단 <br/> 태그를 <ol>의 자식 노드로 쓰면 안된다(에러)
  • 마지막으로 section에는 제목을 달아주는 것을 권고한다(에러는 아니지만 권고 및 경고사항)

: 이처럼 특정 사이트를 이용하면 내 HTML 태그가 웹 표준을 잘 지켰는지 체크할 수 있다.

HTML의 중요성
  • HTML은 서버로부터 전달되는 JS, CSS, etc 중에 가장 베이스가 된다. why? HTML 마크업이 없으면 브라우저에 아무것도 렌더링 할 수 없음. 렌더링을 위한 가장 핵심 및 기본이 되는 정보가 HTML에 담겨있다.
  • 이러한 HTML의 구조와 기본 철칙 등을 잘지켜야(시맨틱 태그) SEO(Search Engine Optimization), 즉, 검색 엔진 최적화가 가능하다 => 반농반진으로 검색에 잘잡혀야 내 사이트로 수익 창출을 할 수 있겠지??
  • 결론~ 매우 기본적이기에 HTML을 잘짜야한다. 잘짜서 손해볼 것 없다!
시맨틱 태그의 중요성


: 내가 최근에 toy project로 만드는 플젝의 코드 중 일부인데, 여기서 나름 main, section 등을 썼는데 이게 시맨틱한지는 사실 아직은 모르겠지만, 김버그님께서는 div 태그를 남발(?)[솔직히 과거의 나는 시맨틱 태그의 중요성과 필요성을 전...혀 느끼지 못했던 개발자였다.. 인정]해서는 안된다고 한다. div 태그를 남발하면 태그간의 위계 질서를 브라우저가 인식하지 못한다고 한다!.
** 예를 들어 내가 네비게이션을 고치고 싶은데 이 많은 부분에서 navigation이 어딘지 전부다 div로 해놨으면 모름.
=> 과거의 내가 저질러(?) 놓은 것들을 미래의 내가 후회하지 않으려면 반드시 시맨틱하게 코딩을 해야하고, 팀원들을 위해서도 그러하다. 협업시에도 굉장히 유용하고, 필수적임.

: 다시 내 용어로 정리해보면, 글을 쓸 때도(블로깅을 예로들면), 지금 내가 쓰는 방식처럼 나는 내가 생각했을 때 소주제라고 생각하는 부분에 velog에서 제공하는 '#####' html로 치면 h5정도 되는 bold체와 크기를 쓴다. 그것은 내가 이 소주제 밑으로 쓸 내용들이 이 소주제와 관련된 것임을 명시하기 위함이고, 좀더 눈에 띄게 하기 위해서이다(중요도에 구분선을 짓는 것!). 이처럼 HTML도 전부다 div태그로 같은 위계 혹은 그냥 A4용지를 같은 크기, 굵기의 글씨로 똑같은 패턴으로 쓰는 것처럼 작성하면 브라우저가 해당 HTML에서 뭐가 중요한지 전혀 파악할 수 없다. 그렇게 되면 실제로 검색 엔진이 HTML을 탐색할 때도 똑같은 글씨체 및 굵기로 된 긴~~~문장에서 뭐가 중요한지 탐색을 제대로 할 수 없게 된다(검색 엔진 최적화가 여기서 적용되는것).

HTML 은 모든 것의 '시작점'이다 => semantic하게 의미론적 구분을 잘해줘야한다.

: HTML을 의미있게 정보의 구조를 짜서 작성하는 연습을 하자
** 근데 항상 의문을 가졌던게 그게 시맨틱한 HTML인지 어떻게 알지??...
김버그님 왈 : "내가 그에 대해서 논리적인, 합리적인 근거를 댈 수 있으면 된다. 단지 페이지를 완성시키기 위해서 의식의 흐름으로 작성하지만 안으면 된다..?(근데 무슨 말인지 알 것 같다)"

깃헙 마크다운 작성 양식 관련 튜토리얼 사이트
vscode color theme 바꾸는 익스텐션 = framer

태그 해부학
  • HTML은 마크업 언어로 태그를 통해 정보를 전달하는데, 이 태그를 웹 표준에 맞게 잘써야 정보 전달이 잘된다. 이에 더하여 태그에는 attribute를 지정해줄 수 있는데 이러한 특성을 지정해줌으로써 좀 더 디테일한 정보 표현이 가능해진다. 예를 들어, p태그를 쓸 때 해당 문단이 러시아어로 되어있음을 attribute로 표현할 수 있다. lang="ru" 이렇게

오늘 배운 부분 총정리

1) 시맨틱 태그는 보통 header, nav, main, footer, section, article, aside를 사용해서 만든다. 여기에 h1-h6, p태그, em 태그 등등이 추가되는 것이고!.
시맨틱 태그를 쓰는 이유는

  • 첫째로 시맨틱 태그를 써야 검색엔진이 우리들의 페이지를 읽을 때 뭐가 중요한지 알 수 있다. 보통 html의 head태그를 통해 키워드를 잡지만, 그외에 body 태그 내에서도 시맨틱 요소들을 바탕으로 해석을 하여 검색엔진에 걸릴지 여부를 결정한다.
  • 둘째로 팀 혹은 미래의 나?와의 협업에서 중요하다. 소통을 할 때 예를 들어 동료에게 내 코드를 맡겨야하는 상황에서 nav 부분을 수정해줘야해라고 말하는 것과 그 navigation3 클래스에 3번째 부분 수정 부탁해.. 하는 것은 차이가 있다. 일단 코드상으로만 봐도 nav 태그를 쓰면 명확히 어디가 네비게이션 역할을 하는 부분인지 알 수 있다.
  • 셋째로 스크린리더를 이용하시는 분들에게 매우 유용하다. 보통은 시각적으로 페이지를 접하기에 'semantic(의미론적)'인 부분은 상관없을 수 있지만, 이를 써있는대로 읽어주는 것을 듣고 이해하는 분들에게는 중요하다.

2) 시맨틱 태그를 썼다 혹은 잘썼다의 기준? : 그 부분에 대한 의미론적 정의를 얼마나 고민했고, 그에 따라 '논리적인 근거'를 바탕으로 마크업을 했으면 시맨틱하다고 생각. 그러나 예를 들어,

section vs article
: 이렇게 섹션과 아티클을 구분해서 쓰는건 논리도 있지만 어느 정도 명확한 구분이 있다. section은 article처럼 독립된 구획을 표기 혹은 나눌 때 쓰지만 article은 그 자체로 따로 쓰일 수 있을 정도의 독립성을 갖고, section은 주변부와 관련이 있으나 따로 구획을 나눠놓은 것을 마크업할 때 쓴다. 이 때, 섹션 안에 아티클을 쓸 수 있고, 아티클 안에 섹션을 쓸 수 있다.

3) 오늘 배운 태그들 재정리

  • a(anchor) 태그 : 어딘가에 닻을 내리는 태그(?)로 href(hyper reference) 속성을 부여하여 특정 사이트(링크), 특정 html 파일, 특정 id를 가진 태그로 이동할 수 있게 하고, 전화번호, 이메일에 쓸 때는 바로 전화 연결 및 메일쓰기로 연결할 수 있다. 추가로, target 속성을 줘서 새창 열기 등을 할 수 있다.

  • em, strong : 뭔가를 강조하고 싶을 때 쓰는 같은 용도이므로(UI 상 기능은 다름) 선택에 따름. 디자인적 요소는 css로 컨트롤하므로 상관 없음.

  • br : break 태그로 줄넘김을 할 때 씀

  • p 태그의 lang 속성을 통해(html 태그에도 쓸 수 있음) 이 부분이 어느나라 언어로 된 것인지를 표기해줄 수 있음.

코멘트

: HTML은 브라우저와 소통하기 위한 편지이다. 그렇기에 그 편지를 두서없이 쓰면 안되고 시맨틱(의미론적)한 부분을 신경써서 일목요연하게 작성하는 센스가 필요하다!! 나 자신도 앞으로 html을 짤 때 시맨틱 태그에 유의해서 논리적인 html 코드를 짜도록 노력하자. 명확한 정보를 전달하는 편지를 쓴다고 생각하자.

profile
완벽함 보다는 최선의 결과를 위해 끊임없이 노력하는 개발자

0개의 댓글