민둥 개발자의 계발 블로그

HTML 태그#3 목록 태그 및 특수문자 출력! 본문

Study/HTML

HTML 태그#3 목록 태그 및 특수문자 출력!

민둥산의 민둥이 2022. 4. 11. 21:11

안녕하세요, 이번에는 목록을 만드는 태그에  관해 알아볼 텐데요, 우선 저번 HTML 정답부터 공개하겠습니다.

 

HTML#2 글꼴을 바꾸는 태그 정답!

<html>
 <head>
  <title>html tag</title>
 </head>
 <body>
 <hr>
 <h1>글자를 변경하는 tag들 -<small> <i> (inline tag) </i> </small></h1>
 
 <p>
   b - <b>bold</b> bold <b>볼드</b>체 <br>
   strong - <strong>strong</strong> strong 
	(중요하다는 의미에서) 볼드체 <br>
   i - <i>italic</i> italic <i>이텔릭</i>체<br>
   em - <em>em</em> em <em>
	(강조한다는 의미에서)이텔릭</em>체 <br>
   small - <small>small</small> small 글자 
	<small>크기를 작게</small><br>
   sup - <sup>sup</sup> sup <sup>윗</sup>첨자
	(ex)10cm<sup>2</sup><br>
   sub - <sub>sub</sub> sub <sub>아랫</sub>첨자
	(ex)H<sub>2</sub>O<br>
   mark - <mark>mark</mark> mark <mark>마크펜효과</mark><br>
 </p>
 <h4>주석 태그</h4>
  <!-- 주석 태그 임다 -->
  <!-- 소스상에만 보이는 설명 등을 나타내거나 -->
  <!-- 명령을 일시적으로 적용하지 않을 때 등 사용 -->

  <h3> 중복적용시 주의</h3>
<p>
  1. <i><b> bold + i </b></i> O<br>
  2. <b><i> bold + i </i> </b> X<br>
  3. <b><i> bold + i </b></i> O<br>
  4. <i><b> bold + i </i> </b> X<br>
 시작과 종료태그가 서로 감싸게해야함!

</p>
 </body>
</html>

소스 보지 않고도 저와 비슷한 화면을 만드셨나요? 저번에 주석 태그를 알려드리는 것 깜빡했네요. 간단하게 설명해 드리겠습니다.

<!-- --> 주석 태그

  • 코드 내에서 특정 부분을 작동하지 않거나 코드를 설명할 때 사용하는 태그입니다. 
  • 주석 태그 안에 있는 글들은 전부 컴파일되지 않기에 화면에 보이지 않습니다.

 

그럼 이제 본론으로 넘어와서..

HTML 목록 관련 태그 및 특수문자 출력

<ul></ul>

  • Unordered List의 약자로, 순서 없이 동그라미가 붙는 목록을 생성하는 태그입니다.
  • 안에 각 항목을 추가할 때마다 <li></li> 태그를 사용합니다.

<ol></ol>

  • Ordered List의 약자로, 목록 앞에 순서를 알려주는 번호가 붙는 태그입니다. 
  • <ul></ul> 태그와 같이 태그 내부에 리스트를 추가할 때마다 <li></li> 태그를 사용합니다.
  • Type 속성과 Start 속성을 적용시킬 수 있습니다.
    • Type="1" → 기본값
    • Type="a" → 알파벳 목록 
    • Type = "A" → 대문자 알파벳 목록
    • Type = "i" → 로마 숫자 목록
    • Type = "I" → 대문자 로마 숫자 목록
    • Start = "n"   (n의 자릿수부터 목록 시작)

<li></li>

  • List의 약자로, 목록의 한 줄 한 줄에 사용되는 리스트를 만드는 태그입니다.
  • 리스트 생성 시 따로 줄 바꿈이 필요하지 않습니다.

<dl></dl>

  • Definition List의 약자로, 사전처럼 정의하는 목록을 만들 때 사용하는 태그입니다.
  • 내부에는 <dt></dt> 태그와 <dd></dd> 태그를 사용합니다.

<dt></dt>

  • Definition Term의 약자로, 정의하는 단어를 쓰는 공간을 생성하는 태그입니다.

