*참고) 테이블은 default로 테두리가 표시되지않기 때문에 편리한 확인을 위하여 테투리를 1px주었습니다.
테이블의 테두리(border)가 두 줄씩 나타나는 이유는 <table>태그와 <th>태그, <td>태그가 모두 자신만의 테두리를 가지고 있기 때문입니다.
위와 같이 두 줄로 표현되는 테두리를 한 줄로 설정하려면 border-collapse 속성을 사용해야 합니다. border-collapse 속성값을 collapse로 설정하면, 테이블의 테두리를 한 줄로 표현할 수 있습니다. (css로 추가하는 부분입니다. 현재는 그냥 무시하시면 됩니다.)
<!DOCTYPE>
<html>
<head>
</head>
<body>
<dl>
<dt>떡볶이</dt>
<dd>가래떡을 적당한 크기로 잘라 여러 가지 채소를 넣고 양념을 하여 볶은 음식</dd>
<dd>양념은 간장으로 하기도 하고, 고추장으로 하기도 한다.</dd>
<hr />
<dt>타코</dt>
<dd>멕시코의 대표적인 요리의 하나</dd>
<dd>옥수숫가루 반죽을 살짝 구워 만든 토르티야라는 빵에 야채나 고기를 싸서 먹는다.</dd>
</dl>
</body>
</html>
Document Type Definition, DTD - DOCTYPE 선언은 HTML 문서에서 <html> 태그를 정의하기 전에 가장 먼저 선언되어야만 합니다. - 웹 브라우저가 웹페이지를 html5 문서임을 인식하게 만들어줍니다. - html5문서는 반드시 <!DOCTYPE html>을 작성하여야합니다.
<html>
- 모든 HTML 태그는 <html>태그 내부에 작성하여야합니다. - 모든 HTML 페이지의 루트입니다.
<Head>
- head에 작성하는 코드들은 웹페이지 화면에 표시되지 않습니다. - 웹페이지의 정보 또는 css,javascript파일 등을 연결하는 데 사용합니다.
<title>
- 웹페이지의 제목 태그입니다.
<body>
- 사용자에게 실제 보이는 부분을 작성합니다.
① head 에 작성되는 코드는 웹브라우저상에 표시되지않습니다.
① head 에 작성되는 코드는 웹페이지의 정보를 표시합니다. (예를들면, 해당페이지를 검색엔지에 노출시킬지, 해당페이지의 설명, 스타일시트 연결, 스크립트 연결 등을 작성합니다.
① head [내부에 넣을 수 있는 태그 종류]
head 내부 태그
설명
meta
웹 페이지의 정보를 작성합니다.
title
웹 페이지의 제목 태그입니다.
link
웹 페이지의 다른 파일을 추가합니다.( css연결)
script
웹 페이지에 스크립트를 추가하거나 연결합니다.
style
웹 페이지에 스타일시트를 추가합니다.
base
웹 페이지의 기본 경로를 지정합니다.
② body 에 작성되는 코드는 웹페이지 상에 보여지는 내용들을 작성합니다.
⑤ 웹표준과 W3C
(1) 웹표준이란?
- 웹에서 표준적으로 사용되는 기술이나 규칙을 말합니다.
- 표준화 단체인 W3C가 권고한 표준안에 따라 웹사이트를 작성할때 이용하는 HTML,CSS,JavaScript등에 대한 규정이 담겨있습니다.
- 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상 작동해야함을 의미합니다.
- 표준 스펙을 잘 지키는 것 뿐만 아니라 마크업(XHTML)고 표현 및 레이아웃(CSS) 및 사용자 행위제어를 잘 분리하는 고급 홈페이지 구추방식입니다.
- 현재는 거의 사라졌지만 ActiveX, Flash, 공인인증서, 플러그인과 같은 기술은 표준이 아닙니다.
(2) 웹표준 관련 기술
(3) 웹표준 장점
- 컨텐츠의 수정, 운영관리가 편리해집니다. 표준화된 구조와 분리된 CSS를 제어하기 때문에 수정에 대한 편의성이 증대됩니다.
- 웹 접근성이 향상됩니다. 다양한 브라우저( 익스플로러, 크롬, 사파리, 파이어폭스 등) 환경에서도 표준화된 컨텐츠를 보여줄 수 있습니다.
- 검색엔진에 최적화 됩니다. 표준화된 페이지는 구조화가 잘되어 있기 때문에 검색엔진 색출에 대한 기회 요소가 많아집니다.
- 데이터베이스를 효율적으로 사용할 수 있습니다. 웹 표준은 소스를 효율적으로 사용하여 서버공간과 데이터 부화를 줄입니다.
- 다양한 장치에서의 호환이 가능합니다. 별도의 해상도에 맞는 홈페이지 제작 없이 하나의 홈페이지로 여러 형태로 변형이 가능합니다(미디어쿼리)
(4) 웹표준 관련기구
- W3C (World Wide Web Consortium) : 월드 와이드 웹 컨소시엄은 국제적인 웹 기술 표준 기구를 말하며 정보/의견교환/아이디어 창출/가이드라인/소프트웨어 /독립적 사고 그리고 도구 및 규칙 등의 표준안을 제정함으로써 웹의 잠재력을 이끌어 내는 것을 목표로 하고 있습니다.
EMMET에서 제공하는 특정 Syntax로 반복적인 코드를 아주 짧고 쉽게 작성할 수 있습니다.
웹 개발시 필수 플러그인으로 거의 모두가 사용하신다고 생각하시면됩니다.
예) div>ul>li*5>a>img 이렇게 간단하게 작성하더라도 div안에 ul안에 li가 5개 각li 안에 a태그,img태그까지 자동으로 코드를 작성해줍니다.
ATOM(아톰) 에디터 추천 플러그인 02 - atom-beautify
제가 완전 애용하는 플러그인입니다.beautify 이름 그대로 코드를 보기 좋게 예~쁘게 만들어주는 플러그인 입니다.코드의 indentation을 이쁘게 만들어줘서 보기 쉽게 만들어줍니다.코드를 작성하다 보면 코드는 접접 길어지고 복잡해집니다.들여쓰기를 제대로 하지않으면 빠르게 찾아수정하기가 힘들어집니다.중간중간 atom-beautify로 정리하면서 작성하면 코드를 예쁘게 만들어주기에 꼭 사용하는 플러그인입니다.indentation은 코딩시 굉장히 중요한 작업입니다.
ATOM(아톰) 에디터 추천 플러그인 03 -autocomplete-html
HTML을 공부하면서 도움을 줄 수 있는 플러그인 입니다.
HTML태그를 자동완성시켜주는 플러그인입니다.
EMMET을 사용하면 되긴하지만, 가볍게 사용하기 좋습니다.
CSS,SQL등 AUTOCOMPLETE시리즈가 있습니다.
ATOM(아톰) 에디터 추천 플러그인 04 -color-picker
코드를 작성하는 도중에 포토샵 스포이트 처럼 색상을 찝어서 선택할 수 있습니다.색상을 보이는대로 선택하면 코드를 자동으로 작성해줍니다.CSS에 도움이 되는 플러그인으로 많이 사용됩니다.
ATOM(아톰) 에디터 추천 플러그인 05-minimap
반응형작업(미디어쿼리)할때 유용하게 쓰이는 플러그인입니다.말그대로 화면상의 긴 코드를 미니맵으로 보여주기때문에어느정도 위치에 있는지 확인할 수 있습니다.
ATOM(아톰) 에디터 추천 플러그인 06 -atom-live-server
Brakets에디터에서 실시간 미리보기 대신에 사용하는 플러그인입니다.브라켓에서는 정말 말그대로 실시간 미리보기이지만atom에디터의 atom-live-server은 완전 실시간은아닙니다.코드를 저장하고 확인하면 웹브라우저에서 확인이 가능합니다.atom-live-server 설치후 단축키는 Ctrl + Alt + 3입니다.저는 실시간 미리보기를 브라켓에서 너무 잘사용해왔기 때문에,이 플러그인은 필수로 설치합니다.