- 나중에 이쁘게 정리
- VSC에서 폴더/파일명은 항상 소문자로 작성
(프로젝트가 계속 오류나서 몇시간 동안 원인을 찾다가 대문자가 문제였던 것을 발견한곤 함)
- html파일 확장자는 .html
- 브라우저는 HTML과 CSS를 이해하고 표현한다.
- HTML은 뼈대, CSS는 근육(디자인), JS는 뇌
- VSC Extention(확장 프로그램) 설정
추천 Extension
1.WakaTime
2. Community Material
--> Set Color Theme에서 원하는 색으로 변경
3. Material Icon Theme
--> 이쁜 아이콘 보여줌
4. Prettier
--> VSC에서 자동으로 HTML을 이쁘게 정렬해줌(settings에가서 format on save를 체크해줘야함)
- HTML은 규칙을 어긋나더라도 브라우저는 항상 컨텐츠를 보여줌(에러가 있음을 알려주지 않음)
--> 단점 : 문제가 있는 경우 어떤 곳에서 문제가 생겼는지 확인하기 힘듦
HTML규칙을 따르지 않으면 html확장자를 가진 txt파일과 다를바가 없음
HTML tag : 브라우저에게 어디서부터 어디까지가 어떤 컨텐츠를 의미하는지 알려주는 역할
tag를 닫지 않으면 모두 처음 tag로 인식해버림
HTML에 list는 2가지 종류 1. ordered list, 2.unordered list
- unordered list 표현 방법, ordered list는 ul을 ol로만 바꾸면 됨
<ul>
<li>하나</li>
<li>둘</li>
<li>셋</li>
</ul>
<a></a> a는 anchor를 의미한다.
anchor는 다른 웹사이트로 이동하는 링크들 보여주는 태그
attributes는 태그에 부가적으로 추가하는 정보
href(hyper link reference)는 a의 attributes이고 링크 주소를 입력
<a href = "url"> text </a>
<a href = "url" target="_blank|_self|_parent|_top|framename">
아무 속성을 넣어도 문법적으로는 문제가 없는데 브라우저가 이해하지 못하면 작동은 안함
정말 많은 attributes들이 있고 공통적으로 사용되는 것들도 있고 아닌 것도 있음
self-closing tag
<img />
이미지는 텍스트와 같은 컨텐츠가 없기 때문에 이미지는 이미지 자체로 존재하므로 self closing tag임
<img src ="image link" />
<img src ="image file location" />
HTML 문서 작성시 따라야하는 구조
1. <!DOCTYPE html>으로 무조건 시작해야함 html파일이란 것을 알려주는 역할
2. <html> </html>안에 html 코드를 입력하는 것
3. <body> </body>와 <head></head> body는 겉으로 보이는 것 head는 내부적인 페이지 환경 설정
head에 들어가는 태그는 모두 invisible하다
규칙을 따르지 않아도 html에서는 아무 문제 없고 브라우저는 반응 없을 것
하지만 나중에 CSS나 JS와 합칠 때 오류가 날 수 있음
HEAD에 관하여
메타 태그는 검색에서 보이는 title과 description을 설정하는 태그들, 실제로는 보이지 않는 태그들.
<meta> </meta> meta는 부가적인이라는 뜻
meta는 content와 name 2가지 attributes를 가지고 있음
content와 name에 값들을 줘서 환경을 설정하는 방식
<meta charset="utf-8"/> 인코딩 방식
<html lang="kor"> // html에 lang설정을 해주는데 검색엔진들에게 도움을 주기 위함 우리 웹사이트가 어떤 언어인지
head는 명확하게 브라우저에게 어떤 웹사이트인지 검색엔진이 알 수 있게 정리하는 역할
og:image는 카카오에 공유했을 때 보이는 이미지
여러 Tag들
궁금한 것들 검색할 때 끝에 mdn을 붙여서 구글링하기
태그를 다 외울 순 없고 이렇게 찾아가면서 사용하기 (핵심적인 것들은 손에 익히면 좋긴하것다.)
구글링해서 태그 확인하고 attributes확인해 가면서 하면 된다.
Form 태그들
모두 <form> </form> 안에 쓰인다.
input이 가장 중요한 태그(form에서 사용)
input은 여러 타입을 가질 수 있음
예시
<input type="color"/>
<input type="password"/>
<input placeholder="Name" type="text"/>
<input placeholder="Last Name" type="text"/>
<input placeholder="UswerName" type="text"/>
<input type="submit" value="Create Account"/>
<input type="submit" disabled value="Create Account"/>
<input required placeholder="Name" type="text"/>
<input required placeholder="Last Name" type="text"/>
<input required placeholder="UswerName" minlength=10 type="text"/>
<input type="file" accept=".pdf, .png"/>
<input type="file" accept="image/*"/>
label 태그(form 에서 사용)
label은 input과 함께 사용 됨
label 에 for, input에 id 같은 값을 넣어주면 라벨을 클릭하면 같은 id를 가진 input과 연동 됨
<label for="profile">profile<label>
<input id="profile" type="file"/>
element당 (태그 당)1개의 id만 가질 수 있음 유니크 해야함 id가 겹치면 작동이 안 됨
html 문서 이면의 철학
div 태그는 박스와 같음 일렬이 아니라 위아래로 표현 박스는 나란히 있을 수 없음
sematic은 문서를 보기만해도 의미를 알 수 있는 것을 의미
프로그래머들은 보면 알 수 있는 것들을 semantic이라함
div는 아무의미가 없음 그러므로 semantic한 방법으로 코드를 작성하는 것이 다른 사람들이 의미를 짐작할 수 있으므롤 좋음
예를들어 <div id="header"></div>와 <header></header>는 같은 의미이지만 후자가 바로 이해할 수 있음
header뿐만 아니라 main, footer 등도 마찬가지
<span></span>은 짧은 텍스트에 보통쓰이는데 div와 마찬가지로 아무 의미가 없음
하지만 좀 더 의미를 파악할 수 있는 코드를 사용하는 것을 권장
요약! semantic tag를 사용해보자~~!
html element mdn으로 구글검색해서 확인!
항상 큰따옴표 " 사용하기!
어떤 태그던지 id를 가질 수 있는데 모든 attribute를 다 사용할 수 있는 것은 아님
자주 사용하는 태그들만 외우고 나머진 그때 그때 찾아가면서
보통 header, main, footer, navigation, sidebar/aside를 자주쓴다넹
'STUDY 기록 > 기타' 카테고리의 다른 글
| 가중평균으로 소금물 문제 쉽게 풀기 (0) | 2022.08.25 |
|---|
댓글