HTML 배움 목표
👉🏼 "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다.
👉🏼 Opening tag, closing tag, self-closing tag에 대해서 이해하고 있다.
👉🏼 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
👉🏼 div, span 태그가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.
- div 는 한줄 사용할때
- span 같은줄에 2개 이상 태그를 넣을때
👉🏼 ul, ol, li 가 무엇이고, 언제 사용해야 하는지 알고 있다.
- ul부모태그
- li는 ul의 자식태그
css를 불러올때 head안에 <link rel="stylesheet" href="./css/main.css">
js를 불러올때 body끝에 <script src="./js/main.js"></script>
img를 삽입할때 body에 <img src="./kitty.png" alt="냥이">
👉🏼 input type을 설정하여 다양한 종류의 input을 활용할 수 있다.
👉🏼 id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미있는(Sementic) HTML 문서를 작성할 수 있다.CSS 수업목표
👉🏼 CSS를 HTML에 적용하는 방법에 대해서 이해할 수 있다.
👉🏼 직접 HTML 안에 CSS를 정의하는 것을 권장하지 않는 이유를 이해할 수 있다.
👉🏼 id 및 class와 관련된 selector 규칙을 이해할 수 있다.
👉🏼 CSS를 이용해 텍스트를 꾸밀 수 있다
👉🏼 CSS에서 쓰이는 단위의 두가지 구분을 이해할 수 있다.
👉🏼 box model, width, height, margin, padding, border
👉🏼 박스 크기를 측정하는 두가지 기준의 차이를 이해할 수 있다.
방향: flex-direction
얼마나 늘릴 것인가? :flex-grow
얼마만큼의 크기를 갖는가?: flex-basis
수평 정렬: justify-content
수직 정렬: align-items
Why not?