공부좀;;

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

HTML_이미지 (0)	2019.02.04
HTML_링크 (0)	2019.02.01
HTML_주석 (0)	2019.02.01
HTML_인용구 (0)	2019.01.31
HTML_서식 (0)	2019.01.31

HTML 스타일<CSS>

-style Attribute를 사용하여 서식을 나타낼 수 있다.

1
<tagname style="property:value;">
cs

property와 value값에 대해선 CSS에서 자세히 다룬다.

HTML 배경색

-background-color 속성은 HTML요소들의 배경색을 지정한다.

e.g.

1
2
3
4
5
6
<body style="background-color:purple;">
 
<h1>제목_배경색</h1>
<p>단락_보라색</p>

</body>
cs

HTML 폰트,크기,정렬

-font-family 속성을 사용하여 글꼴을 설정할 수 있다.

-font-size 속성을 사용하여 크기를 설정할 수 있다.

-text-align 속성을 사용하여 텍스트를 정렬할 수 있다.

e.g.

1
2
3
4
5
6
7
8
<h1 style="font-family:Monospace;">Monospace Heading</h1>
<p style="font-family:Georgia;">Georgia paragraph</p>
 
<h1 style="font-size:250%;">250% Heading</h1>
<p style="font-size:200%;">200% paragraph.</p>
 
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:right;">right_aligned paragraph.</p>
cs

HTML style 중첩

-인용구 안에 style Attribute를 중첩으로 쓰면 적용된다.

e.g.

1
2
3
4
5
<p style="font-size:160%; font-family:georgia; text-align:center;">160%
<br>
georgia
<br>
centered</p>
cs
;으로 속성의 마지막을 끝낸다.

참고

140 standard color names

140 colors sorted by HEX Value

More Styles _ CSS

참고사이트

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

HTML_인용구 (0)	2019.01.31
HTML_서식 (0)	2019.01.31
HTML_단락 (0)	2019.01.29
HTML_제목 (0)	2019.01.29
HTML_속성 (0)	2019.01.28

HTML 단락(Paragraph)

-<p> 태그로 정의된다.

-HTML 코드에 직접 공백이나 추가 줄을 추가하여 출력결과를 바꿀 수 없다.

-많은 양의 띄어쓰기도 하나의 띄어쓰기로 인식한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<p>단락1</p>
<p>단락2</p>
 
<p>
이 단락은
많은 띄어쓰기를
포함하지
않는다.
</p>
 
<p>
이        단락은
많은     띄어쓰기를
포함    하고    있지만
페이지에    표시    되지 않는다.
</p>
 
<p>
문단의 줄 수는 브라우저 창의 크기에 따라 달라진다.
</p>
 
<p>
브라우저 창의 크기를 조정하면 단락의 줄 수가 바뀐다.
</p>
cs

아무리 ENTER키를 눌러도 줄바꿈을 인식하지 못한다.

HTML 줄바꿈(Line Breaks)

-<br> 태그로 정의된다.

1
<p>새로운 줄을<br>만들수<br>있습니다.</p>
cs

<br>태그는 끝 태그가 없는 빈 태그이다.

HTML 서식 미리 지정

-<pre> 태그로 정의된다.

-<pre>태그 내에있는 모든 텍스트는 그대로 표현된다.

1
2
3
4
5
6
7
8
<pre>
줄을    막 나눠
 
봅  시다.      이렇게
말
 
이        죠
</pre>
cs

<pre>태그 내에있는 텍스트 서식은 고정 너비 글꼴로 표시된다.

참고사이트

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

HTML_서식 (0)	2019.01.31
HTML_스타일 (0)	2019.01.30
HTML_제목 (0)	2019.01.29
HTML_속성 (0)	2019.01.28
HTML_요소 (0)	2019.01.28

HTML 제목(Heading)

-<h1> ~ <h6> 태그로 정의된다.

-가장 중요한 제목은 <h1>, 가장 중요하지 않은 제목은 <h6>로 나타낸다.

e.g.

1
2
3
4
5
6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
cs

