표를 만드는 태그 2 1. , , 태그 - 표 구조 정의하기 표의 각 셀은 제목이 있는 부분과 실제 내용이 있는 본문 그리고 요약 부분이 있는 부분으로 표의 구조를 나눌 수 있는데 이때 사용하는 태그들이 제목 부분인 , 본문 부분인 , 요약 부분인 태그입니다. 위와 같이 표의 구조를 정의하면 시각장애인들도 화면 낭독기를 통해 표의 구조를 쉽게 이해할 수 있습니다. 기본형 : 구분 1분기 2분기 3분기 서울 10 5 20 경기 8 9 10 부산 11 6 7 합계 29 20 37 2. , 태그 - 여러 열 묶어 스타일 지정하기 표에서 하나의 열에 스타일을 지정하거나 열을 몇 개씩 묶어 스타일을 한꺼번에 지정할 수도 있습니다. 태그는 한 열에 있는 모든 셀에 같은 스타일을 적용하려고 할 때 사용하는 것으로 닫..
표를 만드는 태그 1 표는 행(row)과 열(column)로 이루어져 있고 행과 열이 만나 이루는 영역을 셀(cell)이라고 합니다. 하나의 표를 만들기 위해서는 여러 개의 태그가 필요합니다. 1. , , , 태그 - 기본적인 표 만들기 기본적인 표를 만들기 위해서는 가로축 행을 만드는 태그, 세로축 열을 만드는 태그가 각각 필요합니다. 그래야 겹치는 구간인 각 셀에 내용을 입력할 수 있습니다. 표를 만들 때는 태그를 이용해 전체 윤곽을 잡은 후 행(row)을 먼저 만들고 각 행마다 몇개의 셀(cell)이 들어갈지 결정합니다. 기본형 : 내용 내용 1-1. 태그 - 표에 제목 셀 만들기 표를 만들다 보면 첫 번째 행이나 첫번째 열에 셀의 제목을 넣는 경우가 많습니다. 태그 대신 태그를 사용하면 이런 과정..
목록을 만드는 태그 1. 태그, 태그 - 순서 없는 목록 만들기 순서가 필요하지 않은 목록을 만들 때는 태그를 사용하고 태그 안에 태그를 사용해 각 항목을 표시합니다. 순서 없는 목록의 경우, 각 항목 앞에 작은 원이나 사각형 같은 불릿이 붙습니다. 기본형 : 내용 내용 태그 순서 없는 목록 만들기 2. 태그, 태그 - 순서 있는 목록 만들기 항목을 나열하되 순서가 필요한 목록을 만들때는 태그를 사용하고 태그를 사용해 각 항목을 표시합니다. 태그에는 태그와 달리 여러 속성들이 함께 사용되어 목록의 숫자 표기 방법이나 시작하는 숫자 등을 바꿀 수 있습니다. HTML4에서는 type 속성을 이용해서 숫자의 종류를 다양하게 조절했지만 HTML5에서는 CSS의 list-style-type 속성을 이용해 조절합니..
텍스트를 한 줄로 표시하는 태그 아래 태그들은 텍스트에서 사용하는 태그들 중에서 태그를 적용해도 줄바꿈 없이 텍스트를 표시하는 '인라인 레벨'태그 입니다. 1. 태그, 태그 - 굵게 표시하기 텍스트 중에서 굵게 표시하려고 할 때 > 태그나 태그를 사용합니다. 화면으로 보기에는 차이가 느껴지지 않는 두 태그를 구분하는 이유는 화면 낭독기에서의 기능 때문입니다. 화면 낭독기에서는 강조하고 싶은 부분을 굵게 표시하더라도 내용을 눈으로 보는 것이 아니기 때문에 그 부분이 강조된 것인지, 다른 내용과 구분하기 위해 단지 굵게 표시한 것인지 구별하지 못합니다. 따라서 경고나 주의 사항처럼 중요한 내용이어서 강조해야 할 때는 태그를 사용하고 문서의 키워드처럼 단순히 굵게 표시할 때는 태그를 사용합니다. 기본형 : 굵..
텍스트를 덩어리로 묶어 주는 태그 텍스트를 블록(block)으로 묶어 처리하는 태그들입니다. 아래 태그들은 선택한 텍스트 글자에만 적용되는 것이 아니라 텍스트가 포함된 블록 전체에 적용됩니다. 1. 태그 태그는 제목을 표시할 때 사용됩니다. 제목 텍스트는 일반 텍스트보다 크고 진하게 표시됩니다. 제목 크기에 따라 ~ 태그까지 사용할 수 있는데 이 가장 크게 표시되고 이 가장 작게 표시됩니다. 기본형 : 제목 2. 태그 태그는 단락을 만들때 사용하는 태그이며 텍스트를 표시할 때 가장 많이 사용하는 태그입니다. 이때 단락이란 앞뒤에 줄바꿈이 있는 텍스트 덩어리를 말합니다. 태그로 표시하는 텍스트 단락은 태그를 만날 때까지 줄바꿈 없이 텍스트를 한 줄로 표시하는데 텍스트 줄이 브라우저 창의 너비보다 길어질 경..
엔티티(Entity) HTML에는 미리 예약된 몇몇 문자가 있으며, 이러한 문자를 HTML 예약어(reserved characters)라고 부릅니다. 이러한 HTML 예약어를 HTML 코드에서 사용하면, 웹 브라우저는 그것을 평소와는 다른 의미로 해석합니다. 따라서 HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티(entity)라고 합니다. 엔티티의 문법 &엔티티이름; 또는 &#엔티티숫자; 엔티티의 이름은 대소문자를 구분합니다. HTML에서 제공하는 대표적인 엔티티 모든 엔티티에 대한 자세한 정보는 W3C 공식 사이트를 방문하여 확인할 수 있습니다. W3C 공식사이트 바로가기 심벌 특수문자 HTML 예약어 이외에도 키보드에 입력할 수 없는 문자를 표현하기 위한 심볼..
HTML 문서구조 및 속성 HTML 문서구조 문서 구조 HTML 구조는 html 요소 안에 head와 body로 이루어져 있습니다. HTML 구조는 독타입 선언을 해주어야 하나의 웹 문서가 완성됩니다. HTML 문서는 상하 관계가 존재하는 계층적인 구조로 되어 있습니다. 상위에 있는 요소와 하위에 있는 요소는 부모 자식 관계로 표현하며, 이러한 구조를 DOM구조라고 합니다. head 요소에는 제목, 사이트 정보, 스크립트, 스타일 시트, 메타 정보 등을 제공합니다. body 요소에는 문서 본문에 해당하는 콘텐츠 영역입니다. HTML 요소 구조 HTML 요소(element)는 여러 속성을 가질 수 있으며, 이러한 속성(attribute)은 해당 요소에 대한 추가적인 정보를 제공합니다. 또한, HTML 요소..
태그(Tag) 태그는 HTML에서 정보를 전달하는 방식을 의미합니다. HTML 언어를 사용하여 문서를 만드는데 있어 어디가 이미지고 어디가 텍스트인지 표시하는 것을 마크업이라고 하는데 마크업할 때 사용하는 약속된 표기법을 '태그(Tag)라고 합니다. 태그는 웹 문서에 표시하려는 내용을 전달하는 언이이기 때문에 정확히 사용해야 합니다. 1. 태그는 열린 태그와 닫는 태그가 있습니다. 2. 닫는 태그에는 " / " 가 있어야 합니다. 3. 닫는 태그가 필요 없는 경우도 있습니다.(ex: , 등) 4. HTML5에서는 " / " 가 생략이 가능합니다. 5. 태그는 소문자로 씁니다. 6. 적당히 들여씁니다. 7. 태그는 속성과 함께 사용할 수 있습니다. 8. 포함 관계를 명확히 합니다. TAG의 종류 태그 설명..
HTML이란 컴퓨터에서 사용하는 모든 파일에는 각각 고유의 형식이 있습니다. 예를 들어 엑셀 프로그램으로 문서를 작성했다면 확장자가 .xlsx인 파일로 저장되죠. 한글의 확장자는 .hwp이구요. 웹의 경우도 마찬가지입니다. 웹 사이트에서 사용할 문서는 웹에 맞는 형식인 .html 확장자를 붙여 다른 문서와 구분하고 이 파일을 더블 클릭하면 웹 브라우저가 실행되면서 그 안의 내용이 표시됩니다. 하지만 일반 문서와 웹 문서는 큰 차이가 있습니다. 엑셀 문서를 비롯한 일반 문서는 내용을 입력하는 프로그램과 나중에 그 내용을 확인하는 프로그램이 같지만 웹 문서는 문서를 작성하는 프로그램과 그 내용을 보는 프로그램이 서로 다릅니다. 웹 문서를 작성하는 프로그램을 웹 편집기(Web Editor)라고 하고 웹 문서를..