스터디 2일 차입니다.
오늘은 HTML문서의 구조와 여러 가지 태그에 대한 강의를 듣고 퀴즈를 풀었습니다.
4월 6일 목요일 저녁 8시에 줌 OT를 진행한다니 잘 살펴봐야겠습니다.
느낀 점
사실 HTML을 개인적으로 적당히 열심히 공부했었기 때문에
어느 정도 이미 다 아는 내용이었습니다.
하지만 좀 더 명확한 용어의 정의와 디테일한 느낌을 교정할 수 있었습니다.
예를 들자면 id 속성(attribute)은 태그의 고유식별자입니다.
하나의 HTML 문서에는 같은 id 값을 갖는 여러 개의 태그가 존재할 수 없습니다.
하지만 그렇게 정의한다고 해서 무슨 오류가 발생하는 것은 아닙니다.
단지 id를 제대로 활용할 수 없게 되겠지요.
동일한 값의 id는 존재할 수 없다기보단 존재하면 안 된다. 정도로 느낌이 바뀌었습니다.
TIL
지식: HTML 문서의 구조, 여러 가지 태그, semantic태그
HTML 문서의 구조
여러가지 태그들- ul, ol, form, input, label 등등
semantic 태그: header, main, footer, span
HTML문서의 구조
브라우저에 이 코드가 html이라 알리는 <! DOCTYPE html> 태그
문서의 본문을 구성하는 html 태그와
그 내부에 사이트 정보 설정을 하는 head, 내용을 담는 body 태그로 구성됩니다.
<!DOCTYPE html>
<html lang="korea">
<head> <!--사이트 설정들을 바꿔준다.-->
<title>브라우저 상단에 표시되는 웹사이트 제목</title>
<meta/> <!-- 부가적인 요소-->
<meta charset="utf-8"/> <!--브라우저가 렌더링하는 언어옵션-->
</head>
<body> <!--사이트 컨텐츠를 표시한다 -->
<ul><!--순서가 없는 리스트-->
<li></li>
</ul>
<ol> <!-- 순서가 있는 리스트-->
<li></li>
</ol></body>
<form>
<label for="hello"></label>
<input id="hello" required/>
</form>
</body>
</html>
Semantic 태그
프로그래머에게 이름을통해 역할을 알려주는 태그들 입니다.
특수한 기능은 없습니다. 어떻게보면 이름의 비주얼 그자체가 특수한 기능입니다.
<!--자주쓰이는 semantic태그-->
<!--전부 body 내부에서 div 태그와 같은 역할을 한다. -->
<header>웹페이지 상단 구성</header>
<main>본문구성</main>
<footer>꼬릿말</fooer>
<span>짧은 텍스트, 이것은 div와는 다르다. </span>
테크: vscode의 prettier extension
저장을 할때마다 html 태그가 가독성 좋게 들여쓰기 되어 정렬됩니다.
VSC 간편 단축키
kokoa clone 강의 2.7
shigatsu970704님이 남주신 기능입니다.
7) 반복되는 단어 한방에 수정
⌘ + D or Ctrl + D(한번씩 일일이 눌러줘야함 / 귀찮으면 Ctrl + F2)
6) 클릭하는 곳마다 커서 생성
⌥ + Click or Alt + Click
5) 코드 위/아래로 움직이기
⌥ + ↑ / ↓ or Alt + ↑ / ↓
4) 코드 복사해서 위/아래로 움직이기
⌥ + ⇧ + ↑ / ↓ or Alt + ⇧ + ↑ / ↓
3) 코드 블록 한방에 코멘트 처리하기
⌘ + / or Ctrl + /
2) 선택된 영역에 커서 만들기
⌥ + ⇧ + i or Alt + ⇧ + i
1) 마우스가 가는 곳 마다 커서 만들기
⌥ + ⇧ + Mouse Drag or Alt + ⇧ + Mouse Drag
Bonus:
파일 맨 위-아래로 한번에 이동하기
Top / Bottom of File: ⌘ + ↑ / ↓ or Ctrl + Home / End
사이드바 숨기기
Hide / Show Sidebar: ⌘ + B or Ctrl + B
+[Ctrl + Shift + Enter]
커서가 있는 줄부터 그 아래의 줄들을 아래로 내리기
+Alt + ←/→
커서가 이전에 위치한 곳으로 되돌아가는 기능이고 알트 오른쪽은 그 반대 효과
'프로젝트 기록 및 회고 > 노마드10주 스터디' 카테고리의 다른 글
| 230408/ 스터디 6일차 회고: CSS Selector (2) | 2023.04.08 |
|---|---|
| 230407/ 스터디 5일차 회고: class, box-theory, flex-box (0) | 2023.04.07 |
| 230406/ 스터디 4일차 회고: 주간회의 참여, HTML box theory 복습. (0) | 2023.04.06 |
| 230405/ 스터디 3일차 회고: HTML form 회원가입 양식 코딩 (0) | 2023.04.05 |
| 230403/ 스터디 1일차 회고: 인강을 듣는방법 및 HTML 기초 (0) | 2023.04.03 |