키보드와 하루

1. 개념 ,, - 표에서 제목,본문,요약 구분하기 : 표의 구조를 나눌 때 위에 표시되는 내용으로 제목에 해당하는 부분됨 : 표의 구조를 나눌 때 중간에 표시되는 내용으로 본문에 해당하는 부분됨 : 표의 구조를 나눌 때 마지막에 표시되는 내용으로 요약이나 합계에 해당하는 부분됨 2. 태그 ,, html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 DOCTYPE html> 1 이름 동 호 2 테스트1 101동 1호 테스트2 102동 2호 3 요약이나 합계를 담는 영역 결과 화면 코드 설명 전체적인 설명 표의 구조를 잡기 위해서 thead,tbody,t..

1. 개념 , - 표에다가 제목 만들기 : table 태그 다음에 사용하고 이 태그를 이용하면 자동으로 표의 위,중앙에 표시됨 : figure 태그 안에 table 태그와 함께 사용됨 table 태그 위에 쓰면 표 위에 제목이 표시되고 /table 아래에 쓰면 표 밑에 제목이 표시됨 caption 과 다르게 중앙 정렬은 되지 않음 2. 태그 , html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 DOCTYPE html> 1 기숙사 사용자 명단 이름 동 호 테스..

1. 개념 ,,, - 표 만들기 : table 태그는 브라우저에서 표를 만들어 사용하고자 할 경우에 사용되는 태그 : 행을 만들 때 사용 : 행 안에서 열을 만들 때 사용 : td 대신 사용하는 것으로 행 안에서 열을 만들면서 굵게 표시 및 가운데 정렬 2. 태그 ,,, html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 DOCTYPE html> 1 이름 동 호 2 테스트1 101동 1호 테스트2 102동 2호 결과 화면 코드 설명 1 ...... tr 태그를 이용해서 먼저는 행을 만들었습니다. 그리고 th태그를 이용해서 열을 만들면 위에서 보는 거와 같이 가운데 정렬이 되고 글씨가 굵게 표시되는 것을 확인할 수..

1. 개념 - 제목과 설명을 하나의 목록으로 만들기 : dl 태그는 하나의 단락에서 제목과 설명을 나눠서 작성하고자 할 경우에 사용되는 태그 : 제목을 표시 : 설명을 표시 하나의 dl 태그에 안에 여러개의 dt태그와 dd태그를 사용할 수 있음 2. 태그 html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 DOCTYPE html> 1 제목1 제목1에 해당하는 설명 태그1 입니다. 제목1에 해당하는 설명 태그2 입니다. 제목1에 해당하는 설명 태그3 입니다. 2 제목2 제목2에 해당하는 설명 태그 입니다. 제목3 제목3에 해당하는 설명 태그 입니다. 결과 화면 코드 설명 1 ...... dt 태그를 이용해 제목1을 하나 넣고 나머지 부분에 ..

1. 개념 - 순서 있는 목록 : ol 태그로 감싸고 각 항목을 li 태그를 써서 순서 있는 목록을 만들 수 있음 type의 유형에 따라서 순서를 어떻게 할 것인지를 정할 수 있음 2. 태그 html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 DOCTYPE html> 1 순서 목록1 순서 목록2 2 순서 목록3 순서 목록4 3 순서 목록5 순서 목록6 4 순서 목록7 순서 목록8 5 순서 목록9 순서 목록10 결과 화면 코드 설명 1 ...... ol은 순서가 있는 목록을 만들 수 있습니다. 타입 유형이 있지 않을 경우에는 기본형으로 숫자 1,2,3...으로 순서가 정해지게 됩니다..

