-
HTML 기본정리Web/html-css 2023. 6. 14. 09:24
웹 페이지는 html,css,js가 한 묶음으로 각각을 연결해서 사용한다.
html부터 알아보자
1. HTML 기본구조
<!DOCTYPE html> // 문서가 html언어를 사용함을 알림 <html> // html문서의 시작 <head> //문서 전체 정보 </head> <body> //문서 실제 내용 </body> </html>태그와 속성
html문서는 태그를 사용하여 작성되는데, 태그에는 1개 이상의 속성을 넣을 수 있다.
<meta(태그) [ http-equiv="X-UA-Compatible" ] content="IE=edge" /> 속성 [속성이름]=[값]css 적용하기
html에 css는 3가지 방법으로 적용할 수 있다.
- 태그에 style 속성 적용하기 (적용된 태그 한정)
- <head>안에 <style> 태그로 넣기 (문서 전체에 적용된다.)
- <head>안에 CSS파일 링크하기 (문서 전체에 적용)
<h1 style="color:brown;text-align:center">오우</h1> 스타일 사용하기 프로퍼티:값으로 이루어짐 하나의 프로퍼티에 여러 값은 :으로 구분 프로퍼티는 ;로 구분 --------------------------------------------------------------------- <head> <style> h1 { color: brown; text-align: center; } </style> </head> <style>를 <head>안에서 사용 --------------------------------------------------------------------- <head> <link rel="stylesheet" type="text/css" href="css파일위치"> </head> css파일 링크걸기2. HTML 템플릿 코드의 이해 (HTML5)
<!doctype html>
html문서 최상단에 위치한다. 웹 브라우저가 해당 문서를 다르게 렌더링 하지 않도록 하기 위해 적용하는 태그이다.
<html> html문서의 범위를 설정한다. lang속성을 사용할 수 있다. (문서 언어 설정)
<head>와 <body>
<head> 태그 안에는 html 문서 전체를 대표하거나, 문서 전체에 필요한 데이터를 넣을 수 있다.
<body> 태그 안에는 html 문서에 표시되는 내용을 넣는다.
3. HEAD안에 들어가는 주요 태그
<title> 브라우저의 제목 표시줄이나 페이지 탭에 보여지는 문서 제목 설정
<title>title 명</title><meta> 기타 메타데이터 요소(<link />,<style>)로 나타낼 수 없는 메타 데이터를 나타내기 위해 설정한다.
검색엔진 혹은 브라우저에 정보를 제공한다.
속성: charset (문자인코딩설정)
name(메타 정보 이름) - author:저자명, description: 문서 설명
http-equiv 서버/사용자 작동방식 변경에 대한 지시(HTTP 응답 헤더 제공)
content 각 속성의 값
viewport 초기화면에 보여지는 직사각형 영역에 대한 설정
<meta name ="description" content="문서전반에 대한 설명"> <meta name="keywords" content="HTML, CSS, JAVASCRIPT"> <meta name="author" content="저자명"> // 호환성 관련 태그 <meta http-equiv="X-UA-Compatible" content="ie=edge"> //반응형 웹 관련 태그 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1" /><link> html문서에서 필요한 외부 데이터를 가져오기 위해 사용한다. (css파일 아이콘 파일 등등)
<link rel="html 문서와 외부 데이터와의 관계" href="파일경로" type="외부 리소스의 MIME타입"> rel에는 stylesheet 혹은 icon등 들어갈 수 있다.<style> 스타일 정보를 설정한다.
<style> h1 { color: brown; text-align: center; } </style><script> 자바스크립트 코드를 html문서 내에 작성할 때 사용한다. (link 태그로 js파일을 가져와서 사용해도 된다.)
<script> 자바스크립트 코드 </script> //직접 타이핑해서 사용4. body안에 들어가는 주요 태그
<h1> --<h6> 폰트 사이즈의 크기를 정한다.
<p> 문단표시 태그
</br> 줄바꿈
<a> 하이퍼링크 설정
<a href="이동할 링크" target="지정된 링크로 이동방법 _self:현재부라우저, _blank:새로운브라우저"> 링크를 넣을 문자열 </a><ol><ul><li>
리스트 관련 태그이다.
ol과 li조합은 1,2,3 순서로 표시하고 ul과 li조합은 순서없이 리스트를 표현한다.
<img> 이미지 삽입태그
<img src="이미지파일위치" alt="이미지 대체 텍스트"> alt는 별거 아닌 것 같지만 필수 속성으로 사용하는 것을 권장함<div> html문서의 특정 부분을 지정하는데 사용한다. 태그를 사용해도 브라우저상 보여지는 변화는 없지만,
html 특정 부분을 제어하기 위해 사용한다
<table> 표 구현을 위한 태그
<table> <thead> //table 열 제목을 구성하는 행 <tr> <th>1열</th> //열 이름 (열제목) <th>2열</th> </tr> </thead> <tbody> //table 열 내용을 구성하는 행 <tr> <td>열 내용1</td> <td>열 내용2</td> </tr> </tbody> <tfoot> //테이블 마지막 내용을 구성하는 행 <tr> <td>마지막열1</td> <td>마지막열2</td> </tr> </tfoot> </table><tr> = 테이블의 각 행을 표시
<td> = 테이블의 각 열을 표시
td태그는 아래와 같은 열 혹은 행을 확장하는 태그를 사용할 수 있다.
<td colspan="3"> 열내용 </td> <td rowspan="3"> 열내용</td><form> = 사용자 입력을 받는 태그로 input 태그등과 같이 사용된다.
<form action="사용자 입력 받은 데이터 처리할 url" method="HTTP method (전달방식)" target="지정된 링크로 이동방법"> //form태그 지정 범위 </form><input> = 사용자의 입력을 받는 주요 태그이다. 여러 속성을 가지고 있다.
<input type="인풋인터페이스설정" name="url로 전달될 파라미터명"> <input type="button" value="버튼이름" name="button"> <input type="submit" value="버튼이름"> Name <input type="text" name="name">