■ Emmet
>(자식 요소) +(형제 요소)
div.container>div>p+span
-------------------------
<div class="container">
<div>
<p></p>
<span></span>
</div>
</div>div.contatiner>div 를 쓰고 tab 키를 누르면 아래와 같은 레이아웃을 간편히 만들 수 있습니다.
>은 자식 요소, +는 형제 요소를 만듭니다.
*(반복하기) .(클래스) #(아이디)
div#header>p.title*3
-----------------------
<div id="header">
<p class="title"></p>
<p class="title"></p>
<p class="title"></p>
</div># 은 id, .은 클래스를 나타냅니다. 또한 *으로 반복하여 p 태그를 3개 만든 것도 확인 할 수 있습니다.
[ ](속성) { }(텍스트)
a[href]
p{hello}
-------------
<a href="" herf=""></a>
<p>hello</p>대괄호 [ ] 안에 속성 요소를 넣으면 속성을 부여할 수 있으며, 중괄호 { } 안에 텍스트를 넣으면 텍스트가 생성된다.
CSS 요소들
m10
w100%
---------
margin : 10px
width: 100%CSS에서는 m10, w100% 등의 축약어를 치고 tab키를 누르는 것으로 CSS를 간단히 부여하는 방법도 있습니다.
lorem 누르고 tab키를 누르면 무작위 멘트 생성, p 입력하고 바로 tab키를 누르면 p태그 바로 생성, ! 누르고 tav키를 누르면 html 기본 템플릿 생성 등 emmet에는 다양한 문법들이 있습니다.
■ head 태그에 들어가는 것들
CSS 파일
<head>
<link href="css/main.css" rel="stylesheet">
</head>
스타일 태그
<head>
<style>
.button {
color : red;
}
</style>
</head>
사이트 제목
<head>
<title>내가만든사이트</title>
</head>
meta 태그
<head>
<meta charset="UTF-8">
</head>
open graph
<head>
<meta property="og:image" content="/이미지경로.jpg">
<meta property="og:description" content="사이트설명">
<meta property="og:title" content="사이트제목">
</head>카톡 등에서 링크를 공유할 때 나오는 사이트 정보를 커스터 마이징 할 수 있습니다.
Favicon
<head>
<link rel="icon" href="아이콘경로.ico" type="image/x-icon">
</head>웹 사이트 제목 옆의 아이콘을 커스터 마이징하는 방법입니다.
ico, png 파일 둘 다 가능하지만 ico가 호환성이 높으면 보통 32x32 사이트로 제작합니다.
■ meta 태그란?
meta 태그의 역할
meta 태그는 브라우저나 검색 엔진 등에게 웹 페이지의 정보를 전달하는 역할을 합니다.
meta 태그는 `<head>` 태그 안에 작성되며, 다양한 속성을 갖고 있습니다.
meta 태그를 사용하면 검색 엔진에서 웹 페이지를 더 잘 이해하고, 사용자에게 더 나은 정보를 제공할 수 있습니다.
따라서 웹 페이지를 작성할 때,meta 태그를 적극 활용하는 것이 좋습니다.
meta charset
<meta charset="utf-8">웹 페이지의 문자 인코딩을 설정합니다.
예를 들어, 한글을 사용하는 웹 페이지는 `<meta charset="utf-8">`로 설정해야 합니다.
meta name="viewport"
<meta name="viewport">모바일 기기에서 웹 페이지를 보여줄 때, 화면 크기를 조절합니다.
예를 들어, `<meta name="viewport" content="width=device-width, initial-scale=1.0">`로 설정하면,
모바일 기기에서 웹 페이지를 볼 때, 화면 크기를 디바이스 크기에 맞게 조절합니다.
meta name="description"
<meta name="description">웹 페이지의 설명을 지정합니다.
검색 엔진에서 웹 페이지를 검색할 때, 이 태그에 지정된 내용이 검색 결과에 노출됩니다.
meta name="keywords"
<meta name="keywords>웹 페이지의 키워드를 지정합니다. 이 태그에 지정된 키워드는 검색 엔진에서 검색할 때, 검색 결과에 반영됩니다.
meta name="author"
<meta name="author">웹 페이지의 저자를 지정합니다.
meta name="robot"
<meta name="robots">검색 엔진 로봇이 웹 페이지를 크롤링할 때, 어떤 부분을 수집할지 결정합니다. 예를 들어, `<meta name="robots" content="noindex, nofollow">`로 설정하면, 검색 엔진 로봇은 해당 페이지를 수집하지 않습니다.
meta name="og"
<meta name="og:title">
<meta name="og:description">
<meta name="og:image">소셜 미디어에서 웹 페이지를 공유할 때, 제목, 설명, 이미지 등을 지정합니다.
meta name="twitter"
<meta name="twitter:title">
<meta name="twitter:description">
<meta name="twitter:image">트위터에서 웹 페이지를 공유할 때, 제목, 설명, 이미지 등을 지정합니다.
'Html' 카테고리의 다른 글
| 10. HTML/CSS(transition, Bootstrap) (1) | 2023.05.09 |
|---|---|
| 9. HTML/CSS(media query와 아이콘) (0) | 2023.05.06 |
| 7. HTML/CSS(웹 폰트와 flex 속성) (0) | 2023.05.03 |
| 6. HTML/CSS(pseudo-class와 OOCSS, BEM) (0) | 2023.05.03 |
| 5. HTML/CSS(form과 table) (0) | 2023.04.27 |
