반응형

언어 자료구조 알고리즘/HTML5 15

[HTML5] 10. HTML 문서를 작성하는 사람 입장에서는 보기 불편한 특수 문자

10. HTML 문서를 작성하는 사람 입장에서는 보기 불편한 특수 문자 안녕하세요. 언제나 휴일, 언휴예요.HTML에서는 는 태그를 표현할 때 사용하죠. 그러면 실제 화면에 를 표현하려면 어떻게 해야 할까요? HTML 문서에 표현하기 위해 약속한 복잡한 표현을 사용해야 하는 특수 문자들이 있어요. HTML 문서를 작성하는 사람 입장에서는 보기 불편한 문자일 수 있죠. 하지만 이러한 특수 문자를 암기하지는 않더라도 필요할 때 찾아서 쓸 수는 있어야 겠죠. 먼저 �나  처럼 표현하면 특수 문자를 확인할 수 있어요. 이는 약속한 코드값으로 문자를 확인하는 것이예요. 이를 HTML 문서 작성에 사용하면 코드값에 따른 문자를 확인할 수 있겠죠. 다음은 코드 00에서 코드 249까..

[HTML5] 9. time 태그로 날짜와 시각 정보를 표시하는 습관을 기릅시다.

time 태그로 날짜와 시각 정보를 표시하는 습관을 기릅시다. 안녕하세요. 언휴예요. 이번에는 날짜와 시각 정보를 표시할 때 사용하는 태그를 알아보기로 해요. 태그를 이용하면 날짜 정보, 시각 정보 혹은 날짜 정보와 시각 정보를 표현하였을 때 브라우저나 검색 엔진 및 장애인이 사용하는 보조 기술에 해당 데이터가 일시를 나타낸다는 것을 정확하게 알려줄 수 있습니다. 일시를 다른 텍스트 구문을 입력하는 것처럼 입력하는 게 편하겠죠. 하지만 검색 엔진이나 보조 기술을 사용하는 프로그램이나 시각 장애인은 정확한 정보를 얻을 수가 없습니다. 태그는 날짜 정보만 표시하거나 시각 정보만 표시하거나 두 가지를 병행하여 표시할 수 있어요. 형태로 표현합니다.만약 날짜 정보만 표현할 때는 YYYY-MM-DD 부분만 표현할..

[HTML5] 8. 굵게 표시하는 태그 <strong>은 강조 <b>는 그냥 굵게

굵게 표시하는 태그 은 강조 는 그냥 굵게 텍스트를 굵게 표시하는 태그는 과 가 있어요. 실제 두 개의 태그는 브라우저에 나타나는 모습은 차이가 없습니다. 하지만 태그는 강조하기 위해 굵게 표시하는 것이며 태그는 굵게 표시는 하지만 강조 의미는 없답니다. 시각 장애우를 위한 스크린 리더기를 만들 때나 웹 수집기에서 강조하는 부분만 수집하는 기능이 있다면 태그를 사용한 것만 수집합니다. 아직까지 이러한 구분을 명확히 사용할 필요를 느끼지 못하겠지만 목적에 맞게 사용하였을 때 다양한 종류의 구독자나 엔진에 의해 게시자의 뜻을 보다 정확하게 전달할 수 있어요. 주의할 점은 제목을 나타낼 때는 strong 태그를 사용하지 마시고 태그를 사용하세요.DOCTYPE html> 굵게 표시하는 strong과 b 태그, ..

[HTML5] 7. mark 태그를 이용하여 중요한 텍스트에 형광펜 효과를 주자.

mark 태그를 이용하여 중요한 텍스트에 형광펜 효과를 주자. HTML5에서 새롭게 텍스트에 효과를 내는 태그 중에 는 형광펜을 그은 듯한 효과를 줄 때 사용합니다. 예제를 통해 알아보기로 해요. DOCTYPE html> 중요한 곳에 mark로 형광펜 효과주기 안녕하세요. 언휴예요.2016년 5월 17년간 실무와 강의를 마칩니다.그리고 이제까지 축적한 노하우와 지식을 온라인을 통해 공유할 계획이예요.C, C++, C#, Java, Python 등의 프로그래밍 언어와 다양한 기술 및 무료 동영상 강의를 배포할 거예요.언제나 휴일 메인 사이트 만약 형광펜의 색을 사용자가 결정하기를 원하면 스타일을 하나 정의하세요. 그리고 스타일에 background-color 속성으로 색상을 정합니다.투명도까지 정하고자 한..

[HTML5] 6. 안전한 구조를 위해 br 태그에 종료를 표시하자.

안전한 구조를 위해 br 태그에 종료를 표시하자. 앞에서 문단을 나타낼 때 ... 태그를 사용하고 소스 코드를 표현할 때 ... 태그를 사용하는 것을 다루었죠. 이번에는 문단을 나누지는 않지만 개행에 사용하는 태그를 소개할게요. HTML의 대부분 태그는 시작 태그와 종료 태그가 있습니다. 물론 내부 문자열이 없을 때 시작과 종료를 한꺼번에 표현하기도 하죠. 시작 태그와 종료 태그태그없이 입력한 예 시작과 종료를 한꺼번에 표현 종료 태그는 시작 태그명과 같은 이름을 사용하고 태그 앞에 /를 추가한 것을 말해요. 그런데 br은 종료 태그가 없습니다. 이러한 특징은 HTML이 구조적으로 안전하지 못하게 하는 요인이기도 합니다. XML은 이에 반해 언제나 시작 태그가 있으면 종료 태그가 있어요. 물론 내부 문자..

