|
|
|
고정 폭 글꼴로 작성된 비문은 및 태그를 사용하여 생성됩니다. 이러한 태그를 사용한 결과는 일반적으로 동일합니다. 문자 크기와 간격이 고정된 고정 폭 글꼴입니다.
꼬리표 태그는 예를 들어 프로그래밍 튜토리얼을 나타내는 웹 문서에 프로그램 코드의 작은 조각을 삽입하는 데 사용되는 인라인 컨테이너 요소입니다. 브라우저는 이러한 코드를 고정 폭 글꼴(예: Courier New)로 표시합니다. ero를 요소와 함께 사용하는 경우
태그는 서식 없이 텍스트를 입력하는 데 사용됩니다. 즉, 모든 공백, 탭 및 줄 바꿈을 유지합니다. 이 요소 내에서 대부분의 텍스트 서식 지정 요소를 적용할 수 있습니다.
주의: HTML에서는 줄 바꿈, 연속 공백 및 탭이 무시됩니다. 연속된 여러 공백은 하나의 공백으로 처리됩니다.
예: 요소 사용 및 요소 내에서 브라우저는 만나는 모든 공백이나 줄 바꿈을 복제하여 원래 형식을 유지합니다.
If (document.getElementsByClassName) ( x = document.getElementsByClassName("pagination") if (x.length>y) ( x.style.visibility = "hidden"; )
"pre" 요소 내에서 브라우저는 원래 형식을 유지하면서 만나는 모든 공백이나 줄 바꿈을 복제합니다.
if (document.getElementsByClassName) ( x = document.getElementsByClassName("pagination") if (x.length>y) ( x.style.visibility = "hidden"; )
태그 및 태그는 사용자가 키보드를 사용하여 입력한 코드를 표시합니다. 일부 브라우저는 이러한 텍스트를 추가 배경으로 표시합니다.
태그는 제어 스크립트를 입력한 후 콘솔 창에 표시되는 텍스트와 같은 컴퓨터 출력을 생성하는 데 사용됩니다. 거의 사용되지 않는 이 요소는 내용을 , , 와 같은 고정폭 글꼴로 표시합니다.
예: 요소 및
사용자가 키보드로 입력해야 하는 텍스트를
컨테이너 요소 "kbd".
텍스트 입력: 키보드에서 입력한 텍스트입니다.
이것은 "samp" 컨테이너에 배치되는 텍스트입니다.
꼬리표 태그는 프로그램 코드에서 변수를 더욱 강조하는 데 사용됩니다. 이는 수학적 표현이나 프로그램 매개변수의 변수를 식별하며 일반적으로 이탤릭체로 표시됩니다.
예: 요소 신체 운동 에너지:
신체 운동 에너지:
Wк = mv2/2
과제 최종과제 이번 단원에서는 콘텐츠를 고정 폭 글꼴로 표시하고, 코드에서 변수를 강조 표시하고, 태그를 미리 형식화하는 태그에 대해 배웠습니다. 이들 모두는 수학적 표현과 프로그램 코드로 작업할 때 중요합니다.
이제 배운 내용을 복습하고 세 가지 간단한 작업을 완료할 시간입니다.
변하기 쉬운 HTML 요소를 사용하여 위 방정식에서 문자 y를 변수로 지정합니다.
변하기 쉬운
포물선 방정식 y = Nx2
변하기 쉬운
포물선 방정식 y = Nx2
미리 서식이 지정된 텍스트 HTML 요소를 사용하여 코드 요소에 배치된 텍스트가 모든 공백과 줄바꿈이 그대로 유지된 상태로 브라우저에 나타나도록 만듭니다.
소개
bbCode - 많은 게시판 시스템(BBS) 및 포럼에서 메시지 형식을 지정하는 데 사용되는 게시판 코드 또는 마크업 언어입니다. HTML 태그와 유사한 태그는 텍스트 형식을 지정하는 데 사용됩니다. HTML 태그와 달리 bbCode 태그는 대괄호로 묶여 있습니다. 페이지를 표시하기 전에 포럼 엔진은 텍스트를 구문 분석하고 bbCode를 HTML 코드로 변환합니다.
많은 포럼에서 BB 코드 사용 기능은 관리자가 각 포럼 섹션에 대해 개별적으로 구성합니다. 따라서 메시지에 BB 코드를 사용하기 전에 해당 코드가 허용되는지 확인해야 합니다.
글꼴 서식
텍스트 작업을 위한 기본 태그:
[p] 들여쓰기가 있는 일반 단락입니다.
스타일을 지정할 수 있는 단락입니다.
* 이하 '스타일'은 HTML의 스타일과 유사합니다.
텍스트는 HTML과 유사합니다.
텍스트
** [p] 태그와 함께 [b], [i], [s] 등 다른 태그를 사용할 수 있습니다.
스타일을 사용하여 속성을 변경할 수 있는 텍스트입니다.
속성(위치, 테두리, 패딩, 콘텐츠 속성 등)을 변경하기 위해 스타일을 지정할 수 있는 제한된 영역입니다.
* 기본적으로 영역 경계는 표시되지 않습니다. 한 페이지에 동시에 여러 영역이 있을 수 있습니다.
텍스트 형식:
[b] 중요한 텍스트, 굵은 글씨
[나] 중요한 텍스트, 이탤릭체
그냥 대담하다
그냥 이탤릭체
[유] 밑줄 친 텍스트
[s] 취소선 텍스트 - 옵션과 동일
더 작은 글꼴
텍스트 위의 각주 표시 또는 텍스트 아래의 색인
삭제된 텍스트
글꼴 크기:
13포인트 글꼴
15포인트 글꼴
글꼴 크기 9픽셀
글꼴 크기 12픽셀
글꼴 크기 15픽셀
사이즈 0
사이즈 +1
사이즈 +2
가능한 글꼴 크기 옵션(시각적 평가)을 사용할 수 있습니다.
제목:
레벨 1 헤더
레벨 2 헤더
레벨 3 헤더
레벨 4 헤더
레벨 5 헤더
레벨 6 헤더
글꼴을 사용하여 텍스트 서식 지정:
Comic Sans Ms 글꼴
글꼴 모노타입 코르시바
타호마 글꼴
글꼴 유형(이름 및 시각적 등급)에 대한 가능한 옵션을 사용할 수 있습니다.
색상을 사용하여 텍스트 장식:
빨간색 텍스트
* 색상에는 빨간색, 녹색, 파란색 등 표준 언어 지정을 사용할 수 있습니다.
파란색 텍스트
* 숫자 #0000ff는 RGB 팔레트에서 파란색을 의미합니다.
파란색 배경
* 배경색도 변경 가능합니다.
파란색 텍스트, 회색 배경
미리 정의된 일부 색상:
검정색 흰색 빨간색 녹색 파란색 보라색 내화벽돌 적갈색 주황색빨간 미드나잇블루 수레국화블루
청록색 노란색 마젠타색 어두운녹색 어두운Goldenrod 골드 오키드 블루바이올렛 벌리우드 복숭아퍼프
16진수 코드의 일부 색상은 빨간색, 녹색, 파란색의 강도입니다(RR GG BB).
#000000 #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #FF4444 #FF9999 #FFCCCC #9999FF #FF99FF #DDDDDD #FFE4C4 #CCCC99 #FF8DC #FA8072 #990000 #FF3030 #000080 #000066 #0000CD #AFEEEE # 006400 #66FF00 #00B800 #DAA520 #FFCC33 #FFA500 #C71585 #8B008B #CC33FF
색상 팔레트 및 해당 코드/이름에 대한 가능한 옵션을 사용할 수 있습니다.
텍스트 정렬 및 단락 서식 지정
텍스트 정렬:
텍스트를 왼쪽으로 정렬
스타일에 따른 왼쪽 정렬
단락의 왼쪽 정렬
가운데 텍스트 정렬
스타일에 따른 중앙 정렬
단락의 가운데 정렬
텍스트를 오른쪽으로 정렬
스타일에 따른 올바른 정렬
단락 오른쪽 정렬
양쪽에 텍스트 정렬
스타일에 맞게 양쪽을 정렬하세요.
단락 양쪽 정렬
* 한 줄 이상의 텍스트에 대해서는 양쪽 텍스트 정렬이 표시됩니다.
단락 들여쓰기를 사용하여 각주(주석) 서식 지정:
[q] 인라인 견적
속성에 맞춰 견적
별도의 블록에 인용된 텍스트는 다음과 같습니다.
왼쪽에 작은 들여쓰기와 특별한 디자인(포럼 스타일)이 있습니다.
예:
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
단락 및 영역 서식 지정:
안녕하세요! 이 단락에서 첫 번째 문장은 "빨간색" 줄에서 나옵니다. 들여쓰기. 책 인쇄와 같습니다. 사실, 이것은 인터넷에서 드문 관행입니다. 단락은 공백으로 구분해야 합니다.
미리 서식이 지정된 텍스트는 왼쪽과 단어 사이의 들여쓰기를 유지하고 공백으로 지정한 들여쓰기를 설정합니다. 경고! 태그는 자동으로 줄을 끊지 않습니다! 목록 서식 지정
글머리 기호 목록에는 또는 태그를 사용합니다.
- 목록 항목 중 하나
- 또 다른 그런 품목
- 한 가지 더.
[*] 또 다른 항목
[*] 한 가지 더 말씀드리겠습니다.
번호가 매겨진 목록의 경우 다음 태그를 사용합니다.
목록 항목 중 하나
또 다른 그런 품목
한 가지 더.
[*] 목록 항목 중 하나
[*] 또 다른 항목
[*] 한 가지 더 말씀드리겠습니다.
닫는 태그를 반드시 사용할 필요는 없습니다.
- 목록 항목 중 하나
- 또 다른 그런 품목
- 한 가지 더.
[*] 목록 항목 중 하나
[*] 또 다른 항목
[*] 한 가지 더 말씀드리겠습니다.
목록 유형을 직접 지정할 수도 있습니다.
- 번호가 매겨진 목록
- 알파벳순 목록
- 로마 숫자로 번호가 매겨진 목록
이미지
Http://img.cx/img/primer.jpg - 그림 삽입 예.
Http://img.cx/img/primer.jpg - 왼쪽 그림.
Http://img.cx/img/primer.jpg - 오른쪽 그림.
* 이 코드는 HTML의 코드와 유사합니다.
Http://img.cx/img/primer.jpg - 중앙의 그림.
* 이 코드는 HTML의 코드와 유사합니다.
이름과 도구 설명이 포함된 유사한 태그:
중요한! 사진 제목에 따옴표를 사용할 수 없습니다!
Http://img.cx/img/primer.jpg - 그림 삽입 예.
Http://img.cx/img/primer.jpg - 왼쪽 그림.
Http://img.cx/img/primer.jpg - 오른쪽 그림.
Http://img.cx/img/primer.jpg - 중앙의 그림.
표시된 크기의 사진:
Http://img.cx/img/primer.jpg - 크기가 있는 그림의 예입니다.
* 이 코드는 HTML의 코드와 유사합니다.
Http://img.cx/img/primer.jpg - 왼쪽 그림, 크기.
Http://img.cx/img/primer.jpg - 오른쪽 그림, 크기.
스크롤 막대를 사용하여 큰 이미지 삽입:
Http://www..jpg - 포럼에서 사용 가능한 표시 크기보다 큰 경우 선택한 영역의 이미지입니다.
주소 - 새 창에서 이미지를 엽니다.
* 이 코드는 HTML의 코드와 유사합니다.
주소 - 같은 창에서 이미지를 엽니다.
* 이 코드는 HTML의 코드와 유사합니다.
HTML 특수 문자는 문자 엔터티라고 불리는 짧은 코드 조각입니다. 이는 HTML에서 특별한 의미를 갖는 문자뿐만 아니라 키보드에서 사용할 수 없는 문자를 표시하는 데 사용됩니다.
HTML의 특수 문자를 예약 문자라고 합니다. 예를 들어 왼쪽() 꺾쇠 괄호는 HTML에서 여는 태그와 닫는 태그를 정의하기 위해 예약되어 있습니다.
키보드에서 사용할 수 없는 기호에는 저작권 기호(©) 및 수학 값 pi와 같은 문자가 포함됩니다.
문서에서 이를 사용하고 브라우저에 표시하려면 HTML 문자 참조를 사용해야 합니다.
사례 연구 웹 페이지에 HTML 코드 블록을 표시하고 요소 태그를 표시한다고 가정해 보겠습니다. 에 HTML 블록을 배치하기만 하면 됩니다. 그러나 에서도 블록은 여전히 HTML 코드로 처리되고 이에 따라 브라우저에서 렌더링된다는 것을 알 수 있습니다. 이 경우 브라우저가 코드를 구문 분석하지 못하도록 모든 HTML 특수 문자를 해당 기호 링크로 바꿀 수 있습니다.
품목 목록입니다.