제목에는 자동으로 위,아래에 여백이 생긴다.

HTML 제목의 중요성

-검색엔진은 웹페이지의 <h>태그를 이용하여 키워드를 수집하고 내용을 파악한다.

->따라서 머리글을 사용해야만 검색엔진에 의해 제대로 검색될 확률을 높일 수 있다.

-메인제목에는 <h1>, 다음은 <h2> 그 다음은 <h3>으로 사용해야한다.

참고

HTML 문서에서 텍스트를 <big>태그나 <bold>태그를 사용하기 위해 머리글을 사용하지 않는다.

제목(Heading)의 크기

-각각 HTML제목에는 기본 크기가 있지만, CSS를 사용하여 머리글의 크기를 지정할 수 있다..

e.g.

1
2
<h1 style="font-size:60px;">Heading 1</h1>
<h1>heading 1</h1>
cs

수평 가로 구분선 <hr>

-HTML페이지의 내용을 구분하거나 분리할때 사용한다.

e.g.

1
2
3
4
5
6
7
<h1>heading 1</h1>
<p>Text 1</p>
<hr>

<h2>heading 2</h2>
<p>Text 2</p>
<hr>
cs

<head> Element

-<head>요소는 HTML 제목과 관련이 없다.

-<head>요소는 메타데이터를 위한 것이다. 메타데이터는 표시되지 않는다.

-메타데이터란 HTML문서에 대한 데이터이다.

-<head>요소는 <html>태그와 <body>태그 사이에 위치한다.

참고-HTML 소스

크롬의 경우, HTML 페이지에 우클릭을 해보면 "페이지 소스 보기"

를 클릭하여 소스를 볼 수 있다.

참고-HTML 요소

또한 F12키를 눌러

위 그림과 같이 요소들을 볼 수 있다.

참고사이트

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

HTML_스타일 (0)	2019.01.30
HTML_단락 (0)	2019.01.29
HTML_속성 (0)	2019.01.28
HTML_요소 (0)	2019.01.28
HTML_시작 (0)	2019.01.25

HTML 속성

-속성값은 HTML 요소에 대한 추가적인 정보를 알려준다.

모든 요소들은 속성값을 가질 수 있다.
속성값은 항상 시작태그에 지정된다.
속성값은 일반적으로 이름/값 쌍으로 제공된다 : name="value"

href Attribute

-링크태그이다.

1
<a href="https://beinmy.tistory.com/">This is a link</a>
cs

시작태그 <a>로 시작하여 끝 태그<\a>로 끝난다.
자세한 것은 뒷부분 <a>태그에서 다룬다.

src Attribute

-이미지 태그이다.

1
<img src="img_CAU.jpg">
cs

src 속성에 이미지 파일 이름을 입력하여 이미지를 삽입한다.

width , height Attribute

-HTML의 이미지는 폭과 높이를 설정하는 크기 속성을 가진다.

1
<img src="img_CAU.jpg" width="500" height="600">
cs

픽셀단위로 지정된다 e.g. width : "500"은 500픽셀 폭을 뜻한다.
자세한 것은 뒷부분 HTML 이미지에서 다룬다.

alt Attribute

-HTML의 이미지는 폭과 높이를 설정하는 크기 속성을 가진다.

1
<img src="img_CAU.jpg" alt="CAU_Notice">
cs

속성값은 screen reader가 읽을 수 있다.
시각장애가 있는 사람과 같이 웹페이지에 무언가를 들으러 온 사람이 들을 수 있게 해준다.
alt 속성은 이미지가 없는 경우에도 유용하다.

style Attribute

-색상, 글꼴, 크기 등과 같은 요소의 스타일을 지정한다.

1
<p style="color:blue">paragraph.</p>

cs

자세한 것은 CSS 에서 다룬다.

lang Attribute

-HTML 문서의 언어는 <html>태그에 선언할 수 있다.

-언어는 lang속성으로 선언된다.

-screen readers(화면 낭독 프로그램), 검색 엔진에는 언어 선언이 중요하다.

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html lang="en-US">
<body>
 
