HTML로 테이블 기본 구조 만들기테이블의 기본 요소테이블은 행과 열로 구성된 구조화된 데이터 집합이다. 테이블을 사용하여 다양한 데이터를 한눈에 보기 쉽게 정리하고, 관련된 정보를 빠르게 찾을 수 있다. 테이블은 표형식의 데이터에 사용해야 하며, 웹 페이지 레이아웃을 목적으로 사용하는 것은 좋지 않다!: 테이블의 전체 구조태그는 표를 만들어주는 HTML 태그이다. 기본적으로 표를 만들기 위해서는 가장 바깥에 태그를 작성하고 그 안에 tr, td, th 태그를 넣어서 만들어야 한다.태그비고테이블을 만드는 태그테이블의 헤더부분 셀테이블의 행을 만드는 태그테이블의 열을 만드는 태그 : 테이블 데이터 셀td는 테이블 데이터 셀 또는 테이블 데이터를 줄인 말로 테이블 안의 가장 작은 컨테이너이다.: 행(row..

Emmet은 HTML, CSS 코드를 빠르게 작성하기 위해 사용하는 도구로, 축약형(syntax)을 사용해 코드 구조를 단순화할 수 있다.emmet syntaxChild: >> 로 여러 태그를 이어 붙여 부모-자식 관계를 한 번에 생성할 수 있다.div>ul>li div는 최상위 부모 태그ul은 div의 자식 태그li는 ul의 자식 태그Sibling: ++를 사용하면 형제 요소를 한 번에 생성할 수 있다. 형제 요소란 동일한 부모 아래 나란히 위치하는 태그를 말한다.h1+h2+ph1, h2, p는 모두 같은 계층(형제 관계)에 있는 태그이다.Multiplication: **을 사용해 반복 작업을 한 번에 처리할 수 있다. 주로 리스트나 반복되는 태그를 생성할 때 사용한다.ul>..

1) mainHTML 문서의 주요 내용을 나타내는 태그이다.주요 내용이란 중심 주제 또는 응용 프로그램의 중심 기능과 직접 관련있거나 확장된 내용을 말한다.hidden 속성이 지정되지 않은 요소가 두 개 이상 있어서는 안된다.사이드바, 네비게이션 링크, 저작권 정보, 사이트 로고, 검색 양식 등 문서 또는 문서 섹션 전체에 걸쳐 반복되는 내용은 검색 양식이 페이지의 주요 기능이 아닌 한 포함되지 않아야 한다.2) nav페이지의 주요 탐색 영역을 나타내기 위해 사용한다. 태그는 다른 웹 페이지로 연결하거나, 현재 웹 페이지의 내부 콘텐츠로 연결되는 링크가 있는 영역을 나타낸다.ex) 메뉴, 목차, 색인모든 링크 그룹이 태그에 있을 필요는 없다. 태그는 주로 주요 탐색 블록으로 구성된 영역을 나타내기 위..

