02 웹표준에 맞는 홈페이지 만들기
포트폴리오 홈페이지 만들기
<포트폴리오 홈페이지 만들기>
02 웹표준에 맞는 홈페이지 만들기
안녕하세요?
본격적으로 html에 들어가기 전에 간단하게 익혀야 하는 문법(규칙)이 있어요.
그렇게 복잡하지 않지만, 실제로 코딩을 할 때 중요한 부분이자 기본이 건데요.
대략 8가지 정도인데요. 밑에 나오는 문법은 반드시 익히세요. 뭐 그리 어렵지 않으니~
html 기본 문법
1. 요소는 제대로 중첩되어야 한다.
<p>중첩된 요소가 있을 때는 <strong>바르게</strong>표현해야 한다.</p>
// 마지막에 정의한 태그를 가장 먼저 닫아야 한다.
2. 요소 및 속성 이름은 소문자여야 한다.
<p><a href="index.htm">첫페이지</a></p>
// href: 속성이라 하고, = 다음에 나오는 것을 값이라고 한다.
3. 요소는 항상 닫아야 한다.
<p>요소는 <strong>항상 닫아야</strong>합니다.</p>
요소는 항상<br />닫아야 합니다.
<img src="images/today.gif" alt="오늘" />
// 빈요소: <br />, <hr />, <img />, <input />, <area />, <mata />, <link /> 등
4. 속성값에는 인용 부호를 붙여야 한다.
<a href="index.html">첫페이지</a> // = 다음에 오는 속성값은 ""를 붙인다.
5. 속성값은 속성값과 함께 써야한다.
<input disabled="disabled" /> // 속성은 속성값과 같이 선언해야 하며 생략하면 안 된다.
6. img와 area 요소에는 alt 속성이 있어야 한다.
<img src="images/today.gif" alt="오늘" />
// alt 는 이미지를 볼 수 없는 환경에서 그 이미지에 대한 정보를 제공한다.
7. 특수문자를 쓸 때는 Entity Name 또는 Entity Code
<p>you&me</p> // &는 특수문자'&'의 Entity Name
<p>you&me</p> // &는 특수문자'&'의 Entity code
8. 주석처리 방법
<!--주석 내용-->
어렵진 않죠?
그런데 코딩을 하다 보면 문법에 맞지 않게 코딩을 할 때가 있어요.
분명 맞게 코딩을 한 것 같은데, 실수를 하거나 착각을 해서 문법에 맞지 않을 경우가 종종 생기죠.
그럴 때 확인하는 사이트(https://validator.w3.org/)가 있어요.
홈페이지 html 작업이 끝나면 이 사이트 들어가서 한번 문법의 유효성 검사를 해보면 되는데요.
웹문서가 서버에 있으면 Validate by URL
본인 컴퓨터에 폴더로 있으면 Validate File Upload로 들어가서 하면 돼요.
체크를 누르면 문법상 오류가 생기면 아래처럼 Error 부분이 쭉~~나와요~
친절하고 몇행이 틀린 건지 나오기 때문에 그 부분만 찾아서 수정하면 돼요.
그렇게 하나씩 수정하다 보면 통과가 되는데요.
더 이상 수정할게 없으면 아래와 같은 화면이 나와요~
이 회면이 나오면 내가 만든 홈페이지가 웹 표준에 적합하다는 것을 의미하죠.
그렇게 어려운 부분이 않으니 참고하시고요.
다음 포스팅은 html 태그를 한번 정리해볼까 해요.
html은 위의 문법을 알고 태그를 알면 거의 다 한 거나 마찬가지거든요.
그렇게 어렵지 않다는 거죠~
그럼 열공 하세요^^
