[HTML] 기초

Chapter1. 웹 개발 이해하기
1.웹 개발에 있어서 HTML, CSS, JavaScript의 역할을 각각 설명할 수 있다.
2.VScode에서 폴더를 열고 새로운 파일을 생성할 수 있다.
3.VScode를 이용하여 작성한 HTML, CSS를 브라우저에서 확인할 수 있다.
Chapter2. HTML 기초
4.HTML을 CSS를 적용하고, JavaScript로 개발할 수 있게(Programmable) 작성할 수 있다.
5.HTML이 "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다.
6.HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.
7.<div>, <span> 요소가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.
8.<ul>, <ol>, <li> 요소가 무엇이고, 언제 사용해야 하는지 알고 있다.
9.<input> 요소에 type 을 설정하여 다양한 종류의 <input> 요소를 활용할 수 있다.
10.시멘틱 요소를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있다.
Chapter3. HTML 심화
11.만들고 싶은 앱의 와이어프레임을 그려볼 수 있다.
12.와이어프레임을 보고 HTML로 코딩할 수 있다.
13.<div> 요소 또는 <section>, <header> 등의 시멘틱 요소로 영역을 구분하는 이유를 이해할 수 있다.
14.HTML 문서에서 언제 id 혹은 class를 사용해야 하는지 이해할 수 있다.
15.id와 class를 목적에 맞게 사용할 수 있다.
16.사람과 컴퓨터가 읽기 쉬운, 의미 있는(Sementic) HTML 문서를 작성할 수 있다.

 

1.HTML은 구조적인 설계 및 내용물(text)이 들어가며 CSS는 배치 및 꾸미기를 할 수 있고 JavaScript는 기능들을 추가할 수 있다. 집으로 예시를 들자면 html은 집안 구조, css는 인테리어, javascript는 전기 및 인터넷 등 가전제품 추가라고 볼 수 있다.

2.가능하다.

3.live server를 통해 실시간으로 확인하며 진행할 수 있다.

4.개발할 수 있게 작성할 수 있는 것에 대한 의미는 모르지만 html에 css를 입혀 꾸미고 javascript로 기능들을 동작하게 id, class 속성들의 값을 필요에 따라 지정할 수 있다.

5.1번에서 설명했지만 자세하게 들어가자면 html만 보고서도 이게 어떤 페이지인지 어떤 내용인지는 다 알아볼 수 있는 뼈대가 된다. 보통 작성할 때는 구조를 나눈 후 내용을 각자 다 작성하고 그 위치를 css로 조절하고 JavaScript로 기능을 추가하는 방식으로 진행한다.

6.아직 모든 내용을 학습하지 않아 확신할 수 없지만 새로운 태그들을 무난히 적용할 수 있다.

7.div요소는 한 줄 자체를 모두 차지하고 span요소는 그 크기만큼의 자리를 차지하는 태그이다. 보통 묶음으로 하위 태그들을 관리할 때는 div요소를 많이 차지하는데 div는 줄 자체를 차지하기 때문에 크기조절등을 신경쓰지 않아도 되는 편리함이 있기 때문이 아닐까 생각한다.

8.ul은 순서 미지정, ol은 순서나열이며 li는 자식태그로 내부에 배치시 자동으로(ol시) 1,2,3등 순서가 매겨진다.

9.checkbox, Text, Radio 등 원하는 기능의 input요소를 사용할 수 있다.

10.시멘틱 요소(h1, header 등)를 어떻게 사용하느냐에 따라 협업에서 이해하기 쉬운 작성 및 검색엔진에 원하는 내용을 강조할 수 있음을 이해하고 필요한 세부기능을 검색해 추가적으로 적용할 수 있다.

11.창을 보며 각 작동 및 내용 별로 구분해 어떤 태그를 이용해 나눠야 할지 추측이 가능하며 각 부위별 분류를 할 수 있다.

12.간단한 내용은 가능하지만 공부가 더 필요하다

13.10번에서 언급한 내용이지만 같은 기능을 낼 수 있다고 해도 보는 사람의 이해를 돕고 그 위치에 추천되는 기능을 사용해야 본인의 의도와 맞는 데이터 처리가 가능하다고 생각한다.

14.고유한 값들에는 id를 넣지만 여러가지의 동시 처리가 필요한 항목들에는 class를 넣어준다.

15.가능하다

16.참고를 보면서 하면 가능하지만 아직 부족하기 때문에 어느정도 연습이 더 필요할 것 같다.

 

 

 

html의 여러 태그들과 시맨틱요소 그리고 속성들에 대해서 공부했다.

태그들의 자식 태그도 있고 태그 내부에 속성도 한두가지가 아니고 

굳이 일반 태그를 써도 되는 부분들도 시맨틱 요소들의 위치를 고려해 사용하는 방법들 까지 

내용은 전체적으로 쉽지만 입력하는 방식들이 다른 부분들이 많아 고려할 것은 오히려 더 많은 것 같았다.

반복문이 조건넣는 방식 몇가지만 알면 그 뒤로는 의사코드로 해결이 된다면 이건 반대로 설계도를 미리 생각해서 나열하고

그 내부를 태그를 통해 구현해야 한다고 할까?

문제만 풀고도 이제 어느정도 원하는 대로 사용할 수 있다고 확신한 조건문, 반복문등과는 다르게 html은 뒤에 진행되는 과정들을 열심히 실습하며 적응을 더 해야 할 것 같다.

다음주에 바로 계산기를 구현한다고 하는데 기능뿐 아니라 디자인도 고려한 계산기를 만들고 싶다.