HTML 소개

Posted on Edited on In , Word count in article: 546 Reading time ≈ 2 mins.

<a> 링크를 정의하는 태그 입니다. 다른 사이트로 이동이나 다른 페이지로 이동하고
같은 페이지내에서 위치 이동시에 사용됩니다. 자바스크립트를 실행시키는 버튼으로도 사용됩니다.

Attributes

element 에 추가 정보를 제공합니다

href

<a> 라는 hyperlink 태그에 URL 정보를 나타내는 href 속성을 추가하면

1
<a href="https://skyksit.com">Visit skyksit.com</a>

src

<img> 이미지 태그에 이미지 주소정보를 나타내는 src 속성을 추가하면

1
<img src="https://skyksit.com/images/logo.png">

src 의 링크 내용은 절대경로와 상대경로를 넣을 수 있습니다.

  • 절대경로 : root 를 기준으로 표시 https://skyksit.com/images/logo.png
  • 상대경로 : 페이지를 기준으로 표시 ../../../images/logo.png

width, height

이미지의 width넓이와 height높이를 나타냅니다. 기본 단위는 px (pixels) 입니다.
화면 넓이를 기준으로 100% 퍼센트로 입력이 가능합니다.

1
<img src="https://skyksit.com/images/logo.png" width="122" height="123">

alt

alt : 이미지의 추가 정보입니다. 스크린리더가 읽어주거나 이미지 오류시 대체되는 text 입니다

1
<img src="https://skyksit.com/images/logo.png" width="122" height="123" alt="skyksit.com의 로고입니다">

style

element 의 스타일을 정할 때 사용합니다. css 공부시에 더 다양한 표현 방법을 알 수 있습니다.

lang

html 페이지의 기본 언어를 정합니다. 영문은 en, 한글은 ko 로 설정하면 됩니다

HTML 언어 코드 (language code) 를 참고하세요 
1
2
<!DOCTYPE html>
<html lang="en">

title

마우스 오버시에 툴팁을 보여주는 속성입니다.

단락 Paragraphs

<p> 안의 내용은 줄바꿈과 공백을 무시합니다.

수평선 Horizontal Rules

<hr> 은 선을 표시하는데 사용하지만 요즘은 거의 안씁니다

줄바꿈 Line Breaks

<br> 태그로 줄을 바꿀 수 있습니다

preformatted text

<pre> 태그안의 내용은 줄바꿈과 공백을 그대로 표현해줍니다

스타일 Styles

style 속성은 색상, 폰트, 사이즈 등의 다양한 꾸밈 요소를 넣을 수 있습니다

  • color : 폰트 색상
  • background-color : 배경 색상
  • font-size : 폰트 크기
  • font-family : 폰트 종류
  • text-align : 글자 정렬

인용구 Quotation

  • <blockquote> : 인용구 표시 - 긴 인용구 사용시
  • <q> : “ 로 인용구 표시 - 짧은 인용구 사용시
  • <abbr> : HTML 같은 약어 표현시에 사용
  • <address> : 주소 표기시 사용 (잘 사용안해요)
  • <cite> : 작품 제목에 사용 (잘 사용안해요)
  • <bdo> : Right To Left 로 텍스트 표기시 사용

Comments

1
2
<!-- HTML 에서 comments 는 이렇게 작성합니다 -->
comments 로 작성된 내용은 웹브라우저에서는 표기가 안됩니다

색상 Colors

HTML 색상지정 방법은 4가지로 색상명, RGB, HEX, HSL 을 사용할 수 있다.

  • 색상명 : 색상명리스트 에서 143개의 색상명을 확인할 수 있다
  • RGB : Red, Green, Blue 로 색상을 표현
  • HEX : RGB 의 16진수 표현
  • HSL : Hue, Saturation, Lightness 색조, 채도, 밝기로 색을 표현

CSS (Cascading Style Sheets)

웹페이지의 스타일을 정하는 방법입니다.

CSS 추가방법

  • Inline : 태그 안에 style 속성을 바로 사용하는 방법
  • Internal : <head> section 안에 <style> 태그를 사용해서 정의하는 방법
  • External : <link> 태그를 사용하여 URL 로 외부 css 파일을 사용하는 방법
1
2
3
<!-- Inline CSS -->
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- Internal CSS -->
<!DOCTYPE html>
<html>
<head>
  <style>
    h1   {color: blue;}
    p    {color: red;}
  </style>
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
<!-- External CSS -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://skyksit.com/css/styles.css">
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>
style.css
1
2
3
4
5
6
h1 {
  color: blue;
}
p {
  color: red;
}

다른 페이지로 이동할 때 사용하거나 같은 페이지 내에서 특정 위치로 이동할 때 사용한다

1
<a href="https://skyksit.com/">Visit skyksit.com</a>