[TIL] # 006 ( HTML & CSS 기초 )

Today I Learned

정규 수업

• HTML, CSS 기초

pm 9 : 00 ~ am 1 : 00

• 반복문 코플릿 17 ~ 21문제

블로그로 공부

• CSS Flex 1분 코딩 블로그
• CSS Box model 꽃거지의 개발 일기 블로그
  border-box 개념
• HTML div와 span 차이
• CSS 7가지 단위

래퍼런스로 공부

• MDN CSS The box model 래퍼런스
• MDN CSS values and units 래퍼런스
• MDN HTML input

구글링으로 공부

• 스텍 오버 플로우 What is the difference between section and div?
• 마크다운 작성법
• 페이스북 이모지 링크
• 트위터 이모지 링크

개념 요약

HTML Achievement Goals

1. ✔HTML을 CSS를 적용하고, JavaScript로 개발할 수 있게(Programmable) 작성할 수 있다.
2. ✔HTML이 Markup language라는 것을 이해할 수 있다.
3. ✔"구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다.
4. ✔HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.
5. ✔Opening tag, closing tag, self-closing tag에 대해서 이해하고 있다.
6. ✔자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
   1. head Element : HTML 문서의 정보를 설정
   2. body Element : HTML 문서의 구조를 설정
   3. h1 ~ h6 Element : 숫자가 낮을수록 중요한 제목
   4. footer Element : 작성자, 저작권, 관련문서
   5. article Element : 매거진, 신문기사, 블로그 등 독립적으로 구분되거나 재사용 가능한 영역을 설정
   6. aside Element : 보통 광고나 기타 링크 등의 사이드바
7. ✔div, span 태그가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.
   • div : 박스 형태로 영역이 설정되며 한줄을 차지한다. 넓이, 높이의 크기 지정이 가능하다. margin이 4방향 모두 적용 된다.
   • span : 줄 단위로 영역이 설정된다. inline 속성을 가지므로 넓이, 높이의 크기 지정이 불가능하다. margin이 양 옆으로만 적용 된다.
8. ✔ul, ol, li 가 무엇이고, 언제 사용해야 하는지 알고 있다.
   • ol, ul, li : ol은 숫자가 매겨진 목록이고, ul은 숫자가 없는 목록, li는 ol과 ul의 자식이며 목록이다.
9. 🔺input type을 설정하여 다양한 종류의 input을 활용할 수 있다.
   • button, radio, checkbox, color, date, password, submit
10. ✔동적인 웹 어플리케이션 개발을 위한 HTML 구조를 짤 수 있다.
11. ✔간단한 웹 페이지 기획안을 HTML 문서로 표현할 수 있다.
12. 🔺id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미있는(Sementic) HTML 문서를 작성할 수 있다.
13. 🔺HTML5 semantic tag를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있다.
    1. HTML5에서의 semantic tag : article, aside, details, footer, main, nav, mark, section, time, hn, hgroup, address

CSS Achievement Goals

1. ✔CSS의 사용목적을 이해할 수 있다.
2. 🔺프론트엔드 개발자의 기초소양에 대해 이해할 수 있다.
   읽어보기 : Modern CSS Explained For Dinosaurs
   링크 : https://medium.com/actualize-network/modern-css-explained-for-dinosaurs-5226febe3525
3. ✔CSS의 기본 문법과 구조를 이해할 수 있다.
4. ✔CSS를 HTML에 적용하는 방법에 대해서 이해할 수 있다.
5. ✔직접 HTML 안에 CSS를 정의하는 것을 권장하지 않는 이유를 이해할 수 있다.
   • HTML과 CSS가 섞여 있게 되므로 찾기가 힘들다.
6. 🔺id 및 class와 관련된 selector 규칙을 이해할 수 있다.
7. 🔺CSS를 이용해 텍스트를 꾸밀 수 있다
8. 🔺CSS에서 쓰이는 단위의 두가지 구분을 이해할 수 있다.
9. 🔺각 단위가 적합한 경우를 구분할 수 있다.
   1. em : 폰트 크기를 지정할 때 사용 된다. 부모 폰트 크기의 영향을 받는다.
   2. rem : 폰트크기, 그리드 시스템 등에 사용된다. 최상위 태그에 지정한 것을 기준으로 삼는다.
   3. vw : 뷰포트 너비의 1% 길이와 동일하다. 브라우저의 너비 값에 따라 상대적으로 영향을 받는다. 스크린의 너비값에 꽉 차는 헤드라인을 만들 때 사용한다.
   4. vmin & vmax : 뷰포트의 너비값과 높이값을 기준으로 하는 최대, 최소값이다.
10. ✔CSS 박스 모델을 이해할 수 있다
    box model
    width, height
    margin, padding, border
11. ✔박스 크기를 측정하는 두가지 기준의 차이를 이해할 수 있다.
    • content-box와 border-box
    • border-box : 예를 들어 넓이를 100px라고 주면 그 안에서 패딩과 마진 값을 계산한다. 순수 content의 크기는 패딩과 마진 등의 값을 뺀 넓이와 높이만을 포함한 크기가 된다.
12. ✔MDN 또는 w3school 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 이용할 수 있다.

Today’s Things to Do

• 8 시~ 12시 : 반복문 코플릿
  ✔1. 17 ~ 21 문제 풀기
  2. 풀이 과정 블로그에 정리

Tomorrow’s Things to Do

am 10 : 00 ~ pm 1 : 00

• 유튜브로 개념 공부 (with 드림코딩)
• 유튜브 동영상 약 20개

pm 4 : 00 ~ 6 : 00

• 반복문 코플릿
  코플릿 풀이 과정 블로그에 정리
  모르는것 아고라 스테이츠에 질문 올리기

pm 7 : 00 ~ exercise

pm 8 : 00 ~ 12 : 00

• 리액트
  리액트 props와 state에 대해 정리한 블로그 글 읽어보기
  리액트 State and Lifecycle 독해하기