HTML 주요태그

링크 Links

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

Attributes

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

href

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

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

src

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

<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% 퍼센트로 입력이 가능합니다.

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

alt

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

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

style

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

lang

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

<!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

<!-- 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 파일을 사용하는 방법

<!-- Inline CSS -->
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

<!-- 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>

<!-- 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>

h1 {
  color: blue;
}
p {
  color: red;
}

Links

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

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

저작자표시 비영리 변경금지

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

국가코드 (Country Code) (0)	2022.06.28
색상명 (Color Names) (0)	2022.06.27
SEO(Search Engine Optimization) 요약 (0)	2022.06.27
하이퍼링크(Hyperlink) 작성법 (0)	2022.06.27
HTML TEXT 작성법 (0)	2022.06.27
HTML HEAD 작성법 (0)	2022.06.27
HTML Cheatsheet (한장요약) (0)	2022.06.27
HTML (0)	2022.06.27