728x90
- ctrl+? : 주석. 코드 지운것과 똑같은 효과(메모로 활용가능)
- ctrl+space바 : 속성 드롭다운 메뉴 보여줌
- (editor) VS Code에서 우클릭>Format Document 하면 더러운 코드 정리
- (editor) Emmet
div#header>p.title*3 --> <div id="header"> <p class="title"></p> <p class="title"></p> <p class="title"></p> </div>- ! 입력후 tab 누르기 (html 문서 시작템플릿 바로 생성)
- lorem 입력 후 tab 누르기 (임시글자 무작위 생성)
- < p > --> p 입력하고 바로 탭키 눌러서 < p > 생성하기
- div.container>div --> <div class="container"> <div></div> </div>
[경로 관련]
1. css/main.css (상대경로)
2. /css/main.css (절대경로)
- 1번: 현재 HTML파일과 같은 경로에 있는 css라는 폴더 내의 main.css 파일을 의미
- 2번: 현재 사이트의 메인경로(보고 있는 페이지) 부터 시작해서 메인경로/css/main.css 파일을 첨부해라
- 슬래쉬 기호가 첨부터 붙어있으면 사이트 메인경로부터 시작해라~ 라는 의미
[style]
<head>
<style>
.button {
color : red;
}
</style>
</head>- CSS 파일을 만들기 귀찮으면 body 안에 넣어도 동작하는데 html 파일안의 코드는 위에 있을 수록 먼저 읽기 때문에 맨 밑 같은 곳에 두면 사이트 로딩시 스타일 깨질 수 ㅇ, 그래서 넣을거면 head에 넣는 사람 많음.
[meta 태그]
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>- width=device-width는 모바일 기기의 실제 폭으로 렌더링 해주세요 라는 의미
- 실제 접속시 스마트폰 기기의 실제 가로폭을 보고 렌더링하라고 명령
- initial-scale=1 이 부분은 접속시의 화면 줌레벨 설정입니다.
- so, 반응형 웹을 만들 때 저 meta 태그를 복붙하시고 시작
[Favicon]
<head>
<link rel="icon" href="폴더이름/이미지이름.png" type="image/png">
</head> - 웹사이트 탭 제목 옆에 뜨는 아이콘
- ico 대신 png도 ok, ico가 호환성은 가장 좋음.
- 요즘은 32 x 32 사이즈로 제작
728x90
반응형
'기타 > 기타 유용 정보' 카테고리의 다른 글
| 유용한 참고 페이지 (0) | 2023.06.28 |
|---|