목록 태그1. (Ordered List)순서가 있는 목록을 표현할 때 사용한다. type 속성으로 글머리 기호를 변경할 수 있다. 2. (Unordered List)순서가 없는 목록을 표현할 때 사용한다. 3. Listed Item목록하위 항목으로 사용되며, 태그 또는 태그의 하위에 위치한다. 4. (Definition List)Definition List(정의 목록)의 약자로, 사전처럼 용어를 설명하는 목록을 만든다.ex) A는 B이다. 와 같은 Key = Value로 사용할 때 유용 5. (Definition Term)Definition Term(정의 용어)의 약자로, 정의되는 용어의 제목을 넣을 때 사용 6. (Definition Description)Definition Descript..

글꼴 태그1. ~ (Heading)웹 페이지의 제목 또는 부제목을 표현할 때 사용하며, 숫자가 작을 수록 큰 제목을 표시 2. (Paragraph)하단의 문단을 표시할 때 사용 3. (Horizontal Rule)가로로 선을 긋는 태그 (종료태그 없음) 4. (Break)줄바꿈 태그로 HTML에서 개행 역할을 한다. (종료태그 없음) 5. (Italic)텍스트를 이텔릭체로 표시 6. (Emphasis)텍스트를 이텔릭체로 표시 7. (bold)텍스트를 진하게 표시 8. 텍스트를 진하게 표시 vs , vs 차이, 태그는 단순히 텍스트를 이텔릭체, 진하게 표시하는 역할, 태그는 실제로 페이지 내의 중요한 부분으로 강조하고 싶을 때 사용브라우저에서 스크린리더(Screen Reader)를 사..

Emmet이란HTML, CSS 코드를 빠르게 작성할 수 있도록 도와주는 코딩 단축키(스니펫) 기능이다.주로 VS code, Sublime Text, Atom 등의 코드 편집기에서 사용된다.Emmet의 장점코드 자동 완성짧은 코드(축약어)를 입력하면 자동으로 HTML 태그를 확장해 준다.반복문 기능같은 태그를 여러 번 반복해서 생성할 수 있다.자동 속성 추가class, id, href 등의 속성을 쉽게 추가할 수 있다.CSS와 연동 가능CSS의 속성을 짧게 입력하면 자동으로 확장된다. HTML Emmet1. HTML 표준 구조! 입력 후 Tab 키 : 간단하고 빠르게 HTML 구조를 만들어 준다.  2. 자식 노드div>ul>li 입력 후 Tab 키 : >를 사용하여 자식 요소를 생성할 수 있다. ..

태그가 포함하는 자식 요소1. 문서의 제목을 정의내 웹사이트 2. 문서의 메타데이터 제공(문자 인코딩, 뷰포트 설정, SEO 정보 등) 3. 외부 리소스(CSS, 아이콘 등) 연결 4.  5. 문서의 기본 URL 설정 (상대 경로를 기준으로 삼을 기본 주소 지정) 6.  7.   태그가 포함하는 자식 요소1. 문서 구조 관련 태그웹페이지의 구조를 나누는 태그  : 문서의 헤더 영역 (로고, 내비게이션 바 등) : 내비게이션 메뉴 (메뉴, 링크 모음) : 문서의 개별 섹션 : 독립적인 콘텐츠 (블로그 글, 뉴스 기사 등) : 보조 콘텐츠 (사이드바, 광고 등) : 문서의 푸터 영역 (저작권 정보, 연락처 등) : 문서의 핵심 콘텐츠 영역 2. 텍스트 및 콘텐츠 표시 태그웹페이지의 텍스트를 표시하는 태그 ~..

예시 코드 document type이라고도 하며 독타입이라고 부른다.HTML 문서는 1.0 버전으로 시작하여 현재 5버전까지 업데이트 되었다.각 버전마다 다시 strict, transitional, frameset이라는 구분이 있기 때문에 내가 현재 만드는 HTML 문서가 어떤 버전인지 어떤 유형인지 DOCTYPE에 명시해야한다.은 HTML 5버전을 의미DOCTYPE을 제외하고, 문서의 가장 최상위 태그이며, , 를 포함한다.html의 자식 태그실제 브라우저에는 표현되지 않으며 문서에 대한 다양한 정보를 포함다른 형태의 문서를 html 파일에 연결시켜주는 역할실제 브라우저에 표현되는 영역웹페이지 구조 : 웹사이트의 머리글 (로고, 네비게이션 포함) : 내비게이션 바 (메뉴, 링크) ..