기간
23.12.8~9
배운 내용 정리
HTML의 전반적인 내용
1회차 : HTML, CSS 특징
https://github.com/byunjiin/OZ/blob/main/1_html/1.md
2회차 : 웹개발 이해하기
https://github.com/byunjiin/OZ/blob/main/1_html/2.md
3회차 : 웹 브라우저
https://github.com/byunjiin/OZ/blob/main/1_html/3.md
4회차 : 태그(Tag)와 속성(attributes)
https://github.com/byunjiin/OZ/blob/main/1_html/4.md
5회차 : HTML문서기본구조
https://github.com/byunjiin/OZ/blob/main/1_html/5.md
6회차 : 텍스트표시하기
https://github.com/byunjiin/OZ/blob/main/1_html/6.md
7회차 : 태그의 유형
https://github.com/byunjiin/OZ/blob/main/1_html/7.md
8회차 : 컨테이너와 전역 속성
https://github.com/byunjiin/OZ/blob/main/1_html/8.md
9회차 : 이미지
https://github.com/byunjiin/OZ/blob/main/1_html/9.md
10회차 : 프로필 페이지 만들기(실습)
https://github.com/byunjiin/OZ/blob/main/1_html/10.md
11회차 : 링크 만들기
https://github.com/byunjiin/OZ/blob/main/1_html/11.md
12회차 : 목록 만들기
https://github.com/byunjiin/OZ/blob/main/1_html/12.md
13회차 : 표 만들기
https://github.com/byunjiin/OZ/blob/main/1_html/13.md
14회차 : 입력태그1
https://github.com/byunjiin/OZ/blob/main/1_html/14.md
15회차 : 입력태그2
https://github.com/byunjiin/OZ/blob/main/1_html/15.md
16회차 : 서버와 form태그
https://github.com/byunjiin/OZ/blob/main/1_html/16.md
17회차 : 시맨틱 태그
https://github.com/byunjiin/OZ/blob/main/1_html/17.md
18회차 : 메타 데이터
https://github.com/byunjiin/OZ/blob/main/1_html/18.md
과제1 : 태그 사용해보기(실습)
https://github.com/byunjiin/OZ/blob/main/1_html/today/tag.html
과제2 : 나만의 블로그 만들기(실습)
https://github.com/byunjiin/OZ/blob/main/1_html/today/blog.html
과제3 : HTML 이용해서 설문조사 양식 만들기(실습)
https://github.com/byunjiin/OZ/blob/main/1_html/today/servey.html
과제4 : 회원가입 만들기(실습)
https://github.com/byunjiin/OZ/blob/main/1_html/today/join.html
느낀점
새로 알게된 부분 :
1. title(8회차)
전역 속성으로 title을 주면 툴팁(마우스를 올릴 때 나타나는 텍스트)를 제공한다.
2. placeholder(14회차)
input요소 안에 글씨를 적어 무엇을 입력하는지 힌트를 주는 기능을 한다.
3. label(14회차)
label의 for와 input의 id를 입력하여 사용한다.
4. optgroup(15회차)
select요소의 옵션을 묶고 가장 상단에 표시되는 문구이다. optgroup의 label태그 안에 적으면 된다.
5. textarea(15회차)
textarea의 크기는 width와 height가 아니라 가로는 cols, 세로는 rows로 지정한다.
6. submit(16회차)
button type 뿐만 아니라 input type에 있는 submit도 자동으로 제출버튼을 만들어준다.
주의 할 부분 :
1. 컨테이너(8회차)
div는 블록 컨테이너(세로)고, span은 인라인 컨테이너(가로)이다.
2. a태그와 underlind(11회차)
a태그는 누르면 이동하는 링크가 존재하고, text-decoration의 underlinde은 글씨 아래 밑줄만 있을 뿐 링크가 존재하지 않는다.
3. radio(14회차)
input type의 라디오 버튼은 name이 같아야 하나의 질문으로 처리된다. 답변은 중복이 불가능 하다.
4. form(16회차)
사용자가 입력한 데이터를 서버로 보내는 것을 목적으로 사용하는 태그이다.
5. name(16회차)
화면상에서의 차이는 없지만 서버에서 정보를 받을때 name속성으로 항목을 구별한다.
6. 시맨틱 태그(17회차)
코드를 작성할 땐, 시맨틱 태그를 고려하여 작성한다.
소감 :
HTML은 많이 공부해봐서 다 아는 내용일거라고 생각했는데, 디테일하게 보니 잊었던 내용도 많았고, 새로 알게된 내용도 생각보다 많았다.
과제들을 만들며, 기초를 다시 복습하니 이전보다 명확하게 HTML 틀을 짤 수 있게 된 것 같다.
항상 헷갈려하던 블록 요소와 인라인 요소를 잘 구분할 수 있게 된 시간이었다.
