키보드와 하루

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태그를 입력하게 되면 그 간격까지도 표시를 해주게 됩니다.

1. 개념 - 수평줄 , - 인용문 : horizontal의 줄임말로 수평 줄을 삽입할 때 사용 : 다른 사이트의 글을 인용할 경우 사용 2. 태그 , html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 DOCTYPE html> 수평줄 위에 있는 텍스트 입니다. 1 인용문 위에 있는 문장입니다. 2 인용문으로 사용한 문장입니다. 인용문 아래에 있는 문장입니다. 결과 화면 코드 설명 1 여러 개의 텍스트 단락을 쓰게 될 때 구분을 해주거나 분리를 해줄 때 사용하면 됩니다. hr은 기본으로 가로선이 삽입되는데 CSS를 이용해서 가로선을 없앨 수 있습니다. 2 ...... blockquote태그는 인용한 글을 다른 텍스트보다 안으로 들여 쓰기 해줌으로써 일반 텍스트와 구별이 됩니다.

1. 개념 - 제목 표시 , - 단락 , - 줄 바꿈 : 제목을 뜻하는 heading으로 일반적으로 사용하는 텍스트보다 진하게 표시됨 숫자가 작을수록 글씨가 커지고 숫자가 커질수록 글씨가 작아짐 : paragraph의 줄임말로 앞 뒤에 줄바꿈 이 태그 안에 있을 때는 텍스트 줄이 브라우저를 넘어갈 경우 자동으로 줄바꿈이 됨 : break의 줄임말로 줄바꿈 없이 한 줄로 표시 이 태그는 닫는 태그가 없음 2. 태그 , , html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 DOCTYPE html> h1 테스트 입니다 h2 테스트 입니다 h3 테스트 입니다 h4 테스트 입니다 h5 테스트 입니다 h6 테스트 입니다 p테스트 입니다 br 테스트 입니다1 br 테스트..

1. 개념 html5 이란? html5는 정해진 형식이 있음 아무리 짧은 소스를 입력하더라도 반드시 필요한 구조가 포함되어 있어야 함 반드시 필요한 구조 4가지 : , , //실제 브라우저에서 표시되는 부분 h1 테스트 입니다 p 테스트 입니다 결과 화면 h1 테스트 입니다 p 테스트입니다 코드 설명 DOCTYPE html> 위 부분은 문서 유형을 지정하는 부분인데 유형을 지정하는 것이란 웹 브라우저에게 처리해야 할 문서는 HTML이니 여기에 맞는 방법으로 해석하라는 것을 지정해 주는 것입니다. ......... 실제 문서 정보와 내용이 시작되는 끝나는 부분을 정의하는 태그입니다. lang은 사용할 언어를 지정하는 것입니다. 언어 지정이 중요한 이유는 검색 사이트에서 특정 언어로 제한해서 검색할 때 적용..