IT Log
HTML 본문
728x90
반응형
HTML
-
Hyper Text Markup Language의 약자
- 다양한 태그를 사용하여 웹 페이지의 서식을 지정
- 웹 페이지 작성을 위한 표준 Markup Language
HTML 요소
- 시작 태그와 일부 내용 및 종료 태그로 정의
- HTML 요소는 중첩될 수 있음
- 일부 HTML 요소는 종료태그가 없음
- 대소문자를 구분하지 않음
- 작성방식 : <tagname> 내용 </tagname>
# 기본 작성 예시
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
# 종료 태그가 없는 요소
<p>This is a <br> paragraph with a line break.</p>
// <br>은 종료태그가 없다.
# 대소문자
<p>와 <P>태그는 동일하지만, 종종 엄격한 문서에 경우 소문자를 요구함HTML 속성
- 모든 HTML 요소는 속성을 가질 수 있음
- 속성은 요소에 대한 추가 정보를 제공
- 속성은 항상 시작 태그에 지정
- 속성은 일반적으로 name = "value"로 제공
# href
<a href="https://www.google.com">Visit Google</a>
// 링크할 페이지의 URL을 지정
# src
<img src="img_girl.jpg">
// 이미지의 경로를 지정
# height / width
<img src="img_girl.jpg" width="500" height="600">
// 이미지의 높이와 폭을 지정
# alt
<img src="img_girl.jpg" alt="Girl with a jacket">
// 이미지의 대체 텍스트를 지정
# style
<p style="color:red;">This is a red paragraph.</p>
// 색상, 글꼴, 크기 등과 같은 스타일을 추가
# lang
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
// 웹페이지의 언어를 선언
# title
<p title="I'm a tooltip">This is a paragraph.</p>
// 요소에 대한 툴팁으로 표시HTML 색상
- 사전 정의된 색상 이름 또는 RGB, HEX, HSL, RGBA 또는 HSLA값으로 지정
- 140개의 표준 색상 이름을 지원
- 배경, 글자, 테두리 색을 설정할 수 있음
- RGB : 0~255 사이의 값으로 빨강, 녹색, 파랑 색상의 강도를 정의
- HEX : 16진수 값을 사용하여 색상을 지정
- HSL : 색조(0~360), 채도(0~100%), 밝기(0~100%)를 사용하여 색상을 지정
- RGBA : RGB에서 알파라는 0.0 ~ 1.0 사이의 값으로 불투명도를 추가하여 값을 지정
- HSLA : HSL에서 알파라느 0.0 ~ 1.0 사이의 값으로 불투명도를 추가하여 값을 지정
-RGB
rgb(빨강, 녹색, 파랑)
rgb(255, 0, 0)
-HEX
#rrggbb
#0f9a5e
-HSL
hsl(색조, 채도, 밝기)
hsl(360, 0, 100)
-RGBA
rgba(빨강, 녹색, 파랑, 불투명도)
rgba(100, 150, 255, 0.5)
-HSLA
hsla(색조, 채도, 밝기, 불투명도)
hsla(360, 22, 66, 1.0)HTML CSS
- CSS는 Cascading Style Sheet의 약자
- 여러 웹 페이지의 레이아웃을 한번에 제어 할 수 있음
- 색상, 글꼴, 텍스트 크기, 요소 사이의 간격 등등 디스플레이 등을 제어할 수 있음
- CSS는 3가지 방법으로 HTML 문서에 추가
- 인라인 : HTML 요소 내부의 style을 사용
- 내부 : <head> section의 <style>요소를 사용
- 외부 : <link> 요소를 사용하여 외부 CSS파일에 연결
파일에 HTML코드가 포함되어서는 안되며 확장자는 .css로 저장
# 인라인
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
# 내부
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
# 외부
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>HTML 레이아웃
- <header> : 문서 또는 섹션의 헤더를 정의
- <nav> : 탐색 링크를 위한 컨테이너를 정의
- <section> : 문서에서 섹션을 정의
- <article> : 독립적인 article을 정의
- <aside> : 사이드 바와 같이 컨텐츠를 제외하고 컨텐츠를 정의
- <footer> : 문서 또는 섹션의 바닥글을 정의
- HTML 4가지 레이아웃 기법
- CSS 프레임 워크 :
- CSS float : 요소가 문서 흐름과 연결되어 있어 유연성이 떨어짐
- CSS flexbox : 페이지 레이아웃이 다른 화면 크기와 다른 디스플레이 장치를 수용할 때 예측가능하게 동작
- CSS grid : 행과 열이 있는 Grid 기반 레이아웃을 제공하여 부동 및 위치 지정없이 쉽게 디자인
728x90
반응형
Comments