웹 구성
HTML: 집의 구조
CSS: 인테리어
JS: 집의 기능
HTML 구조
head 태그
- HTML 문서의 메타 데이터, 문서 정보를 정의하는 데 사용되는 태그
메타 데이터: 데이터에 대한 정보를 제공하는 데이터
-title: HTML 문서의 제목
-style: HTML 문서의 Style 정보 정의
-link: 외부 리소스와의 연결 정보를 정의(CSS 파일 연계에 사용)
-script: Javascript 를 정의
-meta: 페이지
body 태그
- HTML 의 실제컨텐츠를 정의하는 데 사용되는 태그
HTML 태그 종류
제목
h1~h6태그 : 제목, 글씨 크기 조절해주는 태그
<h1>h1태그 입니다.</h1>
<h2>h2태그 입니다.</h2>
<h3>h3태그 입니다.</h3>
<h4>h4태그 입니다.</h4>
<h5>h5태그 입니다.</h5>- p 태그 : 문단을 나눠주는 태그
- br(break) 태그 : 줄 바꿈 태그 (\n같은)
- hr(horizontal rule) 태그: 수평선 그어주는 태그
<p>
p태그 입니다.<br />
두 번째입니다.
</p>텍스트 효과
- b(bold), strong: 굵게
- i, em : 기울기
- s : 취소선
- u: 밑줄
- blockquote:인용문
목록
li태그를 이용해 목록을 생성
- ul 태그 : 순서가 없는 목록 태그
- type 종류 :disc,circle,square,none...
<ul type="circle">
<li><b>사과</b></li>
<li>바나나</li>
<li>파인애플</li>
</ul>- ol 태그 : 순서가 있는 목록 태그
- type 종류:a,I,1, ... start: 시작하는 값 지정reserved: 역순 설정ul 태그보다 쓸 수 있는 속성이 많음
<ol type="a" start="3" reversed>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>이미지
- img 태그 : 이미지를 표시해주는 태그
-상대경로 :./,../로 경로값 설정
-절대경로 :C:\Users\..로 경로값 설정
-alt: 이미지가 뜨지 않을 때의 이미지 설명값
<!-- img 태그 -->
<!-- 인터넷 이미지 링크 -->
<img
src="data:image/jpeg;base64,/9j/4A~..
alt="dog"
/>
<!-- 상대경로 -->
<img src="./dog2.jpg" alt="dog2" />
<!-- 절대경로/ 절대경로 사진 확인 시 라이브서버X -->
<img src="C:\Users\qhdid\Documents\github\KDT-8-Web\dog2.jpg" alt="dog3" />
하이퍼링크
- a 태그
-_self: 기존 창에서 링크 연결
-_blank: 새 창에서 링크 연결
default값:_self
<!-- a태그 default: _self -->
<a href="https://www.naver.com" target="_blank">네이버</a>-
input 태그
type 속성 값(default:text)
-button: 버튼 생성
-text: text를 입력가능한 칸 생성
-password: 입력하는 값을 숨기는 칸 생성
-checkbox: 중복이 가능한 체크박스 생성
-radio: 중복이 불가능한 체크박스 생성
-date: 날짜 선택 가능한 위젯 생성
-select: 선택표시줄 생성 -
textarea 태그: 글씨를 작성할 수 있는 칸을 만드는 태그
<!-- textarea 태그 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
- table 태그 : 표를 생성하는 태그
-border: 테두리 굵기
-bordercolor: 테두리 색상
-align: 정렬
-bgcolor: 배경 색상
-colspan: 가로 합병(열 합병)
-rowspan: 세로 합병(열 합병)
-cellspacing: 셀 여백 설정
-width,height: 가로,세로 길이 지정
html을 semantic하게 작성하기 위해서
- div 태그
vscode prettier 세팅
확장 > prettier - code formatter 설치 > settings > editor.format > format save check > default formatter > prettier 적용
vscode 세팅 후 수업 파일에서 prettier의 적용이 안되길래 뭔가 했더니 html 태그가 누락되어있었음
수업시간 내내 구글링하고 설정했는데도 안되길래 뭔가 했다..
Live Server
실습문제
vscode 단축키 정리
ctrl+/ : 주석처리
alt+shift+a : 문단 주석처리
ctrl+shift+k : 한 줄 삭제
alt+shift+↑,↓ : 해당 줄 복사
alt+↑,↓: 해당 줄 옮기기
intellij 쓰다가 vscode 몇년만에 쓰니까 단축키들 헷갈려서 할미처럼 구글링해서 적응중임.. 안 까먹으려고 정리 같이 해놨다^ㅁ^ 오늘 수업은 전에 html 공부한, 프론트 개발경험이 있었어서 비교적 쉽게 습득하고 실습문제도 빠릿빠릿하게 푼 것 같아 뿌듯하다..이제 2일찬데 이 정돈데 앞으로 밀려서 회고쓰면 진짜..인생 망할듯..
⋆｡˚☁｡⋆｡˚☾˚｡⋆