HTML의 변천사와 통계 태그들은 새롭게 늘어나기도 하고, 변경되기도 하며, 없어지기도 합니다. HTML 연대기 : 각 HTML 버전들의 태그들 리스트를 볼 수 있습니다. HTML 통계 : 태그들의 사용되는 빈도수를 볼 수 있습니다.

개발도구 HTML을 이용해서 웹 페이지를 만들 때 도와주는 전문화된 프로그램 종류 윈도우 : 메모장 Mac(맥) : Text Edit Atom(아톰) sublime text Bracket Atom(아톰) 설치 설명 Emmet 기능 : 코드 자동완성 기능 Emmet 기능 태그입력 + Tab : 꺾쇠()자동 완성 ol>li*4 + Tab : 순서형 리스트 완성 ctrl + alt + 오른쪽 화살표 (→) : 다음 편집 포인트(지점)로 워프

웹사이트 만들기 연결된 웹사이트 만들기 index.html 파일 생성 링크 마련하기 ( 태그 사용) -> 각각의 링크 완성 index.html 을 다른이름으로 저장해서 각각 1,2,3,4.html로 생성 1,2,3,4.html 의 내용을 변경하고 저장

DOCTYPE 자신이 작성한 HTML코드가 어떤 방식의 HTML 코드로 작성됐는지를 브라우저에게 알려주는 문자 DOCTYPE Document type declaration : 문서 타입 선언 브라우저에게 이 문서는 어떤 표준을 따르고있는 태그들인지 알려주는 것 이라고 작성하면 됨 더 알아보기

문서의 구조 태그들도 문서의 구조가 다 같진 않습니다. 부가적인 정보(문서를 꾸며주는 것)와 본문(본질적인 정보)로 나뉩니다. HTML 태그 head태그와 body태그를 감쌉니다. 맨 위에 위치합니다. 본문이 아닌 부가적인 정보입니다. head 태그 본문이 아닌 태그들은 태그 아래에 들어갑니다. ( ex : title, meta ) 본문이 아닌 부가적인 정보입니다. meta 태그 웹 페이지의 글씨가 깨지는 경우에는 태그를 만들면 됩니다. 태그 밑에 위치합니다. body 태그 본문인 태그들은 태그 아래에 들어갑니다. ( ex : h1~6, ol, ul … ) 태그안에 본문이 들어갑니다. 제목() 태그 제목으로 표시하고 싶은 곳에 태그를 붙이면 됩니다. 태그 밑에 위치합니다. 본문에 위치합니다.

태그의 중첩과 목록 리스트 만들기 라는 태그를 통해 리스트를 만들 수 있습니다. 각각의 글씨를 >, 태그를 이용하여 감싸줍니다. 리스트를 구별하고 싶을 때 ul, ol태그를 이용하여 그룹으로 묶어줄 수 있습니다. 가독성을 높이기 위해 Tab이나 Spacebar로 띄어쓰기/들여쓰기를 해줍니다. (1,2,3… 등) 순서가 있는 리스트 만들기 ul을 ol태그로 바꾸면 li들 앞에 숫자가 붙습니다. 각각 리스트 태그들의 뜻 ol : Ordered List [순서가 있는] ul : Unordered List [순서가 없는] li : List [목록 / 명단]