폴더&파일 이름 규칙
영문 소문자 사용
공백을 넣지 않기
*_대신 - (하이픈)사용 : 구글엔진이 하이픈(-)을 단어 구문자로 취급.SEO 검색엔진 최적화에도 도움이 됨.
../ 상위 디렉토리(폴더) 이동
주석
태그의 시작과 끝을 적어놓기 : 나중에 컴포넌트 분할 할 때도 좋습니다.
기능 대략 설명해줘야 협업이 편함.
<!-- start -->
<!-- //end -->
<!-- header -->
<header>
...생략...
</header>
<!-- //header --><!-- 메뉴 토글 class="active" 유/무로 제어 -->
<nav class="active">
...생략...
</nav>
<!-- #2022.02.20 4:00 업데이트 -->Markup 검사
HTMl 이 바르게 코딩되었는지 검사해주는 사이트
https://validator.w3.org
html lang 속성
이 페이지의 주 언어가 무엇인지 설정.
lang = “ko-KR”
한국국가의 페이지다는 국가코드 표시
head
기계가 식별할 수 있는 문서 정보(메타데이터)를 담습니다.
meta 메타데이터
어떤 목적을 위해 만들어지 데이터
utf-8
전 세계적인 언어들을 (어떤 언어도 문자깨짐이 없도록) 지원하도록 합니다. 그래서 어떤 언어로 작성하더라도 웹페이지를 읽을 수 있습니다. 국제적인 코드 규약입니다.
<meta charset="utf-8">
문서의 메타데이터를 이름-값 쌍으로 제공.
어떤 형태의 정보를 가졌는지를 알려줌.
viewport
첫 진입시 화면의 설정값.
meta=viewport 에서 inital-scale 로 초기 크기를 설정할 수 있다.
user-scalable=no 속성을 주어 사용자가 화면크기를 제어 못하게 하는 경우인데 접근석이 떨어지므로 사용 비권고. 장애인들의 접근성이 떨어짐. 비권고.
title
사용자가 제목을 보고 탐색할 페이지를 선택할수 있도록 하여 검색엔진 최적화하기.
link
태그로 외부 CSS 파일을 불러올 때 사용
rel
관계설명
href
위치 표시
<link rel="stylesheet" href="/examples/media/expand_style.css">
</head>src
외부 JS 파일을 불러올 때 사용
url
CSS 코드 또는 HTML의 style 에서 특정 파일을 불러올 때 사용
a
태그에 홈페이지 등의 주소를 입힐 때 사용
코드 스니펫
원하는 독타입 단축키 제작
- 아래 사이트에서 스니펫을 생성한다. [링크텍스트](https://snippet-generator.app) ( $번호 를 입력하면 활성화 칸의 순서를 내맘대로 지정가능)
- vs code 설정 에서 user snipet 을 연다.
- html.json 파일을 열고 {} 안에 생성하고 복사한 스니펙을 붙여넣고 저장한다.
h1 태그
웹 페이지가 하나의 책이라고 생각한다면 제목 태그는 목차와 같습니다.
검색엔진은 h 태그에 기반하여 결과물을 보여줍니다!
h1 태그는 한 페이지에 한 번만 사용을 권장. 왔다갔다도 안된다.
제목태그는 검색엔진 사이트에도 스크린리더(컴퓨터의 화면 낭독 프로그램)를 사용하는 사용자에게도 중요한 정보가 됩니다!
br
break(line break)의 약어.
텍스트 안에 줄 바꿈 처리를 해줍니다.
wbr
화면에 따른 줄 바꿈 처리.
현재 요소의 줄 바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타냅니다.
(영어와 한글이 다르니 주의)
word-break:keep-all
word-break: 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀지 지정합니다.
strong
거센 억양으로 소리를 내어 발음합니다.
em
텍스트의 강세를 나타냅니다. 콘텐츠를 강조해서 읽었으면 하는 부분에 적용합니다.
mark
형광펜으로 칠한 것처럼 표시.
abbr
약어(abbreviation).
dfn
정의.
b
사용하지 않는 걸 권장.
i
기울임 꼴이 적용.
등장인물의 생각을 표현할 때 사용.
사용하지 않는 걸 권장.
ol
type 에 뭘 넣느냐에 따라 다르게 꾸밀수있다. 주로 숫자가 중요할때 사용.
start: 항목을 셀때 시작할 수, 아라비아 숫자만 가능. start=“3” 을 추가하면 3번부터 시작.
브레드크럼에 사용된다. home > link > link (여기서 꺽쇄는 문자사용)
ul
주로 숫자가 중요하지 않을때 사용.
dl dt(용어,제목) dd(설명/단독 사용불가)
용어 정의라서 변동이 잘 되면 안된다.
잘 사용하지 않는다.
ex)네이버 사전과 비슷
list-style
목록 꾸미기.
list-style mdn 치면 예시가 많다.
dfn
현재 맥락이나 문장에서 정의하고 있는 용어.
ex) 이북에서 각주같이 클릭하면 정의 용어를 볼 수 있다. (책관련 컨텐츠에서 용어정리 모음사전에 활용)
sup,sub
과학 화학 용어에 주로 사용
cmd shift r
맥 강력 새로고침
kbd
키보드 모양의 입력장치를 나타내고 싶을때
<p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an MDN page.</p>
cite 를 사용하면 시멘틱하다.
