01 <ul> <ul>~</ul> · unordered list의 약자
· 순서가 필요하지 않은 목록을 만들 때 사용
02 <ol> <ol>~</ol> · ordered list의 약자
· 순서가 필요한 목록을 만들 때 사용
03 <li> <li>~</li> · 각 항목을 불릿(bullet)을 이용해 표시함

▶01. <ul>

· 순서가 필요하지 않은 목록을 만들 때 사용

· 단독으로는 효용성 없음

 

▶02. <ol> 

· 순서가 필요한 목록을 만들 때 사용

· 단독으로는 효용성 없음

 

▶03. <li>

· 각 항목을 불릿(bullet)을 이용해 표시함

· 불릿(bullet)

- 각 항목 앖에 붙는 원이나 사각형 등을 지칭함

- 불릿은 css를 통해 수정 가능함

 

▶예시_잘못된 예시1(<ul>단독사용)

<ul>
    1일차
    2일차
    3일차
    4일차
    5일차
</ul>

 

▶예시_잘못된 예시2(<ol>단독사용)

<ol>
    1일차
    2일차
    3일차
    4일차
    5일차
</ol>

 

▶예시_기본구성1(<ul>+<li>조합 → 도형)

<ul>
    <li>1일차</li>
    <li>2일차</li>
    <li>3일차</li>
    <li>4일차</li>
    <li>5일차</li>
</ul>

 

▶예시_기본구성2(<ol>+<li>조합 → 숫자)

<ol>
    <li>1일차</li>
    <li>2일차</li>
    <li>3일차</li>
    <li>4일차</li>
    <li>5일차</li>
</ol>

 

<ol type="a">

 

속성값 속성값에 따라 나타나는 표시
1 아라비안 숫자(기본값)
a 영문 소문자
A 영문 대문자
i 로마숫자 소문자
I 로마숫자 대문자

▶속성값(type="")이 없는 경우

· <ol>만 있고 뒤에 덧붙은 게 아무 것도 없는 상태라면, 기본값(아라비안 숫자)이 적용된다.

· type속성 대신 css를 이용해 변환시킬 수도 있음 

 

▶예시

 

<ol type="a" start="3">

 

▶목록의 시작 지점 설정

▶만약 3을 적을 경우, 시작 지점은 3번째가 됨(3번째부터 시작한다는 의미)

▶예시


 

기본 태그

 

01 <h1>~<h6> <h1>~</h1>, ...
<h6>~</h6>
· heading의 약자
· 제목 나타내기
02 <p> <p>~</p> · paragraph의 약자
· 단락 만들기
03 <br> <br> · break의 약자
· 줄 바꿈 - 여러 번 중첩해서 적용 가능
04 <hr> <hr> · horizontal의 약자
· 수평 줄 삽입
05 <blockquote> <blockquote>
~</blockquote>
· 인용하기 - 주변 내용들과 인용 내용이 분리됨 
06 <q> <q>~</q> · quote의 약자
· 인용하기 - 주변 내용들과 분리 되지 않고, 인용 내용에 큰따옴표가 붙음
07 <strong> <strong>
~</strong>
· 볼드체로 표시하기
08 <b> <b>~</b> · 볼드체로 표시하기
09 <em> <em>~</em> · emphasis의 약자
· 이탤릭체로 표시하기
10 <i> <i>~</i> · italic의 약자
· 이탤릭체로 표시하기
11 <mark> <mark>
~</mark>
· 형광펜 효과 내기
12 <span> <span>
~</span>
· 줄 바꿈 없이 태그 내에 서술된 내용 묶기

▶01. <h1>~<h6> - 제목 나타내기

· 일반 텍스트보다 굵고 크게 표시됨

· <h1>이 가장 크고, <h6>으로 갈수록 작아짐

 

▶02. <p> - 단락 만들기

· <br>태그로는 단락을 만들 수 없음

· <p>태그 사용시, 별도로 <br>태그를 사용하지 않더라도 줄이 바꿔진 상태로 적용됨

 

▶05, 06. <blockquote>, <q> - 인용하기

· <blockquote>

- '블록 태그'에 해당됨

- 주변 내용들과 인용 내용이 분리됨

- 인용 내용은 줄이 바뀌고, 안으로 들여쓰기가 적용됨

· <q>

- 줄 바뀜 없이 주변 내용들과 함께 같은 한 줄에 표시됨 

- 인용 내용에 큰따옴표가 붙음

 

▶07, 08. <strong>, <b> - 볼드체로 표시하기

· <strong>

- 화면 낭독기가 인식함

- 중요한 내용에는 해당 태그를 사용할 것

· <b>

- 화면 낭독기가 인식하지 못함

 

▶10. <em>, <i> - 이탤릭체로 표시하기

· <em>

- 중요한 내용에는 해당 태그를 사용할 것

· <i>

 

▶11. <mark> - 형광펜 효과 내기

· 기본색은 노란색

· css의 background-color속성을 이용해 색변환 가능

 

html의 요소(Element)

 

<p>는 → 시작태그를,

</p>는 → 종료태그를,

Hello World는 → 콘텐츠(Contents)를 나타낸다.

위 세 개를 전부 합쳐 요소(Element)라고 한다.

 

html의 속성(Attribute)

 

src → 속성명(Attribute Name)을,

cat.png→ 속성값(Attribute Value)을 나타낸다.

속성(Attribute)는 속성명과 속성값으로 구성된다.

'1-1 html' 카테고리의 다른 글

[html] <img>태그  (0) 2021.05.02
[html] <table>, <tr>, <td>, <th>태그_기본적인 표 만들기  (0) 2021.04.24
[html] <ul>, <ol>, <li>태그_순서 목록 만들기  (0) 2021.04.14
[html] <title>태그  (0) 2021.04.12
[html] html 시작하기  (0) 2021.04.11


 

<title>

 

▶웹페이지 상단 제목표시줄 이름 설정

▶<head>태그 내에서 쓰임

▶예시

<title>안녕하세요</title>

 


 

HTML(HyperText Markup Language)

 

하이퍼텍스트(Hypertext)

· 연결해주는(링크) 기능

 

마크업(Markup)

· 태그(tag)를 사용해 문서를 구분지어 표시하는 것

 

html문서 기본 구조

 

①<!doctype>

· '문서 유형(document type)'을 알리는 선언

· 이 때 문서 유형은 웹 브라우저에게 '당신이 여는 이 문서는 HTML이고,

이러이러한 유형으로 만들어졌으니 해당 버전에 맞는 방법으로 해석하시오'라는 내용을 담고 있음

· <!doctype>은 태그에 속하지는 않으나, 웹문서 제작시 사용되는 요소

 

②<html>~</html>

· 웹 문서의 시작과 끝을 알리는 태그

· <head>태그와 <body>태그가 여기 내에서 작성됨

 

③<head>~</head>

· 문서 정보를 알려주는 태그

· 웹 브라우저 화면에는 보이지 않으나, 웹 브라우저가 알아야 하는 정보들을 담고 있음 

 

④<body>~</body>

· 문서 내용을 알려주는 태그

· 웹 브라우저 화면에 보이게 되는, 실제 화면에 표시되는 내용들을 담고 있음

· 대부분의 태그들이 여기 내에서 작성됨

+ Recent posts