1. 개념 - 순서 없는 목록 : ul 태그로 감싸고 각 항목을 li 태그를 써서 순서가 없는 목록을 만들 수 있음 2. 태그 html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 DOCTYPE html> 1 순서 없는 목록1 순서 없는 목록2 순서 없는 목록3 순서 없는 목록4 순서 없는 목록5 순서 없는 목록6 결과 화면 코드 설명 1 ...... 순서가 없는 목록을 만드는 태그는 ul 입니다. 각 항목은 li로 쓰면 항목 앞에 목록을 나타내는 원형 모형이 나타납니다. 기본 타입은 색깔이 있는 원형이고 list-style-type을 이용해서 모양을 바꿀 수 있습니다.

1. 개념 - 형광펜 효과 , - 텍스트 영역 감싸기 : 태그로 감싼 부분의 배경색을 노란색이 되어 형광펜으로색칠한 효과를 줌 : span 태그로 감싼 텍스트에 스타일을 적용하려고 할 때사용 2. 태그 , html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 DOCTYPE html> 1 형광펜 효과를 내는 mark태그 입니다. 2 span 태그입니다. 아무런 의미가 없지만 이 부분만 감싸서 스타일을 낼 수 있습니다. 결과 화면 코드 설명 1 ...... mark 태그를 감싸게 되면 자동으로 배경색이 노란색으로 되면서 형광펜으로 그은 듯한 효과를 줍니다. 만약에 노란색이 아닌 다른 색으로 하고 싶다고 하면 background-color:로 스타일을 설정하여서 다른 색으로도 설정이 가능..

1. 개념 - 따옴표로 인용 내용 표시 : 인용한 내용을 표시하기 위한 것 2. 태그 - 예제 html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 DOCTYPE html> 1 지금부터 인용할 구문은 키보드와 하루 블로그 입니다. 지금부터 인용할 구문은 키보드와 하루 블로그 입니다. 결과 화면 코드 설명 1 ........ q태그를 이용하면 인용한 내용임을 표시하고자 할 때 따옴표로 표시하는 것을 확인하실 수 있습니다. 눈에 보이는 따옴표가 똑같이 때문에 따옴표(")를 그냥 써서 사용하는 것과 무슨 차이가 있느냐라고 생각하실 수 있습니다. 웹 브라우저에 표시된 것은 그렇지만 실제 웹 접근성을 위해서는 q태그를 이용해 인용문을 표시하는 것이 맞습니다. 속성으로 cite라는 것을 이용하..

1. 개념 , - 글자 굵게 표시 과 는 둘 다 텍스트를 굵게 표시 이 둘의 차이점은 화면을 읽어주는 음성에 따른 기능 때문임 : 중요한 내용을 강조하고 싶을 때 : 단순히 텍스트를 굵게 표시할 때 2. 태그 , - 예제 html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 DOCTYPE html> 1 strong을 이용한 굵게 표시 2 b를 이용한 굵게 표시 결과 화면 코드 설명 1 ........ strong과 b는 눈으로 보기에는 똑같이 텍스트를 굵게 하는 역할을 합니다. 그렇기 때문에 웹 브라우저에 표시된 것만으로는 strong과 b는 차이를 확인 할 수 없습니다. 화면을 낭독하는 부분에서는 중요한 부분이 있을 경우에는 strong을 사용해 주시는 것이 좋습니..

1. 개념 - 입력한 그대로 표시 : preforamt의 줄임말로 태그에서 입력한 공백이 그대로 브라우저에 표시됨 2. 태그 html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 DOCTYPE html> 1 입력 테스트 입력 테스트2 입력 테스트3 빈칸이 없는 입력 테스트4 결과 화면 코드 설명 1 보통 html에서 다른 태그를 입력하게 되면 공백을 여러번 입력해도 한번만 나오는 것을 확인 하실 수 있습니다. 그런데 이 pre 태그를 입력하게 되면 그대로 브라우저에 표시가 됩니다. 위에서 보시는 것처럼 소스를 작성할 때 간격을 맞추기 위해서 일정한 간격을 주게 되면 pre태그를 입력하게 되면 그 간격까지도 표시를 해주게 됩니다.