엔티티 코드란?HTML에는 , >, & 와 같이 입력하면 안되는 예약 문자들이 있다.또한 보이지 않는 문자 (줄바꿈 없는 공백)가 존재한다. 이 문자들은 표준 키보드로 입력하기 어렵다.이를 입력하기 위한 특별한 코드 또는 시퀀스를 엔티티 코드라고 한다.모든 엔티티 코드는 &으로 시작해 ;로 끝난다.엔티티 이름엔티티 코드설명출력공백 (non-breaking space) 공백 문자 <Less-than 기호 (> 기호>Greater-than 기호 (>)>& 기호&Ampersand 기호 (&)&" 기호"큰따옴표 (")"' 기호'작은따옴표 (') (HTML5)'© 기호©저작권 기호©® 기호®등록 상표 기호®€ 기호€유로화 기호€¥ 기호¥..

태그 태그는 horizontal rule의 줄임말이다.문단 수준 요소 사이의 주제 구분(장면 전환 섹션 또는 주제 전환 등)을 나타내는 태그이다.브라우저에서 가로로 구분선을 만든다. 태그는 하위 콘텐츠를 가질 수 없는 빈 요소로 닫는 태그가 없다.속성aligin : 줄의 정렬을 지정 (default: left)color : 색깔 이름 또는 16진수의 값으로 색상 지정noshade : 그림자가 없도록 설정size : 줄의 높이를 픽셀 단위로 지정width : 줄의 가로 길이를 픽셀 또는 퍼센트 값으로 지정주의할 점1) 문서의 개요에는 영향을 주면 안된다.문단 수준의 요소가 아닌, 섹션과 푸터 사이에 배치되는 경우,2) 가로 구분선의 시각적 표현으로만 사용한 경우태그를 단순히 시각적 표현(수평선 스타일)으로..

블록 요소블록 요소는 새 줄로 시작하며 부모 요소의 전체 너비를 차지한다.한 줄을 100% 사용하며, 사용하지 못하는 공간은 margin으로 채운다.width, height, padding, margin, border 속성을 지정할 수 있다.div콘텐츠 분할(division) 요소를 말한다.여러 요소를 하나로 그룹화하는 제네릭 블록 컨테이너이다.CSS를 적용하기 전까지는 content나 layout에 영향을 주지 않는다.플로우 콘텐츠를 그룹화하거나 스타일을 적용하기 위해 사용한다.블록 요소의 종류, , ~, , , , , , , , , ,인라인 요소인라인 요소는 새 줄을 만들지 않고, 요소의 내용만큼의 너비를 차지하며, 다른 요소들과 가로로 나란히 배치된다.인라인 요소는 자신이 포함한 콘텐츠의 크기만큼만..

HTML5 의 정의MDN 문서에 의하면, HTML5는 HTML의 새로운 버전으로 Client Side Technology 기술의 중심이 되는 마크업 언어이다.기존의 HTML만으로는 웹서비스를 구성하는 데 한계가 있었지만, HTML5은 JavaScript API와 같은 새로운 기능이 도입하여 클라이언트와 서버의 통신을 지원하고 있으며, 외부 플러그인 없이도 웹 서비스를 제공할 수 있도록 발전하였다.플러그인이란 웹 브라우저와 연동되는 특정 프로그램으로, 사용자의 PC에 추가 설치해 웹 브라우저의 기능을 확장시키는 추가 프로그램이다. (예: Adobe Flash, Microsoft Silverlight) HTML5의 등장으로 CSS3, 자바스크립트 API를 통해 기능 확장을 하는 것이 가능해졌고, 웹 콘텐츠에..

태그란?태그는 이미지를 의미하는 태그로 이미지를 삽입할 때 사용한다.열고 닫는 태그 없이 라는 하나의 태그만 존재한다. (닫는 태그를 통해 범위를 나타낼 필요가 없기 때문에!)속성필수 속성 - src이미지를 삽입하려면 필수 속성인 src를 사용해서 삽입하려는 이미지 소스의 경로를 지정해야 한다.선택 속성 - alt이미지의 대체 텍스트를 지정하는 옵션이다.스크린 리더를 사용하는 사용자에게 이미지 대신 텍스트로 설명해줄 수 있다.이미지를 불러오는데 에러가 난 경우에도 이미지를 텍스트로 대체할 수 있다.

태그란?속성 - href 태그는 href 특성을 통해 다른 리소스에 접근할 수 있는 하이퍼링크를 만든다.이 태그로 표시되는 콘텐츠를 클릭하면 링크된 URL로 이동하게 된다.기본 구조앵커 태그href="URL" : 하이퍼링크(줄여서 '링크')될 URL을 지정하는 속성이다. 이 속성은 필수이다.URL: 다양한 형태의 리소스의 위치와 정보를 제공하는 고유한 주소를 말한다.하이퍼 링크: 인터넷에서 다른 리소스로 바로 접근할 수 있는 링크참고할 자료태그 - 올바른 이해와 사용 방법

순서가 없는 목록 요소 순서가 지정되지 않는 항목(items)의 목록(list)를 나타내는 태그이다.은 순서를 변경해도 그 의미가 실질적으로 변경되지 않는다는 의미인 Unordered List(정렬되지 않은 목록)의 약자이다.항목의 순서가 중요하지 않은 항목들을 그룹화할 때 사용한다.이 요소의 하위 항목은 태그로 구성된 요소들이다.하위 항목 앞에는 글머리 기호가 자동으로 생성돼 표시된다.는 목록 내의 단일 아이템을 나타내는 태그이다.순서가 있는 목록 요소 순서가 지정되어 있는 항목(items)의 목록(list) 을 나타내는 태그이다.은 순서를 변경하면 그 의미가 실질적으로 변경된다는 의미인 Ordered List(순서가 지정된 목록)의 약자순서가 중요한 항목들을 그룹화할 때 사용한다.이 요소의 하위 항..

HTML 문서라면 갖춰야 하는 필수적인 구조가 있다. 이 구조는 만드는 모든 HTML 문서에 필수적으로 들어가야하는 표준화된 마크업이다. HTML 문서 제목 콘텐츠는 body 태그 안에!HTML 5(HTML의 최신 규격)를 사용하고 있다는 표식이다. 태그루트 요소로, 문서의 최상위 요소를 의미한다.문서의 모든 콘텐츠는 html 태그 안에 포함되어야 한다.lang 속성을 사용해 문서의 언어를 명시한다.html 태그의 안에는 하나의 요소와 하나의 요소가 들어가 있다.head 태그메타 데이터 요소 라고 부르며, 페이지 상에 보이지 않는 내용을 담고 있다.브라우저와 검색 엔진이 페이지를 이해하기 위해 필요한 메타 데이터를 포함한다.meta 태그문서의 메타 데이터를 설정한다.인코딩, 뷰포트 설정, SE..

~ 요소부터 까지는 HTML에서 제목이나 섹션 제목을 표현하기 위해 사용되는 태그이다. 보기에는 비슷해 보이지만, 각 태그는 문서의 계층 구조를 표현하는 중요한 의미를 가진다.총 6가지 제목 태그: 페이지의 최상위 제목을 나타내는 태그. 한 페이지에 하나만 존재해야 한다. 최상위 주제가 두 개일 수는 없기 때문이다. ~ : 하위 섹션 제목을 나타내는 태그이다.는 의 하위 제목이고, 는 의 하위 제목이다. 이와 같이 계층 구조를 형성한다.제목 계층의 중요성와 이 없으면 는 존재할 수 없다. ~ 가 없다면 는 존재할 수 없다.제목 단계를 뛰어넘으면 사용자에게 혼란을 줄 수 있다.예를 들어, 를 사용하는데 앞에 가 없는 경우이다.접근성과 SEO에 미치는 영향제목 태그는 웹 페이지의 계층 구조를 나타내기 때문..