HTML에는 사용자 입력 및 컴퓨터 코드를 정의하기 위한 몇 가지 요소가 포함되어 있다.
| <code> a=1; b=3; c=a+b; </code> |
| <!DOCTYPE html> <html> <body> <h2>컴퓨터 코드</h2> <p>프로그래밍 코드:</p> <code> a = 5; b = 6; c = a + b; </code> </body> </html> |
HTML <kbd> 요소(키보드 입력)
HTML <kbd> 요소는 키보드 입력을 정의하는 데 사용된다.
내부 내용은 브라우저의 기본 단일 공간 글꼴로 표시된다.
| <!DOCTYPE html> <html> <body> <h2>kdb 요소</h2> <p>kbd 요소는 키보드 입력을 정의하는 데 사용됩니다:</p> <p><kbd>Ctrl + S를 눌러 문서를 저장합니다</kbd></p> </body> </html> |
HTML <samp> 요소(프로그램 출력)
HTML <samp> 요소는 컴퓨터 프로그램의 샘플 출력을 정의하는 데 사용됩니다. 내부 내용은 브라우저의 기본 단일 공간 글꼴로 표시됩니다.
예로 일부 텍스트를 문서의 컴퓨터 프로그램에서 출력되는 샘플로 정의한다:
| <!DOCTYPE html> <html> <body> <h2>samp 요소</h2> <p>samp 요소는 컴퓨터 프로그램의 샘플 출력을 정의하는 데 사용됩니다.</p> <p>내 컴퓨터의 메시지:</p> <p><samp>파일을 찾을 수 없습니다..<br>계속하려면 F1키를 누르세요</samp></p> </body> </html> |
HTML <code> 요소
HTML <code> 요소는 컴퓨터 코드를 정의하는 데 사용된다.
내부 내용은 브라우저의 기본 단일 공간 글꼴로 표시된다.
| <!DOCTYPE html> <html> <body> <h2>code 요소</h2> <p>프로그래밍 코드 예제:</p> <code> x = 5; y = 6; z = x + y; </code> </body> </html> |
<code> 요소는 추가 공백 및 줄 바꿈을 유지하지 않다.
이 문제를 해결하기 위해 <code> 요소를 <pre> 요소 안에 넣을 수 있다:
| <!DOCTYPE html> <html> <body> <h2>code 요소</h2> <p>프로그래밍 코드 예제:</p> <pre> <code> x = 5; y = 6; z = x + y; </code> </pre> </body> </html> |
HTML <var> 요소(변수)
HTML <var> 요소는 프로그래밍 또는 수학식에서 변수를 정의하는 데 사용된다.
내부의 내용은 일반적으로 기울임꼴로 표시된다.
| <!DOCTYPE html> <html> <body> <h2>var 요소</h2> <p>프로그래밍 코드 예제:</p> <p>삼각형 면적 : 1/2 x <var>b</var> x <var>h</var>, <var>b</var> 는 변의길이, 그리고 <var>h</var> 높이이다.</p> </body> </html> |
마무리
프로그래밍 관련 코드를 아래와 같이 학습하였다.
<kbd> 요소는 키보드 입력을 정의한다.
<samp> 요소는 컴퓨터 프로그램의 샘플 출력을 정의한다.
<code> 요소는 컴퓨터 코드를 정의한다.
<var> 요소는 수학식 혹은 프로그램 변수를 정의한다.
<pre> 요소는 사전정의된 텍스트를 정의한다.
꼭 실습하고 응용하여 확장 실습하기 바랍니다.
모두 화이팅입니다!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 스타일 안내 (0) | 2023.05.29 |
|---|---|
| HTML 시멘틱 요소(Semantic elements) (0) | 2023.05.28 |
| HTML 반응형 웹 디자인 (0) | 2023.05.26 |
| HTML 레이아웃 코딩 예제 (0) | 2023.05.25 |
| HTML 레이아웃(HTML Layout) (0) | 2023.05.24 |
댓글