Ziks

1. HTML / CSS 기초 본문

Development/HTML

1. HTML / CSS 기초

YunZiks 2018. 12. 31. 15:16
<!DOCTYPE html>
<title>사이트의 제목</title>
<meta charset = "utf-8">
<h1>가장 큰 머릿말</h1>
<h2>두번째로 큰 머릿말 </h2>
<h3>세번째로 큰 머릿말 </h3>
<p>문단</p>



<!DOCTYPE html>: HTML 버전을 명시해줌


<meta charset = "utf-8"> : HTML의 인코딩 방식을 셋팅함.

<title></title>  : 사이트의 제목, 브라우저의 탭이나 방문 기록에 나와있는 제목 


<h1> ~ <h6>  : 머릿말태그 , 숫자가 높아질수록 크기는 작아짐


<p> : 문단태그



- 옵셔널 태그

<html> / <head> / <body>

: 필수가아닌 옵셔널태그, 보통 정리의 목적으로 사용함.

  꼭 쓸 필요는 없음!

<html> 태그 : doctype html 을 제외한 head, body부분을 모두 써넣음 
<head> 태그 : 페이지의 내용이 아닌 태그들, CSS나 title태그등.. 
<body> 태그 : 페이지의 내용이 들어가는 태그들, h태그,p태그등 ... 


- 기타 태그


<b> : bold 태그 , 텍스트를 굵게

<strong> : strong 태그, bold 태그와 시각적으로 비슷하지만, 스크린리더같은 프로그램이 읽어줄 때 강조해서 사용가능


<i>   : italics 태그, 텍스트를 기울여서 

<em> : emphasized 태그, italics 태그와 비슷하지만 strong과 마찬가지로 강조


<p>I am a <b>Student<b></p> 와 같이 사용함.



CSS 기초


h1 { // 스타일링 하고싶은 요소, 

font-size : 00px ;      // 텍스트사이즈 

text-align: left / center / right;   // 텍스트정렬

color : hotpink;  // 색

margin : 30 px ;  // 요소사이의 여백 설정

}


p i { // p태그 안에있는 i태그만을 스타일링해줌

font-size: 64px;

}    





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

2. Selector (Class / ID)  (0) 2019.01.05
'Development/HTML' Related Articles more
Comments