언제나 휴일

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

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

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

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

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

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

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

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

간단해진 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..

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