1. 개발 환경 설정
vscode에서
korean, live server 설치
HTML(HYPER TEXT MARKUP LANGUAGE)
MARK UP이란?
태그를 이용해 문서나 데이터구조를 명기하는 언어
f12 개발자 도구
html이 들어가 있어 웹페이지의 정보를 나타내고 있음
코드 라인 옮기는 법
해당 라인에 커서를 두고 alt를 누른 채로 키보드 화살표로 조작
헤더에 색을 입히는 방법
<h3 style="color : red"></h3>띄어쓰기 하는 법
를 글자 사이에 입력💡 탭은 html에서 표현할 수 없음 .<pre>태그로 탭을 직접 넣어 쓰거나 를 네 번 쓰는 방법이 있다.<<hr> : 수평선(horizon)을 긋는 태그
<br> : 엔터 기능
<p><p/> : 문단, 단락에서 사용함
*글 작성용 태그
*문단을 구분함(앞, 뒤 태그와의 간격이 생김)
<pre><pre/> :
*글 작성용 태그
*문단을 구분
*시작, 종료 태그 사이에 작성된 문자열의 형식을 그대로 화면에 표현해줌(폰트 형식, 탭 입력도 표현해줌)
글자 관련 태그
<b><b/> : 글자 bold 표시하는 태그
<i><i/> : 이탤릭 체로 표시하는 태그
<strong><strong/> :<b>태그와 같지만 중요성, 심각함을 표현하는 강조태그, 웹 접근성이 적용되어 있음
<em><em/> : <i>태그와 같지만 웹접근성이 적용돼 있음 -->
웹접근성 : 일반인 뿐만 아니라 장애인, 고령자를 위해 웹사이트에서 제공하는 서비스를 모두 이용할 수 있도록 보장하는 것(의무사항임)
<mark><mark/> : 형관펜 효과 태그
<u><u/> : under line 효과 태그
<s><s/> : 취소선(잘못됨을 표시)
<del><del/> : 삭제선(없어진 텍스트를 의미) 검색엔진에서도 삭제된 것으로 인식됨
<small><small/> : 작은 글자
<sup><sup/> : 윗첨자 표시
<sub><sub/> : 아랫첨자 표시
<abbr title=”툴팁내용”><abbr/> : 마우스 오버 시 툴팁 출력
목록 관련 태그
ul(unordered list) 태그 : 순서가 없는 목록
ol(ordered list) 태그 : 순서가 있는 목록
li(list item) 태그 : ul, ol 태그의 자식으로 들어가 목록의 요소를 나타내는 태그
*ol 태그의 type 속성
<ol type = ‘1’><ol/>-ol의 기본값은 숫자이다.
-type은 1, a, A, i, I를 지정할 수 있다.
*ol태그의 start 속성
<ol start = ‘5’><ol/>-시작 번호를 지정할 수 있다
*ol태그의 reversed 속성
<ol reversed><ol/>-내림차순으로 적용 가능
표 관련 태그
table 태그
-웹 문서에서 자료 정리를 위해 주로 사용하는 태그
-행과 열로 이루어져 있으며, 행과 열이 교차하는 지점을 셀(cell)이라고 함.
-table태그는 table을 나타내는 행과 열이 작성될 수 있는 영역을 지정함.
tr태그
-table row의 약자로 한 행을 나타내는 태그
td태그
-table data의 약자로 한 행의 한 컬럼(==셀)을 나타내는 태그
th태그
-table header의 약자로, 컬럼명을 표시하는 용도의 태그
-기본 성질은 td태그와 같으나 추가적으로 굵은 글씨로 나오고, 가운데 정렬이 이루어짐.
*td/th 태그에만 작성 가능한 속성
행병합(rowspan) : 상하병합
열병합(colspan) : 좌우병합
<예시>
<table border = '1'>
<tr>
<th width = "70px">이름</th>
<th width = "210px"></th>
<th width = "140px" height = "140px" rowspan="2">사진</th>
</tr>
<tr>
<th>연락처</th>
<td>010-1111-1111</td>
</tr>
<tr>
<th>주소</th>
<td colspan = "2"></td>
</tr>
<tr>
<th>자기소개</th>
<td colspan = "2"></td>
</tr>
</table>위의 결과로는 아래와 같다.
테이블 구조 설정 태그
thead : 테이블의 상단 부분 영역(컬럼명)
tbody : 테이블의 중단 부분 영역(실제 값, 내용)
tfoot : 테이블의 하단 부분 영역(합계)
css style 지정 방법(맛보기)
테이블 이름을 지정하여 특정 테이블에만 스타일을 지정하도록 할 수 있다.
04_표관련태그 <!-- HTML 문서의 스타일(크기, 모양, 색상 등)을 지정하는 태그 == CSS -->
<style>
.tb3 {
border: 2px solid black;
border-collapse : collapse;
}
.tb3 thead {
background-color: azure;
}
.tb3 tbody {
background-color: yellow;
}
.tb3 tfoot {
background-color: tomato;
color:blueviolet;
}
.tb3 th, .tb3 td {
border : 1px solid black;
}
</style>
</head>
<table class = "tb3"> ->tb3으로 테이블 스타일 지정함
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>주소</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>20</td>
<td>서울시 쌍문동</td>
</tr>
<tr>
<td>고길동</td>
<td>40</td>
<td>서울시 강북구</td>
</tr>
<tr>
<td>김영희</td>
<td>34</td>
<td>서울시 성동구</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan = '2'>총인원</th>
<td >3명</td>
</tr>
</tfoot>
</table>