5.2 code 요소(Element)
code 요소는 파일이름, 프로그램 소스, XML 요소이름 같은 컴퓨터에서 인식할 수 있는 코드를 웹페이지를 나타내고자 할 때 사용하는 요소로 한 줄
이상으로 처리가 안될 경우 pre 요소, 즉 사전에 정의된
텍스트를 나타낼 때 사용하는 <pre> 태그를 사용하여 나타낼 수 있으며 다음과 같은 형식으로 code 요소를 사용합니다.
<code>프로그램 코드</code>
메모장을 열어서 HTML5이 기본적인 코드들을 작성하고 <body> …</body> 블록을 다음과 같이 작성합니다.
<body>
C#에서 클래스를 정의하는 방법은 다음과 같습니다.</br><code>class yourTest { string name; string Tel; } </code>
</body>
“codEx.html”로 저장하고 IE9로 열어보면 다음과 같이 해당 코드들이 정상적으로 나타납니다.
이제 한 줄로 된 yourTest 클래스 코드를 실제 브라우저에 여러 줄 형태로 나타내기 위해 <code> 태그를 이용하여 변경, 저장합니다.
<code>class
yourTest {
string name;
string Tel;
} </code>
브라우저를 통해
보면 방금 전 한 줄 형태로 나타냈을 때와 동일한 결과를 나타내게 됩니다.
이럴 경우 위와 같이 여러 줄 형태로 나타내기 위해서 <pre> 태그를 이용하여
다음과 같이 작성해줍니다.
<body>
C#에서 클래스를
정의하는 방법은 다음과 같습니다.</br>
<pre>
<code>class yourTest {
string name;
string Tel;
} </code>
</pre>
</body>
그러면 다음과 같이 나타납니다.
위의 결과에서 보는 것처럼 여러 줄 형태로 코드가 브라우저에 나타났지만 원하던 형태의 결과는 아닌 것 같습니다. 위 코드에서 code 시작태그, 마침태그를 제거해준 후 저장하여 보면 다음과 같이 보기 좋게 나타나게 됩니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 5.4 kdb, dfn 요소(Element) (2) | 2013.07.31 |
|---|---|
| 5.3 samp 요소(Element) (0) | 2013.07.31 |
| 5. Text-level Elements (0) | 2013.07.31 |
| 4.6 div요소(Element) (0) | 2013.07.31 |
| 4.5 figure, figcaption요소(Element) (0) | 2013.07.31 |