⏰ 2024.11.07 (D+21)
1. Hn : 제목을 나타내는 태그
🔖 중요 ]
- Hn태그 : 제목을 표시하는 태그
- Block Element(세로배치)
- h1 ~ h6까지 : 글자가 커짐(숫자가 작을 수록)
제목을 나타내는 태그 예시 📖]
<div> <h1>제목1</h1> <h2>제목2</h2> <h3>제목3</h3> <h4>제목4</h4> <h5>제목5</h5> <h6>제목6</h6> <h7>제목7</h7> <!-- 마크업이 안된다 즉 HTML에는 <h7> 태그가 없다 --> 제목7 <h2 style="border:1px red solid;text-align: right;">오른쪽 정렬</h2> <span style="border:1px red solid;text-align: right;">오른쪽 정렬</span> <div style="background-color : yellow; width:600px;"> <h2 style="border:1px red solid;text-align: right;">오른쪽 정렬></h2> </div> </div>
2. dl : 목록을 나타내는 태그
🔖 중요 ]
- dl태그 : Definition List, 용어 목록을 나열할 때 사용하는 태그
- 하위요소로 dt(Definition Term)태그와 dd(Definition Description) 태그를 갖는다
- Block Element(세로배치)
- 메뉴 표시할때 주로 사용
목록을 나타내는 태그 예시 📖]
<div> <h2>dl 및 자식 태그인 dt 및 dd태그 연습</h2> <dl> <dt>HTML</dt> <dd> HTML은 HyperText Markup Language의 약자로 매우 쉽고 빠르게 웹 문서를 만들 수 있는 마크업 언어이다. </dd> <dt>CSS</dt> <dd> CSS는 Cascading Style Sheet의 약자로 HTML문서의 스타일을 정의하는 스크립트 언어이다. </dd> <dt>JAVASCRIPT</dt> <dd> 자바스크립트(ES5)는 HTML문서에서 사용할 수 있는 프로그래밍 언어로 HTML문서에 다양한 효과를 줄때 사용 한다. </dd> </dl> <h2>DL로 메뉴 구현</h2> <dl> <dt>회사소개</dt> <dt>인재채용</dt> <dt>제휴약관</dt> <dt>개인정보처리방침</dt> </dl> </div>
3. UL : 순서가 없는 목록을 나타내는 태그
🔖 UL 태그 중요사항 ]
- UL 태그 : Unordered List(순서가 없는 목록)
- 순서가 없는 목록을 나타낼때 사용하는 태그 목록을 나타내기 위해서 하위 요소로 li태그(block element)를 가짐
- 속성 type : disc(●-기본), square(■), circle(○)
- block element
- 단, type속성에 1(number순)이나 A,a(알파벳순),I,i(로마숫자)도 지정가능
🔖 OL 태그 중요사항 ]
- OL 태그 : Ordered List(순서가 잇는 목록) 하위요소로 li태그를 가짐
- 속성 type : 1(기본)이나 A,a(알파벳순), I, i(로마숫자)
- start : 순서의 시작 값 지정(ol만 갖고있는 속성)
- li 태그에도 type속성을 지정할 수 있다.
순서 없는 목록을 나타내는 태그 예시 📖]
<div> <h2>당신이 좋아하는 스포츠는</h2> <!-- 웹표준에 어긋남 --> <!-- <ul type="circle"> --> <ul style="list-style-type: circle; background-color: yellow;"> <li>축구</li> <li>야구</li> <li>배구</li> <li>농구</li> </ul> <h2>당신이 좋아하는 영화 장르는?</h2> <ul style="list-style-type: upper-roman;"> <li>액션</li> <li>SF</li> <li>스펙터클</li> <li style="background-color: gold;">범죄/스릴러</li> </ul> <h2>당신이 좋아하는 영화 장르는?</h2> <ol style="list-style-type: lower-alpha;" start="3"> <li>액션</li> <li>SF</li> <li>스펙터클</li> <li>범죄/스릴러</li> </ol> <h2>UL로 메뉴 구현</h2> <ul> <li>회사소개</li> <li>인재채용</li> <li>제휴약관</li> <li>개인정보처리방침</li> </ul> </div>
4. a태그 : 쿼리스트링(절대주소 & 상대주소)
🔖 a 태그 중요사항 ]
- a 태그 : Hyper Link기능을 제공하는 태그.
- inline element
- 속성 :
- href:이동할 페이지 경로 혹은 url주소
- target:이동할 페이지를 보여줄 대상 지정
- _self(기본값):자기자신의 브라우저에 이동할 페이지 표시
- _top
- _parent
- _blank(새창(탭)으로 페이지가 열림)
중요사항 ⭐ ]
a 태그를 이용해 이동할 페이지로 값을 전달할수 있다.
쿼리스트링을 이용해서 값을 전달
💡 쿼리스트링 란? ]
- 페이지명 다음에 ? 로 연결한 문자열
- ?이름=값의 쌍으로 전달
- 여러개 전달시에는 &로 연결
: 예] <a href="aTag.html?name=hong&age=10&id=kim">클릭</a>
- a태그로 값을 전달하면 get방식🖥️ 링크 거는 방법? ]
- 절대주소
: 현재 작성하는 웹 페이지를 기준으로 링크거는 페이지의 위치가 바뀌더라도 주소가 절대로 변하지 않음
- https://~로 링크를 걸거나
- /(홈 디렉토리의 루트를 의미)로 시작하거나
- 예]http://www.naver.com:8080/member/login.html
- /는 http://www.naver.com:8080(도메인)까지를 의미- 상대주소
: 현재 작성하는 웹 페이지를 기준으로 링크거는 페이지의 위치에 따라 주소가 상대적으로 변함
. :현재 디렉토리를 의미
.. :상위 디렉토리
※ 이동하려하고 하는 페이지가 같은 디렉토리에 없다면 그 페이지가 속한 현재 디렉토리의 상위 디렉토리를 찾아간다(../시작)
- 같은 디렉토리에 존재한다면 ./로 시작(단 ./는 생략 가능)
<a href="http://www.baeoomart.co.kr/member/login.html">로그인</a>쿼리스트링 사용하는 태그 예시 📖]
<div> <h2>a 태그 연습</h2> <h3>target="_self"(현재 탭에 이동할 웹 페이지의 내용을 표시:디폴트)</h3> <a href="./ULOL08.html">target속성 미 지정(상대경로)</a><br> <a href="http://192.168.0.20:5500/ULOL08.html">target속성 미 지정(절대경로 - http로 시작)</a><br> <a href="/ULOL08.html">target속성 미 지정(절대경로 - /로 시작)</a> <h3>target="_blank"(현재 탭이 아닌 새로운 탭에 이동할 웹 페이지의 내용을 표시)</h3> <a href="/HTML5/Hn05.html" target="_blank">target속성 지정(_blank)</a> <h3>쿼리스트링으로 데이터 전달</h3> <a href="http://192.168.0.20:5500?company=ICT인재개발원&curficulumn=Alkloc=강남">쿼리스트링으로 데이터 전달</a> </div>
5. img 태그 : 이미지를 표시할때 사용하는 태그
🔖 img 태그 중요사항 ]
- img 태그 : 이미지를 표시할때 사용하는 태그
- inline element
- 종료태그가 없다
- 속성:
- src: 해당 이미지의 경로(절대경로 혹은 상대경로)
- alt:대체 텍스트(이미지가 표시안될때 텍스트 표시됨)
- width:이미지의 가로폭 지정
- height:이미지의 세로폭 지정
- usemap
: 이미지를 map으로 사용할때 값 지정
: 값지정시 반드시 앞에 #을 붙인다.
: map태그와 쌍으로 사용한다
❗ img 태그 주의사항 ]
※ width와 height 미 지정시 이미지 원본 크기 그대로 표시됨.
- a태그를 이용해서 이미지에 링크걸때는 반드시 border값을 0으로 안그러면 테두리가 자동적으로 생김(IE의 경우
이미지를 나타내는 태그 예시 📖]
<body> <h3>이미지 원본 크기(337 × 150)대로 표시</h3> <img src="../images/java_logo.png" alt="자바 로고 이미지"/> <h3>이미지 원본 크기(337 × 150) 조정</h3> <img src="../images/java_logo.png" alt="자바 로고 이미지" width="100" height="100"/> <img src="../images/java_logo.png" alt="자바 로고 이미지" style="width:100px;height: 100px;"/> <h3>이미지에 링크 걸기</h3> <a href="https://www.java.com"> <img src="../images/java_logo.png" alt="자바 로고 이미지" width="100" height="100"/> </a> </body>
6. MAP 태그 : 지도에 링크를 사용하는 태그
🔖 MAP 태그 중요사항 ]
- MAP태그 : 이미지의 영역을 분할해서 마치 지도처럼 사용하기 위함.
- 즉 영역별로 링크 주소를 다르게 걸수 있음.
- img태그와 쌍으로 사용한다
💡 MAP 태그 사용 방법
<map name="img태그의 usemap속성에 지정한 값"> <area/>:태그를 이용해서 이미지의 영역 분할 </map> area태그:map의 하위태그로 이미지를 분할할때 사용하는 태그 area태그의 속성: href-링크 주소 지정 shape- circle(circ),rectangle(rect), polygon(poly) coords-shape속성값에따라 각 분할 영역을 지정하는 좌표값을 설정 circ(원)일때 좌표지정 - coords="x좌표,y좌표,반지름" rect(사각형)일때 좌표지정 - coords="left좌표,top좌표,right좌표,bottom좌표" poly(다각형)일때 좌표 지정- coords="각 꼭지점의 x좌표 ,y좌표
지도에 링크를 삽입하는 태그 예시 📖]
<body> <h2>이미지 맵</h2> <img src="../Images/korea.jpg" alt="한국 지도" usemap="#korea"/> <map name="korea"> <area href="http://www.seoul.go.kr" shape="circle" coords="190,135,15" alt="서울"/> <area href="http://www.busan.go.kr" shape="poly" coords="365,345,332,367,345,376,374,352" alt="부산"/> <area href="http://www.jeju.go.kr" shape="rect" coords="105,525,195,545" alt="제주도"/> </map> </body>
7. table 태그 : 표 형태로 컨텐츠를 표시하기 위한 태그
[📢 중요사항 ]
🧱 table태그
: 표 형태로 컨텐츠를 표시하기 위한 태그
❗하위태그로 아래와 같은 태그를 가질 수 있다.
① tr(table row)태그:
- 행을 표시
② td(table data cell)태그:
- 하나의 cell(칸)을 표시
- 반드시 tr태그의 하위 태그로 존재
- 데이터는 td태그사이에 넣어야 한다.
③ th(table header)태그
- 역시 cell을 표시하는 태그이나 표의 헤더를 표시할 때 사용
- 글자가 볼드체 이고 가운데 정렬
❗아래는 웹 표준이나 웹 접근성을 고려한 태그(스크린 리더)
① caption태그 : 테이블의 제목 표시
② summary : 테이블의 요약 설명
③ tbody태그 : 표에서 내용역역에 해당하는 부분을 의미적으로 구분하기 위한 태그
④ thead태그 : 표에서 헤더역역에 해당하는 부분을 의미적으로 구분하기 위한 태그
⑤tfoot태그 : 표에서 푸터역역에 해당하는 부분을 의미적으로 구분하기 위한 태그
[table 태그의 속성]
height : 표의 세로폭 지정(숫자나 %로 지정)
width : 표의 가로폭 지정(숫자나 %로 지정)
border : 테이블의 테두리 두께 지정
cellpadding : cell과 컨텐츠(내용)사이의 여백(기본값:1)
cellspacing : cell과 cell사이의 여백(기본값:2)
align:left(기본값),center,right
bgcolor : 테이블의 백그라운드 색 지정[tr 태그의 속성]
bgcolor : 행의 백그라운드 색 지정
align : 행을 구성하는 모든 cell의 내용의 정렬을 지정
(left(기본값),center,right)
height : 행의 높이를 지정[td 태그의 속성]
align : cell의 내용의 정렬을 지정(left(기본값),center,right)
height : cell의 높이를 지정
width : cell의 가로폭 지정
bgcolor : cell의 배경색 지정
colspan : 열을 병합할때
rowspan : 행을 병합할때
💡 표의 기본 형태
<table > <tr > :행을 의미 <td ></td><td></td> :cell을 의미 </tr> <tr> <td></td><td></td> </tr> .... </table> block 엘리먼트
표를 나타내는 태그 예시 📖]
<body> <h2>table태그</h2> <h3>table태그의 속성들</h3> <h4>table태그의 속성으로 표 만들기 - 웹 표준에 어긋남</h4> <table border="50" bgcolor="green" cellpadding="20" cellspacing="20" width="300" height="300" align="center"> <tr> <td>가</td> <td>나</td> </tr> <tr> <td>다</td> <td>라</td> </tr> </table> <h4>css적용으로 표 만들기 - 웹 표준 준수</h4> <div class="wrapper"> <table class="standard"> <tr> <td>가</td> <td>나</td> </tr> <tr> <td>다</td> <td>라</td> </tr> </table> </div> <h3>tr태그의 속성들</h3> <table border="1" bgcolor="red" width="200" height="200"> <tr bgcolor="yellow" height="150"> <td>가</td> <td>나</td> </tr> <tr align="center"> <td>다</td> <td>라</td> </tr> </table> <h3>tr태그의 속성들</h3> <table border="1" bgcolor="red" width="200"> <tr bgcolor="yellow" height="150"> <td align="right">가</td> <td bgcolor="green">나</td> </tr> <tr align="center"> <td width="150" height="100">다</td> <td>라</td> </tr> </table> <h3>셀 병합</h3> <table border="1" width="400" style="text-align: center;"> <tr> <td>1행1열</td> <td rowspan="2">1행2열</td> <td>1행3열</td> <td rowspan="2">1행4열</td> </tr> <tr> <td>2행1열</td> <td>2행3열</td> </tr> <tr> <td rowspan="2">3행1열</td> <td colspan="3">3행2열</td> </tr> <tr> <td>4행2열</td> <td colspan="2">4행3열</td> </tr> </table> <h3>테이블의 백그라운드 색과 여백을 이용한 테두리 선 긋기</h3> <table style="background-color: red; width:400px; text-align:center; border-spacing:1px;"> <tr style="background-color: white;"> <td>1행1열</td> <td>1행1열</td> </tr> <tr style="background-color: white;"> <td>2행1열</td> <td>2행1열</td> </tr> <tr style="background-color: white;"> <td>3행1열</td> <td>3행1열</td> </tr> </table> <h3>웹 접근성을 고려한 테이블</h3> <table summary="직원들의 연봉 정보를 표시하는 표입니다" style="background-color: black;border-spacing:2px; width:400px; text-align: center;"> <caption>직원 연봉표</caption> <tr style="background-color: white;"> <td>번호</td> <td>이름</td> <td>연봉</td> </tr> <tr style="background-color: white;"> <td>1</td> <td>가길동</td> <td>5,000</td> </tr> <tr style="background-color: white;"> <td>2</td> <td>나길동</td> <td>10,000</td> </tr> <tr style="background-color: white;"> <td>3</td> <td>다길동</td> <td>7,000</td> </tr> <tr style="background-color: white;"> <td>총합</td> <td colspan="2">22,000</td> </tr> </table> <h3>표 작성하기 엽습</h3> <table style="background-color: yellowgreen; width:600px; text-align:center; border-spacing:1px; text-align: center;"> <tr> <th colspan="3" style= "text-align:left; width:600px; height:100px;">오늘의 수입 지출</th> </tr> <tr style="background-color: beige; text-align: center;"> <td>내용</td> <td>수입</td> <td>지출</td> </tr> <tr style="background-color: white; text-align: left;"> <td>월급</td> <td>1,000,000</td> <td></td> </tr> <tr style="background-color: white; text-align: left;"> <td>점심값</td> <td></td> <td>5,000</td> </tr> <tr style="background-color: white; text-align: left;"> <td>부모님 선물</td> <td></td> <td>30,000</td> </tr> <tr style="background-color: white;"> <td rowspan="3" style="background-color: beige;">총계</td> <td>수입</td> <td>지출</td> </tr> <tr style="background-color: white; text-align: left;"> <td>1,000,000</td> <td>35,000</td> </tr> <tr style="background-color: white; text-align: left;"> <td>남은 돈</td> <td>965,000</td> </tr> </table> </body>
