HTML 태그
알아야 할 태그
- heading 태그
- a 태그
- P 태그
- br 태그
- strong 태그
1. heading 태그(h 태그)
- h1 ~ h6 가 있다.
- h 태그는 목차와 같다.
- 검색엔진은 h 태그에 기반하여 보여주므로 검색엔진 최적화에 사용할 수 있다.
- h1 ~ h6는 순차적으로 작성해야 한다.
2. a 태그
- 링크를 걸어서 다른 페이지로 이동할 수 있다.
- 전화번호, 메일에 이용할 수도 있다.
전화번호
<a href="tel:010-1234-1234">010-1234-1234</a>메일
<a href="mailto:12345678@MyMail.com">2345678@MyMail.com</a>- target 속성 : 현재 페이지에서 열건지 새 탭에서 열건지 설정할 수 있다.
_self : default, 현재 페이지에서 열기
_blank : 새 탭에서 페이지 열기 - download 속성 : 링크를 클릭하면 파일이 다운로드된다.
<a href="test.txt" download>test.txt 다운로드</a>- 페이지내에서 이동도 가능하다.
<div>hello</div>
<a href="#section1" target="_blank">section1로 이동합니다.</a>
<section id="section1">
section
</section>3. p 태그
- 하나의 문단을 나타낸다.
4. br 태그
- html문서 내에서 줄바꿈을 가능하게 해준다.
- 가능하면 연달아 사용하지 않는 것이 좋다.
5. strong 태그
- 단어 또는 문자를 굵게 처리한다.
그외 태그
- code 태그
- pre 태그
- q 태그
- blockquote
- mark 태그
CSS 적용방식
4가지 방식으로 스타일을 적용할 수 있다.
1.인라인 방식
- html 태그의 style 속성을 이용해서 스타일을 적용시키는 방식
<p style="color: royalblue">hello</p>- 재사용성이 떨어지고, 가상 요소에 스타일을 줄 수 없기 때문에 잘 사용하지 않는다.
2. 내부 스타일 적용방식
- style 태그를 이용해서 스타일을 적용시키는 방식
<head>
<style>
div {
background-color: red;
}
</style>
</head>
<body>
<div>hello</div>
</body>- 적용시킬 스타일이 너무 많아지면 html문서가 너무 길어지는 단점이 있다.
3. 외부 스타일 적용방식
- html 문서 외부에 있는 style sheet를 불러와서 스타일을 적용시키는 방식
- link 태그를 이용해서 불러올 수 있다.
주변에 있는 main.css 불러오기
<link rel="stylesheet" href="./main.css">주변에 있는 css폴더에 있는 main.css 불러오기
<link rel="stylesheet" href="./css/main.css">현재 폴더에서 한 번 나가서 css폴더에 있는 main.css 불러오기
<link rel="stylesheet" href="../css/main.css">4. 다중 스타일 시트
- 스타일을 여러개의 파일로 나누어서 스타일을 적용하는 방법이다.
- html 파일 내에서 여러개의 css 파일을 불러올 수도 있고, 한 css 파일에 여러개의 css 파일을 import 해서 불러올 수도 있다.
html 파일 내에서 여러개의 css 파일 불러오기
<head>
<link rel="stylesheet" href="./style1.css">
<link rel="stylesheet" href="./style2.css">
<link rel="stylesheet" href="./style3.css">
</head>한 css 파일에 여러개의 css 파일 import 하기
<!-- index.html -->
<head>
<link rel="stylesheet" href="./style.css">
</head>/* style.css */
@import url('./style1.css')
@import url('./style2.css')
@import url('./style3.css')
HiHeLlo!1