HTML/CSS _ 구성요소, 기본구성
HTML
1. 구성요소
1-1. 요소 (Elements 엘리먼트)
- HTML에서 시작태그와 종료태그로 이뤄진 모든 명령어를 의미한다.
- HTML에서는 요소와 태그를 따로 나누지 않지만 CSS나 JAVA에서는 가장 중요한 용어이다.
1-2. 태그 (Tag 태그)
- 시작태그와 종료태그 두 종류가 있다.
- <p> 앞이 시작태그, 뒤가 종료태그 <p/>
1-3. 속성 (Attributes 어트리뷰트)
- 요소의 태그 안에서 사용되는 구체화된 명령어를 의미한다.
- <p align="center"> 내용이 중앙에 정렬된다. </p>
1-4. 변수 (Arguments 아규먼트)
- 속성에 해당하는 값, 변화할수 있는 것을 의미한다.
- <p align="center"> center 가 변수. </p>
1-5. 주석 (Comment)
- <!-- 화면상에 표시되지 않고 소스에서만 확인할 수 있다. -->
- 문서의 수정사항이나 태그의 설명을 적는다.
- 여러사람이 협업하거나 나중에 수정이 필요할 때 유용하게 사용된다.
- 프로그램마다 주석을 다는 방식이 다르다.
2. 기본구성
2-1. <!DOCTYPE html>
-이 웹문서가 어떤 버전의 HTML언어로 작성되었는지 결정하는 기능이다.
2-2. <html> .... <html/>
- HTML문서의 시작과 끝을 나타낸다.
- 소스 전체를 감싸는 가장 큰 틀
2-3. <head> .... <head/>
- <meta> 문서의 정보를 설정한다.
- <title> 문서상단, 브라우저의 제목표시줄, 페이지 탭에 보여지는 제목을 설정한다.
- <script> HTML이 아닌 다른 다양한 언어를 사용한 프로그램이 위치한다. (없으면 포함하지 않아도 무방)
- <style> 문서를 장식한다.
2-4. <body> .... <body/>
- 문서의 본문에 해당하는 곳으로 실제 화면에 나타내고자 하는 내용을 태그를 사용해 구성하는 부분이다.
2-5. HTML 기본 구성
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- utf-8은 가장 많이 사용되는 가변길이 유니코드 인코딩 방식이다. -->
<title> 제목 <title/>
<script> 프로그램 링크 <script/>
<style>
보통 HTML은 CSS파일에 따로 설정하고 Link로 연결한다.
이곳에 쓰는 것은 CSS파일에 설정하기 전 테스트용으로 많이 사용한다.
BODY태그 내에서 스타일설정을 할 수는 있지만 코드가 많아질수록 비효율적이다.
<style/>
</head>
<body>
본문 내용이 들어간다.
<body/>
<html/>
HTML/CSS _ 폰트 설정, 투명도 설정, 색상 설정
폰트 설정하기 1. 폰트 종류 - Serif : Times New Roman, Times, 궁서체 - Sans-Serif : Arial, 굴림체 - Cursiv : Comic Sans Ms, Monopye Corsira - Fantasy : Impact, Haettemsch 2. 폰트 지정하기 - 내가 가지고 있는 폰트일때 h1 { fon
wise-o.tistory.com