경고: 로그인하지 않았습니다. 편집을 하면 IP 주소가 공개되게 됩니다. 로그인하거나 계정을 생성하면 편집자가 사용자 이름으로 기록되고, 다른 장점도 있습니다.스팸 방지 검사입니다. 이것을 입력하지 마세요!== HTML 입문 == === 요소와 태그 === 이 페이지에서는 HTML의 최종판이 된, HTML4.01에 따라서 해설해가고 싶다. HTML는 요소마다 태그를 사용해서 그 문장구조를 나타내듯이 기술한다. 요소는 기본적으로 '''시작 태그''', '''내용''', '''종료 태그'''의 세가지로 이루어져있다. 일부 요소에서는 종료 태그를 사용하지 않은 것도 있다. 시작 태그는 반드시 ''' <code><</code> '''로 시작되며, ''' <code>></code> '''로 끝난다. 또, 종료 태그는 반드시 ''' <code></</code> '''로 시작되며, ''' <code>></code> '''로 끝난다. 시작 태그와 종료 태그를 아울러서, 태그라고 부른다. 또, 태그는 대문자 수문자를 의식하지 않는다. 다만, 전각과 반각은 구별되며, 반각으로 적지 않으면 태그가 작동되지 않는다. 또, 시작 태그에서 대문자를 사용하면 종료 태그에서도 대문자를 사용하는 것이 관례이다. 아래에서는 단독인 예를 사용해서, 소개한다. 첫번째 행의 뜻은 후술하기에 지금은 “주문”이라고 생각해줬으면 좋겠다. '''예시''' <source lang="html4strict"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> 간단한 예 </title> </head> <body> <p>이 문서는 매우 간단한 예시이다! </p> </body> </html> </source> '''표시예''' <div style="border:#000 1px dashed;padding:1em"> <p>이 문서는 매우 간단한 예시이다! </p> </div> 2번째 행인 <code><html></code>는 <code><</code>로 시작되며, <code>></code>로 끝나기에 “시작 태그”이다. 마지막 행의 <code></html></code>는 <code></</code>로 시작되며, <code>></code>로 끝나기에 “종료 태그”이다. <code><html></code>라는 시작 태그와 <code></html></code>라는 종료 태그로 하나의 쌍을 이루고 있으며, 그 사이에 끼우는 것은 내용이라는 것이 된다. 이러한 이유로 아래에서는 '''HTML 요소'''로 불린다. 3번짜 행의 <code><head></code>와 5번째 행의 <code></head></code>도 같은 관계이며, 아래 head 요소라고 불린다. 다른 태그에 관해서도 같다. HTML 문장을 매우 간단하고 게다가 중요한 점을 이 예는 나타내고 있다. * html 문장은 반드시 1개의 HTML 요소만을 가진다. * html 요소에서는 반드시 head요소와 body 요소(또는 [[HTML/프레임|프레임]])을 하나씩만 가진다. * head 요소 중에서는 반드시 1개의 title 요소만이 있다. 이 예문을 웹 브라우저에서 보면 다음과 같은 것을 알수 있다. * title 요소의 내용이 타이틀바 등에 표시되어있을 것이다. * body 요소 중의 문장이 표시될 것이다. ===요소와 속성 === 예를들면, “문자를 빨갛게 하는 요소”와 “문자를 푸르게 하는 요소”에 각각 다른 요소명을 붙인다고 하면, 녹색은? 핑크는? 연한 빨강은?이라는 느낌으로 요소의 종류가 단숨에 많아져버린다. 거기서 “문자의 디자인을 빠꾼다”라는 정리되지 않을까라는 것으로, 요소의 종류가 방대해지지 않듯이, 닮은 듯한 기능에 대해서는 같은 요소명을 대응하고 있다. 그러면, “빨갛게 하다”“푸르게 하다”는 어떻게 지정하면 좋을까? 지정하기 위회서 '''속성'''을 주는 것으로 자세한 지정을 할 수 있게 되고 있다. 속성은 시작 태그의 요소명과 <code>></code>의 사이에 다음과 같은 형태로 적는다. <pre> <요소명 속성명="속성값"> </pre> 속성명은 속성의 종류를 주고, 속성값은 지정한 값을 준다. 속성값에 반각의 영어숫자 등을 제외한 값을 줄 경우에는 따옴표 기호, 또는 큰 따옴표로 감싸는 요소가 있다. 속성명은 대소문자를 묻지 않지만, 속성값은 대소문자를 구별하는 것이 있다. 2개 이상의 속성을 줄 경우에는 띄어쓰기로 사이를 비워서 이어서 적는다. (아래의 예의 크고 파랗게 되어있는 케이스를 봐라) 아래에 예를 게재한다. '''입력 예''' <syntaxhighlight lang="html"> <!DOCTYPE html> <html> <head> <title>속성의 간단한 예</title> </head> <body> <div style="color: red;">이 문장은 빨갛다.</div> <div>이 문장은 <span style="color: #ff8888;">연한 빨강</span>과 <span style="color: #ff8888;">연한 녹색</span></div> <div style="color: blue;font-size: larger;">이 문장은 크고 파랗다.</div> </body> </html> </syntaxhighlight> '''표시 예''' <div style="border: black 1px dashed; padding: 1em;"> <div style="color: red;">이 문장은 빨갛다.</div> <div>이 문장은 <span style="color: #ff8888;">연한 빨강</span>과 <span style="color: #ff8888;">연한 녹색</span></div> <div style="color: blue;font-size: larger;">이 문장은 크고 파랗다.</div> </div> [[Category:HTML]] [[Category:마크업 언어]] 요약: 이음위키에서의 모든 기여는 크리에이티브 커먼즈 저작자표시-동일조건변경허락 4.0 라이선스로 배포된다는 점을 유의해 주세요(자세한 내용에 대해서는 이음위키:저작권 문서를 읽어주세요). 만약 여기에 동의하지 않는다면 문서를 저장하지 말아 주세요. 또한, 직접 작성했거나 퍼블릭 도메인과 같은 자유 문서에서 가져왔다는 것을 보증해야 합니다. 저작권이 있는 내용을 허가 없이 저장하지 마세요! 취소 편집 도움말 (새 창에서 열림)