2023. 10. 8. 23:39ㆍHtml, Css
▼ 태그
▷ <>안에 들어가 있음
▷ "<태그>" = 여는 태그
▷ "</태그>" = 닫는 태그
▷ 소문자로 입력 (대문자도 사용가능하나 서로약속)
ㄴ여는 태그와 닫는 태그를 사용 = ex. <태그> </태그>
ㄴ예외로 여는 태그만 있는 경우도 있음 = ex. <태그>
기본 형식
▼ <!doctype html> = html 5버젼을 사용한다
▼ <head> = 머리
▷ <title> '제목입력' </title>
▷ <meta charset="utf-8"
▼ <body> = 본문
<기본형식 예시>-------------------------------
<!doctype html> = "html형식으로 제작"
<html> = "html 시작"
<head> = "상단탭에 나오는 타이틀"
<title>홈페이지</title>
<meta charset="uft-8"> = "한글 텍스트 깨짐 방지"
</head>
<body> = "홈페이지 화면에 나오는 것"
<h1>제목1입니다</h1>
<h2>제목2입니다</h2>
<h3>제목3입니다</h3>
<h4>제목4입니다</h4>
<h5>제목5입니다</h5>
<h6>제목6입니다</h6>
<p>내용입니다</p>
</body>
</html>
-------------------------------------------
<제목태그>
▼ 진하게 설정 (고유설정)
▷크기에 따라 글자 진하기가 다름
▼ 글자 크기가 정해져 있음
▷<h1> ~ <h6> 까지만 사용
▷숫자가 클수록 글자 크기가 작음 (1>6)
▷글자 크기가 작을수록 중요도가 떨어짐
▷항상 열었던 태그와 닫는 태그가 같아야한다 (오류가 없더라도 여럿이서 사용하는데 문제가 됨)
ex. <h1></h3> 으로 되면 안됨
<내용태그>
▼<p></p>
▷<p>의 글자 크기는 <h4>의 크기와 비슷하다
▷<p>의 글자 크기는 16픽셀이다
<줄바꿈태그>
▼줄 바꿈하고 싶은 사이에 <br> 넣기
▷ ex) <p>제목 <br> </p>
▷ <br />로도 사용
<글자 진하게태그>
▼ <strong></strong>
▷ ex) <p>일반 크기<strong>강조하고 싶은 말</strong></p>
▷ <b></b>로도 사용 (예전 코드)
<글자 기울이기>
▼<em></em>
▷<i></i>로도 사용 (예전 코드)
-------------------------------------------
<display 속성>
display 에는 block, inline, inline-block 이 있다
▼block 태그
▷가로 100% 공간차지, 크기값을 가질 수 있음, 세로배치 된다
*block은 block와 inline 모두 감쌀 수 있다
▼inline 태그
▷컨텐츠양만큼만 공간차지, 크기값을 가질 수 없음, 가로배치 된다
* inline은 block을 감쌀 수 없고 inline만 감쌀 수 있다
▼inline-block 태그
▷ block 태그와 inline 태그, 두개 태그의 속성을 일부분을 가지고 있다
'Html, Css' 카테고리의 다른 글
| 외부 스타일 / hover (1) | 2023.10.08 |
|---|---|
| 여백 (0) | 2023.10.08 |
| 이미지 삽입 / 하이퍼 링크 (0) | 2023.10.08 |
| 내부 스타일 (style) (1) | 2023.10.08 |
| 글자 꾸미기 (0) | 2023.10.08 |