개요
웹브라우저에 출력하기 위해 HTML과 CSS를 배워야 한다.
HTML은 뼈대, CSS는 살에 해당한다.
공부할 때 ncs 및 학습 모듈을 참고하면 좋다. (정보처리기사 포함)
학습 모듈 검색어 : 화면 설계
HTML 기본 규칙
- Hyper Text Markup Language
- 웹페이지(홈페이지)를 작성할 때 사용하는 문법
- 확장명 .html 저장한다
- HTML 문서는 웹브라우저(크롬,엣지,파이어폭스)에서 출력한다
- HTML 명령어를 Tag라 한다
- 태그는 대소문자를 구분하지 않는다 (대체로 소문자 사용)
- <>기호 안에 명령어를 쓴다
- 여는 태그<>와 닫는 태그</>로 구성되어 있다
- 엔터(줄바꿈)을 허용하지 않는다
- 공백은 1칸만 허용한다
HTML 기본 구조
<!DOCTYPE html>
<!--
태그는 동일하지만 브라우저에 표시하는 방식(랜더링)은 각각 다르기 때문에
표준화된 방식으로 랜더링을 하겠다.
-->
<html lang="ko"> <!-- HTML 문서 시작, 한국어 구성 -->
<head> <!-- 머리말 -->
<title>환영합니다</title> <!-- 제목 표시 -->
</head>
<body> <!-- 본문 시작 -->
<!-- 주석(보충 설명, 실제로 출력 되지 않는다.)-->
무궁화 꽃이 피었습니다
</body> <!-- 본문 끝 -->
</html> <!-- HTML 문서 끝-->
출력 결과는 브라우저 별로 약간의 차이가 있을 수 있다.
텍스트 입력
줄바꿈
<!DOCTYPE html>
<html lang="ko">
<head>
<title>03_글자모양.html</title>
</head>
<body>
<!-- 줄바꿈 <br> (=<br/>) -->
서울특별시 강남구 테헤란로 124<br>
삼원타워 4층<br>
아<br><br><br><br>이<br><br><br>티<br>윌
</body>
</html>
특수문자
공백
≮ <
≯ >
& &
" "
' '
HTML에서는 띄어쓰기가 하나 만 가능하기 때문에 여러 번 띄어쓰기를 하려면 공백을 사용하면 된다.
<!-- 글자 크기 -->
<h1>서울특별시</h1>
<h2>서울특별시</h2>
<h3>서울특별시</h3>
<h4>서울특별시</h4>
<h5>서울특별시</h5>
<h6>서울특별시</h6>단순히 크기를 조정하기 위해 사용하는 것이 아닌 구조(대분류, 중분류, 소분류 등) 작업에 사용한다.
<!-- 닫는 태그는 순서에 주의 -->
<strong><u><i>진하게 밑줄 기울임</i></u></strong>태그를 중첩해서 사용할 수 있다.
<!-- 속성명="속성값" -->
<!-- 속성명='속성값' -->
<hr width="50px"> <!-- 절대적 크기, 기본 pixel 단위 -->
<hr width="50%"> <!-- 상대적 크기 -->
<hr width="50"> <!-- 비추천. 사용자 임의 설정값은 " 또는 ' 로 반드시 감싼다.-->절대적 크기는 브라우저의 크기에 따라 변경되지 않는다.
상대적 크기는 브라우저의 크기에 따라 변경된다.
색상
<!-- Color Names -->
<font color="red">제주도</font>
<font color="green">제주도</font>
<font color="blue">제주도</font>
<!-- Hexadeciaml Colors -->
<font color="#FF0000">제주도</font>
<font color="00FF00">제주도</font>
<font color="0000FF">제주도</font>
<!-- RGB Colors -->
<font color="rgb(255,0,0)">제주도</font>
<font color="rgb(0,255,0)">제주도</font>
<font color="rgb(0,0,255)">제주도</font>font 태그를 사용하는 대신 css로 표현한다.
이미지
<!-- 이미지(.jpg .png .gif) 추가
<img src="경로명+파일명">
<img src="경로명+파일명"/>
1) 상대경로(현재 문서가 저장된 폴더를 기준으로. 여기서는 /frontend/html경로 기준)
images/ 현재 폴더 안에서 하위 폴더 images
./images/ 현재 폴더 안에서 하위 폴더 images
../images/ 현재 폴더의 상위 폴더 images
../../images 현재 폴더의 상위의 상위 폴더 images
2) 절대경로
웹프로젝트의 홈디렉토리(root)부터 시작 -->
<img src="../images/k1.png">
<img src="../images/k2.png">
<img src="../images/k3.png" width="150px" height="100px">
<img src="../images/k4.png" width="50%" height="50%">
<img src="../images/k5.png" width="150px"> <!-- 크기에 대한 기준은 가로(width) -->
<!-- 테두리선 -->
<img src="../images/k6.png" border="2px">
<img src="../images/k7.png" border="0">
동영상
(.mp4 .mp3 .avi .ram 등)
- Old version (비추천)
<embed src="경로명+파일명">2. HTML5 version
<audio controls>
<source src="../music/gangnamstyle.mp3">
</audio>
<video width="350" height="300" poster="../music/crayonpop.jpg" controls>
<source src="../music/crayonpop.mp4">
</video>가로, 세로 길이 지정이 가능하고, poster로 썸네일을 줄 수 있다.
프레임 삽입
회원가입 시 약관에 흔히 사용한다.
<!-- 프레임 삽입 -->
<iframe src="05_이미지.html" width="300" height="200"></iframe><div>, <textarea> 태그와 css로 프레임 모양을 만들 수 있다.
단락
<p> 태그
<p>
‘한바다’의 대회의실에 있는 고래 사진도 실제 태평양에 있는 고래 사진을 본떴다고 한다. ‘한바다’처럼 역삼동에 있었던 태평양은 2020년 사옥을 종로로 이전하면서 대회의실에 대형 고래 사진을 걸어두었다. 태평양 쪽은 “드라마 감독과 작가가 사옥에 자주 방문하다 보니 (고래 사진을) 자연스럽게 모티브로 가져간 것 같다”며 “회의실 큰 창에서 하늘과 빌딩 숲을 바다 삼아 고래가 헤엄치는 상상을 하면서 설치했는데, 드라마에서도 같은 장면이 연출되어 신기했다”고 말했다.
</P>
link
웹페이지 연결
- 다른 페이지 연결
<a href="경로명+페이지명 또는 URL 주소">문자열</a>
<a href="http://www.itwill.co.kr">아이티윌</a>
<a href="http://www.naver.com">네이버</a>
<a href="http://www.daum.net">다음</a>
<a href="04_색상.html">색상</a>
<a href="05_이미지.html">이미지</a>새 탭으로 열고 싶으면 target="_blank" (나는 html a tag new tab으로 구글에 검색함)
<a href="http://www.naver.com" target="_blank">네이버</a>2. 같은 페이지 내에서 문서 연결 (북마크)
위로, 아래로
예) 위로, 아래로
<h1 id="아이디명">서울</h1
<a href="#아이디명">여기</a>'#'은 id를 가리킨다. '여기'를 클릭하면 id 값이 아이디명인 곳으로 이동하게 된다.
3. 다른 페이지로 이동하면서 북마크 한 곳으로 이동
<a href="html_demo.html#C4">Jump to Chapter 4</a>html demo 페이지 중 id 값이 C4인 곳으로 이동
목록
하나의 덩어리(그룹)을 표시할 때, 웹페이지를 구조화할 때 많이 사용한다.
- 순서가 있는 목록
<ol>
<li>커피</li>
<li>녹차</li>
<li>우유</li>
</ol>
2. 순서가 없는 목록
<ul>
<li>바나나</li>
<li>사과</li>
<li>수박</li>
</ul>
3. 정의 목록
<dl>
<dt>커피</dt>
<dd>아메리카노</dd>
<dd>에스프레소</dd>
<dd>카푸치노</dd>
<dt>우유</dt>
<dd>딸기우유</dd>
<dd>바나나우유</dd
<dd>초코우유</dd>
</dl>
표
정렬하기 위해 사용한다.
<table border="1">
<tr> <!-- 줄(행) 시작 -->
<td>셀1</td> <!-- cell -->
<td>셀2</td>
</tr> <!-- 줄 끝 -->
</table><!-- 표크기(픽셀 단위) -->
<table border="1" width="500" height="300">
<tr>
<th>이름</th> <!-- table head 열 제목 -->
<th>주소</th>
</tr>
<tr>
<td>무궁화</td>
<td>강남구 테헤란로</td>
</tr>
</table>
<!-- 표크기(픽셀 단위) -->
<table border="1" width="50%">
<tr>
<th>이름</th>
<th>주소</th>
</tr>
<tr>
<td>무궁화</td>
<td>강남구 테헤란로</td>
</tr>
</table>th, td 구분하지 않고 사용해도 큰 상관은 없다.
width, height 등은 나중에 css를 배운 후 css로 올려줘야 한다.
정렬
<table border="1" width="250" height="300">
<tr>
<td align="left">종로구</td>
<td align="center">중구</td>
<td align="right">마포구</td>
</tr>
<tr>
<td valign="top">강남구</td>
<td valign="middle">서초구</td>
<td valign="bottom">송파구</td>
</tr>
<tr>
<td align="left" valign="top">노원구</td>
<td align="center" valign="middle">도봉구</td>
<td align="right" valign="bottom">강북구</td>
</tr>
</table>align 가로 정렬, valign 세로 정렬
표 안에서 영역 구분
<thead> <tbody> <tfoot>
화면에 보이는 부분에서 차이는 없다.
<!-- 표 안에서 영역 구분 <thead> <tbody> <tfoot> -->
<table border="1">
<thead> <!-- 테이블 머리말 영역 -->
<tr>
<th>월</th>
<th>요금</th>
</tr>
</thead>
<tbody> <!-- 테이블 본문 영역 -->
<tr> <td>1월</td> <td>1000원</td> </tr>
<tr> <td>2월</td> <td>1500원</td> </tr>
<tr> <td>3월</td> <td>2000원</td> </tr>
</tbody>
<tfoot> <!-- 테이블 꼬리말 영역 -->
<tr>
<th>합계</th> <th>4500원</th>
</tr>
</tfoot>
</table>
셀 병합
가로 : colspan (열 병합) 세로 : rowspan (행 병합)
<!-- 셀 합치기 : 가로 colspan, 세로 rowspan -->
<table border="1" width="150">
<tr>
<td>가</td>
<td>나</td>
<td>다</td>
</tr>
<tr>
<td colspan="2">라</td> <!-- 2칸 합치기 -->
<td>마</td>
</tr>
<tr>
<td>A</td>
<td rowspan="2">B</td> <!-- 2줄 합치기-->
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
</tr>
</table>
표 내부에서 표 작성하기
<!-- 표 내부에서 표 작성 -->
<table border="1" width="150" height="200">
<tr>
<td>국어</td>
<td align="center">
<table border="1">
<tr> <td>AA</td> <td>AA</td> </tr>
<tr> <td>BB</td> <td>AA</td> </tr>
<tr> <td>CC</td> <td>AA</td> </tr>
</table>
</td>
</tr>
<tr>
<td>영어</td>
<td>수학</td>
</tr>
</table>
'웹개발 교육 > HTML' 카테고리의 다른 글
| [4일] html (4) - 레이아웃, 시맨틱 요소 (0) | 2022.07.31 |
|---|---|
| [3일] html (3) - 입력 양식, 블록, 레이아웃 (0) | 2022.07.31 |
