2021-12-11 TIL

해야하는 것

1. MDN HTML 텍스트 조작 고급기법, 문서와 웹사이트 구조, HTML 디버깅 - ⭕️
2. 모던자바스크립트 튜토리얼 자바스크립트 기본챕터 보기 - ⭕️
3. 생활코딩 Webn 강의 다시 시작 - ❌
4. 노마드코더 바닐라js 챌린지 신청, 예습 조금하기 - 신청만 ⭕️

TIL

HTML

1. 컴퓨터 코드 표시 하는 방법

   • <code> : 일반적인 컴퓨터 코드를 표시.
   • <pre> : 공백(일반적으로 코드 블록)을 유지하기 위해 사용. 택스트 내에서 들여 쓰기 또는 초과 공백을 사용하면 브라우저가 이를 무시하고 렌더링 된 페이지에 공백을 표시하지 않는다. 그러나 <pre></pre> 태그로 텍스트를 감싸면 공백이 텍스트 편집기에서 보는 것과 동일하게 렌더링 됨.
   • <var> : 변수이름을 특별하게 표시.
   • <kbd> : 컴퓨터에 입력 된 키보드 (및 기타 유형) 입력을 표시.
   • <samp> : 컴퓨터 프로그램의 출력을 표시.

   <pre><code>var para = document.querySelector('p');
   
   para.onclick = function() {
     alert('Owww, stop poking me!');
   }</code></pre>
   
   <p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p>
   
   <p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>
   
   <p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
   
   <pre>$ <kbd>ping mozilla.org</kbd>
   <samp>PING mozilla.org (63.245.215.20): 56 data bytes
   64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

   

2. 문서의 기본 섹션

   • header - 일반적으로 큰 제목과 로고 등이 있는 큰 띠. 한 웹페이지에서 주요 정보가 있는 곳.
   • navigation bar - 홈 페이지의 메인 섹션으로 연결함. 대부분 메뉴 버튼이나 링크, 탭으로 표현된다. 헤더와 같이, 이 항목은 대부분 한 페이지로부터 다른 페이지로 넘어가도록 구성되어있음 — 웹 사이트에서 일관적이지 못한 네비게이션을 사용할 경우 방문자는 복잡함과 불만족스러움을 느낄 것. 많은 웹 디자이너들은 네비게이션 바를 개별적인 구성 요소로 사용하기 보다 hearder bar의 일부로 다루지만 이는 필수 사항은 아님. 사실 일부 사람들은 접근성을 위해서는 두 개로 나누는 것이 좋다고 주장하는데, 나뉜 경우 스크린 리더들이 두 특징들을 더 잘 읽을 수 있기 때문.
   • main content - 웹 페이지에서 가장 독특한 컨텐츠를 포함하고 있는 중심의 큰 부분으로, 예를 들어, 당신이 보고 싶어하는 비디오, 당신이 읽고 있는 주요 이야기, 당신이 보고 싶어하는 지도, 또는 뉴스 헤드라인 등이 있음. 물론 이 부분은 각 페이지마다 다른 웹 사이트의 한 부분.
   • sidebar - 주변의 정보, 링크, 인용 부호, 광고 등. 일반적으로 이는 메인 컨텐츠에 무엇이 포함되어 있느냐에 따라 다름. (예를 들어 기사 페이지에서, sidebar는 작성자의 소개, 또는 관련 기사 링크를 포함할 것입.) 그러나 보조 navigation system으로서 되풀이되는 요소를 사용하는 경우도 찾아볼 수 있음.
   • footer - 페이지 바닥의 줄로 일반적으로 작은 정보, 저작권 정보, 또는 연락처 등을 포함하고 있음. (header와 같이) 일반적인 정보를 담고 있는 부분이지만 보통 중요하지 않거나 웹 사이트 자체에 부차적인 정보.

3. semantic 마크업(시멘틱)

   • semantic 이란 의미론적인 뜻을 가지며 마크업은 HTML문서 태그로 문서를 작성하는 것을 말한다. 따라서 시멘틱 마크업이란 의미가 잘 전달되도록 HTML문서를 작성하는 것을 말한다.
   • ex) header엔 header태그 footer엔 footer태그, 메인 컨텐츠에 main태그와 section태그 사용, 네비게이션엔 nav태그, 사이드바는 main태그 내부에 aside태그 등
   • 시멘틱 마크업을 하는 이유
     • 해당 코드가 어떤 역할을 하는지 어떤 기능을 하는지 직관적인 이해를 가능하게 한다. 즉, 코드의 가독성을 높인다.
     • 웹 접근성 측면에서 시각장애가 있는 사용자가 화면판독기로 페이지를 탐색할 때 시멘틱 마크업을 푯말로 사용할 수있다.
     • 검색엔진이 시멘틱 태그를 중요한 키워드로 간주해서 SEO(Search Engine Optimize)에 유리하다.
     • cf) div 태그는 의미가 없는 태그라 html코드를 어지럽힐 수 있기에 사용을 최소로 줄이길 권장

잡담

2021-12-08에 코드스쿼드 입학테스트 1단계 구현해서 제출했다. 하루종일 했는데 구현이 어떻게든 되서 기분은 좋았다. 되든 안되든 한번 해보자는 마음으로 제출을 했는데 결과는 역시 불합격ㅎ.. 7일 저녁부터 8일 밤 10시까지 오랜시간이 걸려 겨우 1단계만 구현했지만 마크다운문법으로 readme도 작성해보고 git gist도 이용해보고 또, 간만에 c를 하면서 색다로운 재미가 있었다. 그러고 이틀 푹쉰건 안비밀.