출처: http://vallista.tistory.com/entry/Syntax-Highlighter-티스토리에서-코드-이쁘게-넣기 [VallistA]>

'Web'에 해당되는 글 34건

  1. 2018.09.13 Web (4) 목록을 만드는 태그
  2. 2018.09.13 Web (3) 텍스트 관련 태그들
  3. 2018.09.13 Web (2)
  4. 2018.09.11 Web (1)

Web (4) 목록을 만드는 태그

Web
posted by ddanss 2018. 9. 13. 10:40
728x90

1. 목록을 만드는 태그

(1) <ul>태그, <li>태그 : 순서 없는 목록 만들기

순서가 필요하지 않은 목록(unordered list)을 만들 때는 <ul> 태그를 사용하고 <ul> 태그 안에 <li> 태그를 사용해 각 항목을 표시한다.

 

(2) <ol>태그, <li>태그 : 순서 목록 만들기

항목을 나열하되 순서가 필요한 목록을 만들 때는 <ul>대신 <ol> 태그를 사용하고 <li> 태그를 사용해 각 항목을 표시한다.

- <ol> 태그 속성들

- type 속성 : 1:숫자(기본값), a:영문 소문자, A:영문 대문자, I:로마숫자 소문자, I:로마숫자 대문자

- start 속성 : 순서 목록이 기본적으로 1부터 시작인데 중간 번호부터 시작할 수도 있다.

- reserved 속성 : 항목을 역순으로 표시한다.

- <ol type=“a” start=“3”> : 소문자 알파벳의 3번째부터 시작하는 순서 목록

★<li>태그를 사용하는데 여러 항목이 나열될 때 </li>태그를 생략해도 <li> 태그가 다음에 오는 <li> 태그를 만나면 자동으로 그 전에 <li>태그가 있는 것처럼 인식한다.

 

(3) <dl>, <dt>, <dd> 태그 : 설명 목록 만들기

<dl> 태그는 목록을 만들고

<dt> 태그는 제목을 만들고

<dd> 태그는 설명을 표시한다.

하나의 <dt> 태그에 여러 개의 <dt> 태그와 <dd> 태그를 가질 수 있다.

 

반응형

'Web' 카테고리의 다른 글

Web (6) 이미지 관련  (0) 2018.09.15
Web (5) 표를 만드는 태그  (0) 2018.09.13
Web (3) 텍스트 관련 태그들  (0) 2018.09.13
Web (2)  (0) 2018.09.13
Web (1)  (0) 2018.09.11

Web (3) 텍스트 관련 태그들

Web
posted by ddanss 2018. 9. 13. 10:40
728x90

1. 텍스트를 덩어리로 묶어주는 태그

(1) <hn>태그 : 제목 표시하기

- 제목 테스트는 일반 텍스트보다 크고 진하게 표시된다.

- h1~ h6이 있다. h1이 가장 크게 표시되고 h6이 가장 작게 표시된다.

 

(2) <p>태그 : 단락 만들기

- 앞 뒤에 줄바꿈이 있는 텍스트 덩어리

- <p> 태그로 표시하는 텍스트 단락은 </p> 태그를 만날때까지 줄바꿈없이 텍스트를 한 줄로 표시하는데 텍스트 줄이 브라우저 창의 너비보다 길어질 경우, 줄이 자동으로 바뀐다.

 

(3) <br> 태그 : 줄 바꾸기

- 텍스트 단락에서 줄바꿈을 하더라도 웹 브라우저 창에서는 줄바꿈없이 표시된다. 줄바꿈을 하려면 <br>태그가 필요하다.

 

(4) <hr> 태그 : 수평 줄 넣기

- <hr>태그를 삽입하면 기본으로 가로선이 삽입되는데 CSS를 이용해 가로선을 없앨 수 있다.

- 닫는 태그는 없다.

 

(5) <blockquote> 태그 : 인용문 넣기

- 다른 텍스트보다 안으로 들여 써지므로 다른 텍스트와 구별된다.

- 인용할 사이트 주소가 명확할 경우, cite속성을 이용해 인용 사이트 주소를 표시할 수도 있다.

 

(6) <pre> 태그 : 입력하는 그대로 화면에 표시하기