[HTML5] 5. 소스 코드를 본문에 포함할 때는 pre 태그를 사용!

소스 코드를 본문에 포함할 때는 pre 태그를 사용! HTML 문서를 작성할 때 작성할 때 보이는 것과 브라우저에서 보이는 내용이 다르게 보일 수 있습니다. 간단한 예를 들어볼게요. 태그없이 입력한 예 DOCTYPE> 태그없이 입력한 예정몽주의 '단심가'이몸이 죽고 죽어 일백번 고쳐 죽어백골이 진퇴되어 넋이라도 있고 없고님 향한 일편단심이야 가실 줄이 있으랴 보시는 것처럼 편집할 때 여러 문단으로 작성한 것이 하나의 문단으로 나타나는 것을 알 수 있습니다. HTML에서는 태그를 통해 새로운 문단을 시작하는 것을 나타내 줄 수 있습니다. 태그 사용한 예 DOCTYPE> p태그 사용한 예 정몽주의 '단심가' 이몸이 죽고 죽어 일백번 고쳐 죽어 백골이 진퇴되어 넋이라도 있고 없고 님 향한 일편단심이야 가실 줄..

[HTML5] 4. 주석으로 가독성을 높이자.

4. 주석으로 가독성을 높이자. 웹 사이트를 구축하다 보면 자신이 만든 혹은 남이 만든 내용이 무엇인지 살펴볼 때가 많습니다. 이 때 자신이 원하는 부분을 빠르게 찾을 수 있고 무슨 의미인지 쉽게 이해할 수 있다면 개발 및 유지보수 비용을 줄일 수 있습니다. 대부분의 브라우저에서는 Ctrl + F 키를 누르면 문자열 검색을 할 수 있어요. 이를 잘 활용하기 위해서 작성하는 HTML 문서에 주석을 넣어두면 찾기도 쉽고 이해하기도 쉽답니다. 주석은 로 끝납니다. DOCTYPE html> 주석으로 가독성을 높이자. 청포도 이육사 내 고장 칠월은청포도가 익어 가는 시절 이 마을 전설이 주저리주저리 열리고먼 데 하늘이 꿈꾸며 알알이 들어와 박혀 하늘 밑 푸른 바다가 가슴을 열고흰 돛단배가 곱게 밀려서 오면 내가 ..

[HTML5] 3. 글자가 이상하게 보일 때 깨지지 않게 meta태그에 인코딩 설정

글자가 이상하게 보일 때 깨지지 않게 meta태그에 인코딩 설정 웹 문서에 한글이나 한자, 일본어 등으로 작성한 글은 사용자의 문화권에 따라 깨져 보일 수 있습니다. 이는 문화권에 따라 사용하는 문자 인코딩이 다르기 때문이죠. 이 때 meta 태그에 UTF-8로 인코딩을 설정하면 문제를 해결할 수 있어요.DOCTYPE html> ... UTF-8은 가변 길이 문자 인코딩 방식 중에 하나로 Universal Coded Character Set Transformation Format - 8bits의 약자입니다. 유니코드를 위해 켄 톰프슨과 롭 파이크가 만든 것이죠. 위키백과에서 확인하기 만약 국내의 고객만을 대상으로 웹 페이지를 만들고 사용하는 문자가 한글과 영어만 있다면 "euc-kr" 메타 태그를 사용할..

[HTML5] 2. 간단해진 HTML 문서 형식 선언 <!DOCTYPE html>

간단해진 HTML 문서 형식 선언 DOCTYPE html>... HTML 문서의 시작은 으로 시작할 것을 권장하고 있습니다. HTML5 이전인 HTML4에서는 HTML의 문서 유형이 몇 가지가 있었답니다. 그리고 브라우저마다 지원하는 정도에 차이가 있었죠. 이러한 이유로 문서 형식을 맨 위에 선언하여 브라우저가 웹 문서를 로딩하여 렌더링하기 쉽게 해 주었어요. HTML4에서의 문서 유형은 문법을 정확히 지키는 strict ,일부 규약을 따르지 않았을 때에도 처리를 요구하는 transitional, 프레임 구조로 구성한 frameset이 있어요. strict 모드로 문서 형식 선언DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/h..

[HTML5] 1. 첫 번째 만드는 HTML 문서, "Hello, HTML"

첫 번째 만드는 HTML 문서, "Hello, HTML" 먼저 메모장을 열어 다음처럼 HTML 문서를 편집하세요. DOCTYPE html> Hello, HTML5 안녕하세요. 언휴예요. first.html 이름으로 저장하신 후에 더블 클릭하여 확인하세요. DOCTYPE html>현재 문서가 어떤 형식에 맞게 제작했는지 설명합니다.HTML5, XHTML, HTML의 세 가지 유형이 있습니다.웹표준과 접근성을 높이기 위해 HTML 문서의 첫번째 행에 공백없이 선언합니다.이를 생략하면 비표준모드로 렌더링하여 일부 브라우저에서 문제가 발생할 수 있어요. ...HTML 문서는 시작 태그로 시작하여 종료 태그로 종료합니다. ...문서를 설명하는 메타 정보를 나타내는 영역입니다.문서 제목이나 문자 인코딩 정보등을 작..

반응형