...
 
</body>
</html>
cs

처음 두 글자는 언어를 지정한다(en). dialet가 있다면, 두 글자를 더 쓴다(US).
한국어는 ko 이다.

1
<html lang="ko">
cs

title Attribute

-제목 특성은 <p>요소에 추가된다.

-단락을 마우스로 가리키면 제목 특성 값이 툴팁으로 표시된다.

1
2
3
<p title="툴팁표시">
단락에 마우스를 올리면 툴팁이 표시된다.
</p>
cs

S U G G E S T

Quotes

-HTML5 표준은 속성 값에 대한 인용구(" ")를 요구하지 않는다.

->href속성은 인용문 없이 작성할 수 있다.

하지만

-W3C는 XHTML과 같이 더 엄격한 문서 유형을 요구하기 때문에 인용구 표시를 추천한다.

-때로는 인용구를 표시해야 할때가 있다.

-아래의 예에서는 공백이 포함되어 title Attribute가 제대로 표시되지 않는다.

1
<p title=About CAU>
cs

-따라서 인용구를 사용하는 것이 가장 일반적이다.

Singe or Double Quotes?

-큰따옴표 대신 작은 따옴표도 사용할 수 있다.

-속성 값 자체에 큰 따옴표가 포함되어 있는 경우 작은 따옴표를 사용한다.

1
<p title='John "ShotGun" Nelson'>
cs

또는 반대로

1
<p title="John 'ShotGun' Nelson">
cs

참고사이트

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

HTML_스타일 (0)	2019.01.30
HTML_단락 (0)	2019.01.29
HTML_제목 (0)	2019.01.29
HTML_요소 (0)	2019.01.28
HTML_시작 (0)	2019.01.25

HTML이란?

-웹페이지를 만들기위한 표준 마크업 언어이다.

Hyper Text Markup Language 의 약자
HTML은 markup을 사용하여 웹페이지의 구조를 묘사한다.
HTML의 element는 HTML의 개별요소이다.
HTML의 요소들은 태그로 표시한다.
각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용된다.

HTML 기본형태

-HTML 예시

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
 
<h1>My First Heading</h1>
<p>My first paragraph.</p>
 
</body>
</html>
cs

<!DOCTYPE html> HTML 5의 문서라는 것을 선언한다.
<html> HTML 페이지의 루트요소이다.
<head> 메타정보를 담고있는 부분이다.

메타정보 : HTML 문서에 대한 정보로 웹 브라우저에는 직접적으로 표현되지 않는다.
<title>,<style>,<meta>,<link>,<script>,<base>태그등을 이용해 표현한다.

<title> 제목을 지정한다.

웹 브라우저의 툴바에 표시된다.
웹 브라우저의 즐겨찾기에 추가할 때 즐겨찾기의 제목이 된다.
검색 엔진의 결과 페이지에 제목으로 표시된다.

<body> 화면에 보여지는 컨텐츠들을 포함한다.
<h1> 큰 제목을 정의한다.
<p> 단락을 정의한다.

HTML 태그

-HTML 태그는 괄호(<>)로 둘러싸인 요소 이름이다.

1
<태그이름>content here</태그이름>
cs

일반적으로 태그는 쌍으로 제공된다.
첫 번째 태그는 start tag(opening tag)<시작태그>
두 번째 태그는 end tag(closing tag)<종료태그>
종료태그는 태그 이름 앞에 슬래시를 삽입한다.

-<img> <br> <hr> 등과 같이 시작태그만을 가지는 태그를 빈 태그(empty tag)라고 한다.

HTML 구조

-HTML 구조의 예시

<html>

<head>

<title>Page title</title>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

<!DOCTYPE> 선언

-<!DOCTYPE> 선언문은 문서 유형을 나태내며, 브라우저가 웹페이지를 올바르게 표시하는데 도움이 된다.

-HTML의 맨 앞에 한번만 나타나야 된다.

-대소문자를 구분하지 않는다.

<HTML 5에 대한 선언문>

1
<!DOCTYPE html>
cs

참고사이트