- HTML에서는 아무리 많은 공백을 입력해도 한 개의 공백만 표시된다. 하지만 <pre> 태그를 사용할 경우 소스에 표시한 공백이 브라우저 그대로 표시된다.

 

2. 텍스트를 한 줄로 표시하는 태그

(1) <strong>태그, <b>태그 : 굵게 표시하기

<strong> 태그는 경고나 주의 사항처럼 중요한 내용이어서 강조해야 할 때 사용한다.

중요도를 더 높이고 싶다면 <strong> 태그를 여러 번 겹쳐 쓸 수 있다.

<b> 태그는 문서의 키워드처럼 단순히 굵게 표시하고 싶을 때 사용한다.

두 태그의 차이는 화면 낭독기에서의 기능 때문이다.

<strong>태그를 사용하면 그 부분이 강조되었다고 화면 낭독기가 알려준다.

 

(2) <em>태그, <i>태그 : 이탤릭체로 표시하기

<em>태그는 흐름상 특정 부분을 강조하고 싶을 때 사용.

<i>태그는 마음 속의 생각이나 꿈, 기술적인 용어, 다른 언어의 관용구 등에 사용

 

(3) <q>태그 : 인용 내용 표시하기

<blockquote> 태그와 다른 점은 <blockquote> 태그는 블록 레벨 태그이기 때문에 인용 내용이 줄이 바뀌어 나타나고 다른 내용과 구별되도록 안으로 들여 써지지만 <q> 태그는 인라인 레벨이기 때문에 줄바꿈 없이 다른 내용과 한 줄료 표시되고 인용 내용을 구별할 수 있도록 인용 내용에 따옴표를 붙여 표시한다는 점이다.

 

(4) <mark> 태그 : 형광펜 효과 내기

선택한 부분의 배경색이 노란색이 되며 형광펜으로 그어 놓은 듯한 효과를 낸다.

 

(5) <span> 태그 : 줄바꿈 없이 영역 묶기

태그 자체로는 아무 의미가 없지만 텍스트 단락안에서 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용하려고 할 때 주로 사용.

 

(6) <ruby> 태그 : 동아시아 글자 표시하기

주로 동아시아 국가들의 글자들에 주석을 함께 표기하기 위한 용도로 사용되며 주석으로 표시할 내용을 <ruby> 태그 안에 <rt> 태그로 표시한다.

 

3. 기타 텍스트 관련 테그들

(1) <abbr> 태그 : 약자 표시. title 속성을 함께 사용할 수 있음.

(2) <cite> 태그 : 웹 문서나 포스트에서 참고 내용 표시

(3) <code> 태그 : 컴퓨터 인식을 위한 소스 코드

(4) <kbd> 태그 : 키보드 입력이나 음성 명령 같은 사용자 입력 내용

(5) <small> 태그 : 부가 정보처럼 작게 표시해도 되는 텍스트

(6) <sub> 태그 : 아래 첨자

(7) <sup> 태그 : 위 첨자

(8) <s> 태그 : 취소선

(9) <u> 태그 : 밑줄

반응형

'Web' 카테고리의 다른 글

Web (6) 이미지 관련  (0) 2018.09.15
Web (5) 표를 만드는 태그  (0) 2018.09.13
Web (4) 목록을 만드는 태그  (0) 2018.09.13
Web (2)  (0) 2018.09.13
Web (1)  (0) 2018.09.11

Web (2)

Web
posted by ddanss 2018. 9. 13. 00:46
728x90

server computer : 전용선을 통해 인터넷에 직접 연결되어 있는 컴퓨터를 가리킴.
client computer : 인터넷 회선을 통해 서버 컴퓨터에 접속하는 사용자 컴퓨터

 

server hosting service || web hosting service : 개인이 웹 서버를 마련하기 어렵기때문에 서버의 일부 공간을 매달 또는 몇 년마다 일정 금액을 내고 사용하는 서비스를 이용하는 서비스

 

FTP(File Transfer Protocol) : 서버와 클라이언트간에 파일을 주고 받을 수 있게 해주는 파일 전송 프로토콜

반응형

'Web' 카테고리의 다른 글

Web (6) 이미지 관련  (0) 2018.09.15
Web (5) 표를 만드는 태그  (0) 2018.09.13
Web (4) 목록을 만드는 태그  (0) 2018.09.13
Web (3) 텍스트 관련 태그들  (0) 2018.09.13
Web (1)  (0) 2018.09.11

