반응형
<html 기본 구조>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>메인 제목</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<p> 내용 </p>
</body>
</html>
| HTML | CSS | Javascript | |
| 주요 기능 | web site 뼈대 구성 (Structure) | html 스타일 구성 | 기능 구현 (상호 작용) |
HTML은 위에 보이는 코드처럼 Structure를 구성하는 단계이다. 주로 제목과 내용 그리고 구성을 짜게 된다.
<기본 구조 2>
- <!DOCTYPE html> 해당 문서가 HTML 문서임을 알리는 지시어
- <html> 문서 전체의 틀을 구성하는 시작태그
- <head> 문서의 메타데이터를 선언
- <title> 문서의 제목으로, 브라우저를 실행했을 때 탭에 보여짐
- <body> 문서의 내용을 담는 곳
<HTML 용어 설명>
- <h1></h1> ~ <h6></h6> 숫자가 작을수록 큰 제목으로 표시된다.
ex) <h1 style="font-size:50px;"></h1> 크게할 수 있음. - <div> 블록 태그로, 한줄을 독점할 때 사용함.
- <span> 인라인 태그로 블록속에 삽입되어 블록의 일부로 사용되며, 컨텐츠의 크기만큼 공간을 차지함.
- <ul><ol><il> unordered list, ordered list, 리스트 내의 아이템은 il태그로 구분함.
- <table> / <tr><td> 표를 만드는 태그로, 행은 tr태그 각 셀은 td 태그로 구분함.
- <input> 태그는 type 속성을 통해서 입력 폼을 만들 수 있다.
( type : text, password, radio, checkbox, button 등 ) - <p> 일반적인 문장이다.
- <br> 띄어쓰기할 때 사용하면 된다
- <a> hyperlink, href 는 특정 URL에 기여한다.
ex) <a href="https://choonsik-lab.tistory.com/">티스토리 블로그</a> - <img> HTML page에 이미지를 삽입하는 태그, src 는 경로를 안내한다.
ex) <img src="img_choonsik.jpg">
ex2) <img src="img_choonsik.jpg" width = "100" height = "100"> - style 스타일은 요소에 스타일을 더해준다. 예를 들면 color, font, size 등등
ex) <p style="color : red;> 이 문장의 색은 빨강이다 </p> - <hr>태그는 아래와 같이 수평선을 표시해준다. (영역 구분)
ex) ------------------------------------------------ - <pre> 는 HTML 에 입력하는 구조대로 그대로 웹사이트에 구현된다.
ex) 아래처럼 코딩하면 실제 구현되는 이미지도 똑같이 표현된다.
<pre>
안녕하세
요.
</pre>- <b> Bold text
- <Strong> Important text
- <i> Italic text ( 기울여 쓰기 )
- <em> Emphasized text
- <mark> Marked text ( 표시해준다. )
- <Small> Smaller text
- <del> Deleted text
- <ins> Inserted text
- <sub> Subscript text ( 아래 첨자 )
- <sup> Superscript text ( 윗 첨자 )
- <blockquote> 다른 사이트에서 인용해서 쓰는 문구
- <q> 인용문구
- <cite> 작품등의 제목이나 이름을 정의할 때 사용
궁금하면 다음편으로 클릭!!
https://choonsik-lab.tistory.com/entry/HTML-HighperText-Markup-language?category=935771
HTML , CSS 는 무엇인가!? (2편)
CSS 는 무엇인가? CSS (Cascading Style Sheets)의 약자로 문서에 디자인을 입힐 때 사용하는 스타일 시트 언어다. CSS 가 필요한 이유? HTML에서 디자인을 입히는 것보다 CSS를 따로 구현해서 관리한다는 점
choonsik-lab.tistory.com
HTML , CSS 는 무엇인가!? (3편) - flexbox!
Container (사용할 수 있는 속성 값) display : flex; flex-direction : (default)row, row-reverse, column, column-reverse frex-wrap : (default)nowrap, wrap (reverse 사용가능) ---> 화면에 꽉 차면 다음줄..
choonsik-lab.tistory.com
반응형
'IT 정보 > 기타 정보' 카테고리의 다른 글
| [HTML/CSS] HTML , CSS 는 무엇인가!? (3편) - flexbox! (11) | 2022.04.28 |
|---|---|
| [HTML/CSS] HTML , CSS 는 무엇인가!? (2편) - CSS (4) | 2022.04.27 |
| Plugins 설치하는 방법 (4) | 2022.04.26 |
| Web Client & Web Server 란? (14) | 2022.04.26 |
| Oracle JDK & Open JDK(Azul) 차이점 (0) | 2022.04.26 |
