211101 프론트엔드 스쿨 1일차

수업 내용 (이호준 강사님)

모든 내용 X
새로 알게된 내용, 헷갈리는 부분, 중요한 부분만 기재함

0. 세팅

• 시각화 → 두려움 해소

• powershell
  폴더 경로에서 code .하면 vscode로 열림

• vscode snippet 생성
  설정 - 사용자 코드조각(user snippets) - html 입력 - 원하는 코드 작성

1. 수업을 시작하기 전에 알아야 할 기초 상식

• 도메인, URL - 이름
  IP - 주소
  Port - 문

• request ⇄ resopnse
  클라이언트(노트북, 휴대폰 등) → 공유기 → 라우터 → DNS → 역순
  클라이언트(노트북, 휴대폰 등) → 공유기 → 라우터 → 각종 보안·네트워크 장비 → 서버 → 역순

• 우리가 배우는 영역 : 클라이언트(프론트엔드) / 각종 보안·네트워크 장비, 서버(백엔드)
  

2. GitHub repository 생성

• GUI 방식(직접 클릭해서 파일 업로드)으로 진행
• settings - pages - source - main - save 하면 주소 생성됨
• repository에서 키보드 마침표 누르면 .com이 .dev로 변경되면서 웹 vscode로 열린다

3. emmt 사용법

h1+p
<h1></h1>
<p></p>

h1{hello}*10
<h1>hello</h1>
<h1>hello</h1>
      ⁞
<h1>hello</h1>

table>(tr>(td*4))*2
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

<p>lorem5</p> <!-- 단어 다섯개 -->
<p>Lorem ipsum dolor sit amet.</p>

4. HTML의 기초

• Hyper Text Markup Language 약자

• Hyper Text는 링크로 연결된 텍스트 페이지
  Markup Language는 태그 등을 이용해 문서 작성을 도와주는 언어

5. HTML living standard

• header, nav, main, aside, section, article, footer, h1~h6 등

• section vs article
  article 요소는 독립적 컨텐츠(다른 서비스에 가져다 놔도 괜찮음)
  section 요소는 사이트 내 연관 컨텐츠(다른 서비스에 가져다 놓으면 이상함)

• h1~h6
  문장의 요소가 제목일 때 사용
  서브타이틀로 사용하면 안된다

❌    <header>
        <h1>타이틀</h1>
        <h2>서브타이틀</h2>
      </header>

⭕    <header>
        <h1>타이틀</h1>
        <p>서브타이틀</p>
      </header>

• 시멘틱한 HTML 사용하기
  기계가 이해할 수 있는 언어로 HTML을 코딩해야 검색이 잘된다
  유지 보수, 협업에 대한 문제도 방지
  웹접근성 향상

6. 글자 태그

• <h1>~<h6>
  제목 지정
  h1은 한 페이지당 하나만 쓰는 것을 권장

• <hr>는 <p>태그 내에서 사용하면 안됨

• <a href="경로">
  앵커 태그는 인라인 요소지만 예외적으로 블록 요소를 자식으로 삼을 수 있다
  경로에는 절대경로와 상대경로가 있다

  • 상대경로
    ./ 현재 경로 (노출되는 것이 보안상 좋진 않다)
    ../ 상위 폴더

• <b>, <strong>, <i>, <em>
  시각장애인용 읽기 모드일 때 차이가 있었다

• <span>
  div와 마찬가지로 최후의 수단으로 사용
  실무에서는 어쩔 수 없이 쓰게 되는 경우가 발생함

7. 컨텐츠 그룹 태그

• <ul>, <li>
• <dl>, <dt>, <dd>
• <div>
  레이아웃을 나눌 때 사용하는 태그
  <article>, <section>, <header> 등과 같은 역할이지만 의미가 부여된 태그는 아니다
  적합한 요소가 없을 경우 최후의 수단으로 사용

❌    <div id="footer"></div>

⭕    <footer></footer>

8. 미디어 태그

• iframe
  보안상 막아둔 사이트 있음(ex. naver)
  유저가 iframe을 통해 내 사이트를 해킹할 수도 있으니 허용과 제한을 잘 선택해야 됨(ex. 댓글)

오늘의 TIP

1. vscode 단축키

• 들여쓰기
  tab
  ctrl + ]
  
• 내여쓰기
  tab + shift
  ctrl + [
  
• 코드라인 이동
  alt + 상하방향키
  
• 다중 클릭
  alt + 클릭
  
• 긴 문장 줄바꿈
  alt + z

2. 참고 링크
emmet : https://docs.emmet.io/cheat-sheet/
html living standard : https://html.spec.whatwg.org/
html : https://developer.mozilla.org/en-US/docs/Web/HTML
<h1>~<h6> : https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
커스텀 아이콘 생성 : https://icomoon.io/app/#/select
위 사이트 설명 : https://blog.naver.com/alas0213/222300616415
출처 표기 방법 : https://wayhome25.github.io/til/2017/02/16/TIL/

새로 알게 된 내용

• 시멘틱 태그의 중요성! 왜 지켜야되고 왜 중요한건지 두리뭉실하게 알았는데 확실하게 알게 됐다.
  클론 코딩할 때 많은 사이트들이 <div id=header></div>,<div id=footer></div> 이런 식으로 쓰길래 그냥 따라썼는데 이제는 시멘틱 태그 지켜서 만들어야겠다.
• <b>, <strong>는 시각장애인 사용자가 이용할 때 차이가 있었단 사실을 처음 알게 됐다. 시각장애인, 고령자 등을 위해 웹접근성에 신경쓸 것!

과제

위니브 홈페이지 마크업 클론
HTML 구조만 마크업해서 깃헙에 올렸다