Web (1)

Web
posted by ddanss 2018. 9. 11. 22:43
728x90

web editor : 웹 문서를 작성하는 프로그램

web browser : 웹 문서를 보는 프로그램 – ex) 익스플로러 크롬, 파이어폭스 같은 프로그램들

 

HTML(HyperText Markup Language) : 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어

HyperText : 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능

Markup : tag를 사용해 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진이고 링크인지 표시하는 것.

 

front-end : 사용자와 직접 마주하는 부분을 가리키는 것으로 웹 브라우저 화면에 사이트 내용을 보여주는 것.

back-end : 회원제 사이트의 사용자 정보나 게시판의 게시물 내용을 저장하고 수정, 삭제하는 부분. 정보를 저장하고 관리하는 부분.

 

tag : Markup 할 때 사용하는 약속된 표기법

태그를 사용할 때 생각해야되는 것.

1. Web browser는 <와>사이에 있는 문자는 태그로 인식한다!

2. 태그는 소문자로 쓰는 것을 권장한다.

3. 여는 태그와 닫는 태그를 정확히 입력.

4. 적당히 들여쓴다. (들여쓰기할 땐 Tab키 사용)

5. 태그는 속성과 함께 사용할 수 있다.

6. 포함 관계를 명확히 한다.

 

<!doctype> : 문서 유형을 지정하는 선언문

<!doctype html> - HTML5의 버전을 사용한다! 라고 알려주는 선언문.

HTML4에서처럼 strict mode인지, transitional mode인지 구별할 필요도 없고 문서 유형을 정의하는 긴 구문을 기억하지 않아도 된다. <!doctype html> 만 기억하자!

 

<html>태그 :웹 문서 시작을 알리는 태그

문서 유형을 선언한 후 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그.

<html lang=“ko”>

-> lang이라는 속성을 사용해 사용할 언어를 지정할 수 있다. ko 는 korea

-> de : 독일어, en : 영어, fr : 프랑스어, ja : 일본어, ko : 한국어, zh : 중국어

 

<head>태그 : 브라우저에게 정보를 주는 태그

web browser화면에는 보이지 않지만 web browser가 알아야 할 정보들은 모두 <head> 부분에 입력한다. 문서에서 사용할 외부 파일들도 이곳에서 링크한다.

 

 

 

- <head>사이의 주요 태그

<title> 태그 : 문서 제목

거의 모든 web browser의 제목 표시줄에 표시됨. 이것을 보고 페이지 전체의 내용을 추측하니 신중하게 짓자.

2. <meta> 태그 : 문자 인코딩 및 문서 키워드, 요약 정보

- 웹 문서 정보를 검색 엔진에게 전달해 주는데 매우 유용하게도 사용 됨.

가장 중요한 부분은 문자 인코딩임!

HTML5에서는 한글과 영문을 비롯해 모든 언어를 표시할 수 있는 utf-8방식을 사용함.

<head> <meta charset=“utf-8”> </head>

문서에 대한 간단한 설명을 지정할 수 있다. 이렇게 지정한 짧은 설명은 검색 결과에 사이트 설명으로 표시됨.

<meta name=“description” content=“여기에 사이트에 대한 짧은 설명을 입력합니다.”>

 

이외에 스타일 시트를 사용하기 위한<style>태그와 <link>태그 등이 사용됨.

 

<body>태그 : 실제 부라우저에 표시될 내용

 

 화면 표시

특수 기호 

화면 표시 

특수 기호 

 &

 &amp;

  (공백 한칸)

 &nbsp;

 <

&lt;

 >

 &gt;

 "

 &quot;

 |

 &#124;

 (

&#40; 

 )

 &#41;

 ,

 &#44;

 -

 &#45;

 '

 &acute;

 

 

 

반응형

'Web' 카테고리의 다른 글

Web (6) 이미지 관련  (0) 2018.09.15
Web (5) 표를 만드는 태그  (0) 2018.09.13
Web (4) 목록을 만드는 태그  (0) 2018.09.13
Web (3) 텍스트 관련 태그들  (0) 2018.09.13
Web (2)  (0) 2018.09.13

티스토리툴바