목록(list)은 목차와 메뉴를 구성할때 주로 사용하지만 웹페이지의 다양한 곳에서 사용가능하다. 1. ul 태그 , li 태그 ul(unordered list) 태그는 말 그대로 순서가 없는 비 순서형 목록을 생성할때 사용된다. 이때 묵록은 li(list item) 태그로 구성된다. 판매과일 목록 사과 복숭아 딸기 출력시 li(목록 내용)마다글머리 기호가 붙는다. 2. ol 태그, li 태그 ol (oredred list)태그는 순서형 목록을 생성할때 사용합니다. ul 태그와 마찬가지로 li 태그로 목록 내용을 구성한다. 오늘 할일 아침 먹기 점심 먹기 저녁 먹기 목록 내용마다 번호가 붙는다. 3. dl 태그, dt 태그, dd 태그 dl(description list) 태그는 정의형 목록을 만들때 사용..

웹 페이지를 제작하다보면 관련 있는 요소로 그룹을 묶어야 하는 경우가 많습니다. 예를 들어, 네이버 메인 페이지는 검색 영역, 로그인 영역, 본문 배너 영역, 사이드 배너 영역 등등 나누어져있다. 이때 div, span 태그를 사용하고 이런 태그를 공간 분할 태그라고 한다. div 태그 div 태그는 블록요소와 인라인요소를 그룹으로 묶을 때 사용한다. 형식 💡 책 소개 책을 소개하는 페이지 입니다. tv 메뉴 소개 tv 메뉴를 소개하는 페이지 입니다. div 태그를 활용해 관련 요소를 그룹으로 묶는다. HTML 문서 구조가 이해하기 쉽고 깔끔해진다. 참고로 class 속성은 CSS를 적용하기 위한 식별자로 해당 클래스 부분만 디자인을 적용 할 수 있다. span 태그 형식 span 태그는 인라인요소를 그..

웹페이지를 구성하는 요소는 여러가지가 있지만, 가장 큰 비중을 차지하는 요소는 바로 텍스트이다. 이번에는 텍스트를 작성할때 어떤 태그를 사용하는지 정리한다. 1. hn 태그 hn 태그는 제목이나 주제를 나타내는 텍스트를 표현할 때 사용한다. hn 태그는 h1부터 h6까지 6개가 있다. 여기서 h는 heading을 의미하고 n은 들어가는 숫자는 중요도를 나타낸다. 형식 💡 제목 Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 1부터 6으로 갈수록 중요도가 적어지며, 굵기와 크기가 가늘고 작아진다. 또한, hn 태그로 작성된 텍스트는 검색엔진에서 키워드로 인식한다. 따라서 검색엔진 최적..

1. 블록 요소와 인라인요소 블록요소 body 태그에서 사용되는 태그 중에서 웹브라우저의 공간 유무와 상관없이 줄바꿈되는 태그가 있다. 태그가 그 예이고 이 태그로 작성한 코드를 “블록요소”라고 한다. 인라인요소 반대로 공간이 부족할 때만 줄 바꿈 되는 태그가 있다. 태그가 그 예이고 이 태그로 작성한 코드를 “인라인 요소”라고 한다. 2. 부모, 자식, 형제 관계 HTML은 태그를 사용할때 부모, 자식, 형제라고 하는 관계가 성립된다. 1.2 에서 공부한 HTML 기본구조 코드를 보면 html 태그 안에 head와 body태그가 있다. 나의 첫번째 웹페이지 구조상으로 관계를 나누어 html 태그는 head와 body 태그의 부모, head와 body 태그는 html태그의 자식이라고 할 수 있다. 또한 ..

나의 첫번째 웹페이지 HTML은 일정한 구조 안에서 작성된다. vscode에서 템플릿에 !를 입력하고 enter하면 위와 같은 기본 구조가 생긴다. 위의 기본구조에 들어있는 태그에 대해서 기술하겠다. 1. DTD Document Type Definition (문서 정의형)은 웹프라우저가 처리할 HTML 문서가 어떤 문서 형식을 따라야 하는지 알려주는 것이다. HTML 문서를 작성할때 항상 처음에 넣어야 한다. 형식 💡 웹브라우저는 HTML 5 문서 형식으로 해석한다. HTML5 등장이후로 이전 버전의 문서형식을 정의할 필요가 없다. 따라서 항상 위와 같은 형식으로 정의한다. 2. html 태그 HTML 문서의 시작과 끝을 나타낸다. 모든 태그는 html 태그 안에서 작성되어야한다. 3. head 태그 h..

1. 태그 웹페이지는 이미지, 텍스트, 버튼, 링크 등등 매우 다양한 요소로 이루어져있다. HTML 태그가 이런 구성요소를 정의하는 역할을 하면 HTML 문법을 이루는 가장 작은 단위이다. 형식 💡 2. 속성 속성은 태그에 어떤 의미나 기능을 보충하는 역할을 한다. 옵션이라고 생각하면 된다. 따라서 사용하지 않아도 되고, 여러개를 사용해도 된다. 형식 💡 반드시 속성명과 속성값으로 구성되어야한다. 만약 속성값이 여러개라면 “”안에 쉼표를 사용하여 값을 나열한다. 위 코드에서 html이 태그, lang이 속성명, ko가 속성값이다. 주언어(lang)가 한글(ko)로 되어있는 html 문서의 시작이라는 의미가 있다. 3. 문법 HTML은 태그와 속성으로 문법을 구성합니다. 이 문법은 콘텐츠의 유무로 나눌 수..