<dd></dd>

  • Definition Description의 약자로, 정의하는 단어의 구체적인 뜻을 설명하는 공간을 생성하는 태그입니다.

 

특수문자

  • HTML 내부에서 예약어로 사용되는 문자들은 그냥 사용한다면 출력이 되지 않기에 특별한 방식을 사용합니다.
  • ex) <,>, &, (공백) 등의 문자들
  • 특수문자의 앞에 & 뒤에는 ; 을 붙여 사용합니다.
    • &lt; == 왼쪽 각괄호(Less than)
    • &gt; ==오른쪽 각괄호(Greater than)
    • &amp; == 엠퍼스 앤드 (Ampsersand)
    • &nbsp; == 공백 (non-breaking space )
    • &copyright == 저작권 기호 (copyright)
  • 이밖에도 다양한 특수문자 출력 방법이 있지만 외울 필요는 없습니다(위의 것 외에는 자주 사용하지 않음).

 

 

============================================================================

오늘의 문제

목록 만들기

목록 만들기

목록 목록 목록

목록의 종류

  • 순서 없는 목록 - <ul>
  • 순서 있는 목록 - <ol>
  • 정의 목록 - <dl>

★☆특수 문자 태그들☆★ - &로 시작하고 ;로 끝남

  • 결과 = 태그(명령)
  • < = &lt;
  • > = &gt;
  •   = &nbsp;
  • & = &amp;

(ex) <b>
<!-- 주석태그닷 -->

  • © = &copy;
  • ™ = &trade;
  • ® = &reg;

1. ul - Unordered List(순서 없는 목록)

  • coffee
  • tea
  • milk
  • water

2. ol- Ordered List (순서 있는 목록)

  1. html
  2. css
  3. javascript
  1. red(0~255)
  2. green(0~255)
  3. blue(0~255)
  1. web
  2. java
  3. jsp
  4. netw
  5. db
  6. job
ol의 기본 모양 바꾸기 - type속성
(1) type="1"
  1. web
  2. java
  3. jsp
  4. netw
  5. db
  6. job
(2) type="a"
  1. web
  2. java
  3. jsp
  4. netw
  5. db
  6. job
(3) type="A"
  1. web
  2. java
  3. jsp
  4. netw
  5. db
  6. job
(4) type="i"
  1. web
  2. java
  3. jsp
  4. netw
  5. db
  6. job
(5) type="I"
  1. web
  2. java
  3. jsp
  4. netw
  5. db
  6. job
ol의 시작 바꾸기 - start속성 (값은 숫자만 가능)
  1. web
  2. java
  3. jsp
  4. netw
  5. db
  6. job
  1. web
  2. java
  3. jsp
  4. netw
  5. db
  6. job

하위목록 만들기

  • web
    1. html
    2. css
    3. javascript
  • db
  • java
  • coffee
    • cafe mocha
    • capuccino
    • caramel macchiato
  • tea
    • hot
      1. BK tea
      2. MS tea
    • cold
  • milk
  • water

3. dl - Description List(정의목록)

<dt>
정의 내릴 대상
<dd>
정의 내용
html
Hyper Text Markup Language.
<dl>
Description List
html
Hyper Text Markup Language.
웹페이지를 만드는 언어
css
웹페이지의 디자인을 담당
javascript
웹페이지의 동적인 기능을 담당

나를 정의하는 목록

<천재>
머리가 미친듯이 좋음
<유머러스함>
굉장히 높은 드립력
<노력파>
열심히함 ㅋㅋ
반응형
저작자표시 (새창열림)

'Study > HTML' 카테고리의 다른 글

HTML#4 정답 공개 및 추가 문제!  (0) 2022.04.18
HTML#4 테이블 만들기!  (4) 2022.04.12
HTML 연습! 심심해서 직접 해보았습니다!  (2) 2022.04.11
HTML 태그(TAG)#2 글꼴을 바꾸는 태그  (2) 2022.04.10
HTML 사용하기! HTML 태그(Tag) 종류#1  (0) 2022.04.05
'Study/HTML' Related Articles more
Comments