표를 만드는 태그 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. 태그 태그는 단락을 만들때 사용하는 태그이며 텍스트를 표시할 때 가장 많이 사용하는 태그입니다. 이때 단락이란 앞뒤에 줄바꿈이 있는 텍스트 덩어리를 말합니다. 태그로 표시하는 텍스트 단락은 태그를 만날 때까지 줄바꿈 없이 텍스트를 한 줄로 표시하는데 텍스트 줄이 브라우저 창의 너비보다 길어질 경..
1. UI 요소 상태에 따른 가상 클래스 웹 사이트나 앱 화면을 디자인할 때 웹 요소의 상태에 따라 스타일을 지정하기 위해 UI 요소 상태에 따른 가상 클래스를 사용합니다. :enabled 와 :disabled 가상 클래스 선택자 해당 요소가 사용 가능한 상태일 때의 스타일을 지정하려면 :enabled 클래스를 사용하고 해당 요소가 사용 불가능한 상태일 때의 스타일을 지정하려면 :disabled 클래스를 사용합니다. 예를 들어 여러 줄의 텍스트를 입력할 수 있는 텍스트 영역 필드를 게시판 입력 화면으로 사용할 때는 enabled 상태이지만 회원 약관 등을 보여 줄 때는 사용자가 내용을 보기만 해야 하므로 disabled 상태로 만들어야 합니다. :checked 가상 클래스 선택자 라디오 박스나 체크 박스..
구조 가상 클래스 구조 가상 클래스란 말 그대로 웹 문서 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 지정할 때 사용하는 가상 클래스 선택자입니다. 1. :root 가상 클래스 선택자 문서 안의 루트(root)요소에 스타일을 적용합니다. HTML 문서에서는 루트(최상위) 요소가 HTML이므로 HTML 요소에 스타일이 적용됩니다. 전체적으로 문서 안에 똑같이 적용할 스타일이 있을 경우 :root 선택자를 이용해 지정합니다. 2. :nth-child(n)와 :nth-last-child(n) 가상 클래스 선택자 웹 문서에서 특정 부분에 스타일을 적용하려면 class 나 id 선택자를 이용해 이름을 붙여주고 스타일을 정의하면 되지만 여러 개의 항목이 일렬로 나열되어 있는 경우 스티일을 지정할 항목이 ..
사용자 동작에 반응하는 가상 클래스 사용자가 웹 요소를 클릭하거나 마우스 커서를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶다면 가상 클래스 선택자를 사용합니다. 메뉴에서 몇 번째 항목이라든가 단락의 첫 번째 글자 등을 선택하고 싶은 경우 클래스 이름 앞에 콜론(:)을 붙여 ㅍ표시하는 가상 클래스와 클래스 이름 앞에 콜론 두개(::)를 붙여 표시하는 가상 요소를 사용합니다. :link 가상 클래스 선택자 - 방문하지 않은 링크에 스타일 적용 문서 안의 하이퍼링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용합니다. 텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시되는데 링크의 밑줄을 없애거나 색상을 바꾸려고 할 때 :link 선택자를 사용합니다. :visited 가상 클래스 ..
표 스타일 CSS - vertical-align vertical-align 속성은 수직 정렬 방법을 지정하는 속성이기 때문에 inline이나 inline-block으로 배치한 요소의 세로 정렬 방법으로 지정합니다. 기본형 : vertical-align : baseline / top / bottom / middle / sub / super / text-top / text-bottom / / 속성 값 설명 baseline 인라인 요소의 기준선을 부모 요소의 기준선(baseline)에 맞춥니다. sub 인라인 요소의 기준선을 부모 요소의 아래 첨자 위치에 맞춥니다. super 인라인 요소의 기준선을 부모 요소의 위 첨자 위치에 맞춥니다. top 인라인 요소의 윗부분을 부모 요..