Tips
1. 폴더명 및 파일명은 소문자로 구성되어야 함.
2. <tag> </tag> 형태로 이루어진 태그 내에 content를 닮는 형식을 반복하며 코딩. 유효한 tag가 아닐 경우, 무시되고 content는 그냥 text로 출력됨 (html에서는 에러가 없음. 그저 text로 출력되고 의도한 형태로 content가 보이지 않을 뿐)
3. 모든 html 문서는 <!DOCTYPE html>로 시작해야 함. 크롬의 경우, 알아서 해주기도 하지만 원칙 상.
<!DOCTYPE html>
<html lang="kr">
</html>
lang은 검색 엔진을 돕기 위해 일반적으로 설정함.
4. 검색할 때 mdn 이라는 키워드를 끝에 붙여서 검색하면 mozila developer network ,firefow 만드는 회사가 만든게 뜸.
안붙이면 w3 schools가 뜨는데 별로임.
5. 여는 tag, 닫는 tag를 동시에 수정하고자 할 때, ctrl+d를 누르면 동시 수정 가능. refactor name 같은 기능.
6. 모든 <body> <body/> 안의 tag 들은 id를 부여할 수 있는데 모든 tag를 다 통털어서 중복되는 id가 있으면 안됨.
고유해야 함.
너무 겹치는데 id를 분리하면 난잡해지니, 카테고리 레벨 정도로 id를 부여하고 싶을 때는 class 를 부여하면 됨.
class는 여러개를 동시에 지닐 수 있음.
<span class="a b"> hello <span/>
7. 코드의 가독성을 위해서 제공되는 semantic tag들이 있음. 예를 들어 header, footer, main 등은 단순히 div와 같은 역할을 하지만 가독성을 위해서 제공됨.
8. attribute 사용할 때 습관적으로 " "를 쓰는게 좋음. ' 쓰지 말것.
9. BEM (Block element modifier)
이름을 지을 때, block에 속하는 속성은 __로, block 자체의 속성은 --로 표시하는 규칙.
그리고 id 와 class가 헷갈리니 class를 사용해서 코딩함
.btn
.btn__price
.btn--orange
10. icon을 구하기 어려울 때,
heroicons
fontawesome
Tags
1.
<h1> </h1>
text의 header화. 뒤의 숫자가 작을 수록 큰 header가 됨. 1~6까지 있음.
2.
<ul>
<li> item </li>
</ul>
unordered list. 각 item 앞에 dot mark로 표시된 list
3.
<ol>
<li> item </li>
</ol>
ordered list. 각 item 앞에 숫자로 표시된 list
4.
<a href="https://www.youtube.com"> </a>
anchor. 링크를 생성함. 다른 사이트로 이동할 수 있는 url. 보통 href (HTML reference)라는 attributes와 같이 씀.
href 뒤에 붙는 것이 다른 사이트의 url. content가 겉으로 보이는 형태를 표현함.
<a href="url" target="_self"> </a> : 현재 페이지를 url로 이동
<a href="url" taget="_blank"> </a> : 새로운 페이지를 만들고 url로 이동
5.
<img />
<img src="url" />
<img src="local img path" />
이미지를 표현함. 이미지는 self-closing tag라서 content가 없음.
6.
<head>
<title> website name <tiltle>
</head>
페이지 설정을 해줌.
7.
<body> </body>
페이지 내용을 작성함. 모든 내용은 이 태그 안에 있어야 함.
8.
<meta name="description" content="This is my website">
<meta charset="utf-8">
페이지에 드러나진 않지만 페이지 자체를 설명하거나 구성하는 내용을 작성할 수 있음.
예를 들어, 글자 포맷은 어떤 걸 써라와 같은 메타 설정.
9.
<link rel="shortcut icon" sizes="16x16 32x32 64x64" href=" url or local path"/>
페이지 타이틀 옆에 작은 아이콘을 넣을 수 있음
10.
<p></p>
paragraph 작성. text랑 똑같음. 그냥 긴 글을 구분해서 표시하려고 쓸 때.
11.
<abbr title="jongseob yun">jseob </abbr>
12.
<form>
<input placeholder="기본표기 내용" type="color, password 등 다양함 "/>
<label for="first_name"> first name <label/>
<input id="first_name" />
</form>
13.
<div> <div/>
감싸진 애들만 같은 줄로만들고 나머지는 줄바꿈.
14. 위 내용을 외울 필요는 없고, 사실 document 보면 됨.
'Knowhow > Web' 카테고리의 다른 글
| Django tips (0) | 2022.07.21 |
|---|---|
| Javascript tips (0) | 2022.06.21 |
| CSS tips 2 (0) | 2022.06.20 |
| CSS tips 1 (0) | 2022.06.19 |