인사말
오늘은 HTML을 배웠다. 오랜만에 배우는 HTML이라 기본 개념이 많이 헷갈려 개념을 정리하고 어려웠던 점, 알게된 점을 작성하려 한다.
HTML, CSS, JavaScript 기본
HTML - 웹 페이지의 구조를 담당하는 마크업 언어 (구조)
CSS - 디자인 요소를 시각화 하는 스타일 시트 언더 (스타일)
JavaScript - 단순한 웹페이지를 프로그램으로 만들어 유저와 상호작용 할 수 있게 해주는 프로그래밍 언어 (상호작용)
강아지 집 이라고 생각하자면 강아지집의 구조를 간단히 그리는 것을 HTMl 그리고 벽면의 구조, 색 등을 CSS, 전구를 낮에는 끄고 밤에는 키는 기능을 JavaScript라고 한다.
HTML은 트리 구조이다.
HTML은 tag들의 집합이다
< tag ></ tag > 로 표현이 가능하며
< tag /> 와 같이 표현도 가능하다.
자주 사용하는 HTML 요소
div
한줄을 차지한다.
span
공간을 차지한다.
a
링크를 삽입한다. herf와 많이 사용한다.
herf에 링크를 넣어준다.
ul
정렬되지 않은 리스트
ol
정렬된 리스트 (숫자가 생긴다.)
li
ul과 ol 안쪽의 리스트 값들
input type
input type을 text로 지정하면 글자가 나오고 (아이디를 만들었다!)
input type을 password로 지정하면 보이지 않는 문자인 ● 으로 표시된다 (비밀번호를 만들었다!)
input type을 checkbox로 지정하면 체크박스가 나온다(여러개 선택하는 박스)
input type을 radiobox로 지정하면 라디오 버튼이 나온다(몇개중 하나만 선택하는것)
라디오 박스는 name이라는 속성으로 하나로 묶어주어야 한다.
placeholder
박스 안에 문자를 넣어준다 (아이디 입력하세요 등등)
id와 class
각 div와 요소들에 id를 지정해주어 구분하는것이 좋다.
반복되는 항목은 id가 아닌 class로 선언해야 한다
어려웠던 문제
HTML을 배우긴 했지만 공부를 안한지 오래 되었고, 또 오랜만에 만지니까 문제들이 많이 어려웠고 실습이 쉽지 않았다. 처음 div에 input을 적을 때 <> 안쪽이 아닌 바깥쪽에 적어 자동완성과 글자가 나타나지 않았고 내가 VSCode를 잘못 설치한 줄 알았다. 하지만 안쪽에 넣었더니 자동완성과 색깔이 잘 나타났다!
자바스크립트 실행을 위해는 script를 사용한다.
속성(attribute)
p class="paragraph"
attribute name(속성의 이름) = class
attribute value(속성의 값) = paragraph
section - 시맨틱 요소의 일부
div - HTML5 이전에는 하나의 구역을 나타내기 위해 사용하였다. 하지만 지금은 어떤 큰 구역을 구분하기 위하여 사용되는 것은 지양되고 있다.
알게된 점
실시간 zoom 수업을 들으면서 알게된 요소를 하나 하나 정리해 보겠다.
1.요소 - 전체를 묶어서 요소라고 말 한다. 여는 태그로 시작해서 닫는 태그로 끝나는 것이다.
2.태그 - 요소의 구성 요소 하나 하나를 태그라고 부른다.
3.footer - 시멘틱요소로 사용한 것 이다
4.!누르고 tab을 누르면 기본적인 요소가 다 나온다
5.title는 웹 페이지 주소 이름 변경
마무리
오늘은 HTML을 배웠다. 오랜만에 HTML을 배우니 기본 개념을 머리속에 넣는게 시간이 많이 걸렸다. 그리고 종합 테스트도 많이 틀렸다.. 하지만 괜찮다! 많이 틀린 만큼 개념 공부를 많이 했으니 후후 오늘은 마지막 특강으로 동기부여를 받는 시간을 가졌다. 동기부여 강의를 듣고 몇가지 다짐을 적었으며 책상에 붙일 예정이다.
