- [HTML/CSS] 형제 태그 선택자 +, ~ 2019.11.06
- <table> 태그 2019.10.01
- <a>태그 / <embed>태그 2019.06.14
- 이미지 태그 <img> 2019.06.04
- 목록태그 <ol> , <ul> , <dl> 2019.06.04
2019. 11. 6. 17:02
<section id = "sec04">
<h2>display:none; 요소를 브라우저에서 숨김.</h2>
<div class = "view">div01</div> <div class = "none">div02</div>
<div class="view">div03</div>
<div class="none">div04</div> <div class = "none">div05</div>
</section>
.view:hover+.none
바로 뒤에 오는 형제태그 선택
.view:hover~.none
해당하는 모든 형제태그 선택
'HTML' 카테고리의 다른 글
| <table> 태그 (0) | 2019.10.01 |
|---|---|
| <a>태그 / <embed>태그 (0) | 2019.06.14 |
| 이미지 태그 <img> (0) | 2019.06.04 |
| 목록태그 <ol> , <ul> , <dl> (0) | 2019.06.04 |
2019. 10. 1. 22:52
Keyword :
셀 병합 : <colspan>세로끼리 합치기, <rowspan> 가로줄끼리 합치기,
테이블 제조 : <table>, <tr>, <td>, <th>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<hr>
<h1>table로 만드는 표</h1>
<hr>
<table border = 1>
<tr>
<td>1 cell</td>
<td>2 cell</td>
</tr>
<tr>
<td>3 cell</td>
<td>4 cell</td>
</tr>
</table>
<br><br>
<table border = 1>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<br><br>
<table border = 1>
<tr>
<th>table</th>
<td>표를 구성하는 가장 큰 태그</td>
</tr>
<tr>
<th>tr</th>
<td>줄을 구성하는 태그</td>
</tr>
<tr>
<th>th</th>
<td>제목칸을 구성하는 태그 특징(볼드체, 중앙정렬)</td>
</tr>
<tr>
<th>td</th>
<td>일반칸을 구성하는 태그</td>
</tr>
</table>
<h1>※첫줄이 제목칸인 표만들기</h1> <br><br>
<table border = 1>
<tr>
<th>번호</th>
<th>이름</th>
<th>불참</th>
</tr>
<tr>
<td>0</td>
<td>불참자없음</td>
<td> </td>
</tr>
<tr>
<td>1</td>
<td>서에번쩍</td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td>동에번쩍</td>
<td> </td>
</tr>
</table>
<br>
<hr>
<h1>셀(칸)합치기</h1>
<hr>
<table border = 1>
<tr>
<td>colspan=n</td>
<td>가로로 n개만큼 하나로 합치기</td>
</tr>
<tr>
<td>rowspan=n</td>
<td>세로로 n개만큼 하나로 합치기
</tr>
</table>
<hr>
<hr>
<table border = 1>
<tr>
<th colspan = 2>셀(칸)합치기</th>
</tr>
<tr>
<td>colspan</td>
<td>rowspan</td>
</tr>
</table>
<table border = 1>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan = "3">4</td>
</tr>
</table>
<hr>
<br><br><br><br>
<h3>가로합치기 - colspan</h3>
<table border = "1">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td colspan = "2">e</td>
<td colspan = "2">f</td>
</tr>
<tr>
<td colspan = "3"> g</td>
<td>h</td>
</tr>
</table>
<h3>세로로 합치기 - rowspan</h3>
<table border = "1">
<tr>
<td rowspan = "2"> 셀(칸) 합치는 속성 </td>
</tr>
<tr>
<td>colspan</td>
<td>rowspan</td>
</tr>
</table>
<hr>
<h2>세로로 합치기</h2>
<table border = "1">
<tr>
<td rowspan = "3">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</table>
<h2>문제. 세로로 합치기</h2>
<table border ="1">
<tr>
<td>a</td>
<td rowspan = "3">b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td rowspan = "2">e</td>
</tr>
<tr>
<td>f</td>
</tr>
</table>
<table border = "1">
<tr>
<td colspan = "2">기타사항</td>
<td> </td>
</tr>
<tr>
<td rowspan = "4">특기사항</td>
<td>지각자</td>
<td> </td>
</tr>
<tr>
<td>결석자</td>
<td> 홍길동, 길동홍, 동길홍, 길홍동</td>
</tr>
<tr>
<td>조퇴자</td>
<td> </td>
</tr>
<tr>
<td> 그 밖의 </td>
<td> -외출: <br> -휴가: <br> -지각 &조퇴: </td>
</tr>
</table>
</body>
</html>
'HTML' 카테고리의 다른 글
| [HTML/CSS] 형제 태그 선택자 +, ~ (0) | 2019.11.06 |
|---|---|
| <a>태그 / <embed>태그 (0) | 2019.06.14 |
| 이미지 태그 <img> (0) | 2019.06.04 |
| 목록태그 <ol> , <ul> , <dl> (0) | 2019.06.04 |
2019. 6. 14. 17:03
<a>태그
| 속성 | 설명 |
| href |
연결할 문서의 경로나 url 지정 #name : 동일 문서에 name으로 지정한 곳으로 이동 mailto:받는사람메일주소?subject="제목" : 메일 보낼 때의 링크 지정 기타 : 내려받을 위치 지정 |
| name | 동일 문서 내 특정 위치로 이동하는 책갈피 기능 |
| target | 링크된 내용이 열릴 대상(_blank, _parent, _self, _top) 을 지정 |
<embed>태그
| 속성 | 설명 |
| src | 웹 페이지에 삽입할 파일 경로 or URL 지정 |
| autostart | 웹 페이지를 열었을 때 사운드 파일을 자동 재생여부(True,False) |
| hidden | 미디어 플레이어를 화면에서 감출지 여부(True, False)를 지정 |
| width | 콘텐츠의 너비 지정(픽셀) |
| height | 콘텐츠의 높이 지정(픽셀) |
| loop | 파일 재생 반복 횟수(숫자) or True 무한 / False 한번만 |
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>a / embed / tag</title>
</head>
<body>
노래 재생!<br>
<embed src="https://www.youtube.com/embed/EXuF5oa0VPI" width="500" height="300" autostart="true" loop="false"/>
<br>
링크<br>
<a href ="https://www.naver.com">네이버</a>
링크<br>
<a href ="https://youtube.com">유튜브</a>
</body>
</html>https://youtu.be/EXuF5oa0VPI>동영상 url 복사 누르면 이렇게 복사가 되는데
그것 말고 소스 복사를 누르고 주소만 따로 복사해서 쓰면 연결거부가 안뜸
'HTML' 카테고리의 다른 글
| [HTML/CSS] 형제 태그 선택자 +, ~ (0) | 2019.11.06 |
|---|---|
| <table> 태그 (0) | 2019.10.01 |
| 이미지 태그 <img> (0) | 2019.06.04 |
| 목록태그 <ol> , <ul> , <dl> (0) | 2019.06.04 |
2019. 6. 4. 03:52
경로 지정
동일 폴더 : 파일이름.확장자
상위 폴더 : ../파일이름.확장자
하위 폴더 : 폴더이름/파일이름.확장자
<img> 태그
http://웹서버주소(ip):8080/파일이름.확장자
태그 속성
| 속성 | 설명 |
| src | 경로 or URL |
| alt | 이미지가 안나왔을 때 대신 나올 글 |
| align | 정렬 (left, right, top, middle, bottom) |
| border | 이미지 테두리(숫자) 지정 , 0일때 테두리x |
| height | 이미지 높이 지정 |
| width | 이미지 너비 지정 |
| hspace | 좌우 여백 |
| vspace | 상하 여백 |
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<dl>
<dt>사진</dt>
<dd>
<img width="300px" height="300px"
src="qwer.jpg"/>
</dd>
</dl>
<dl>
<dt>사진</dt>
<dd>
<img width="300px" height="300px"
src="http://localhost:8080/MakeWeb/qwer.jpg"/>
</dd>
</dl>
<dl>
<dt>사진</dt>
<dd>
<img width="300px" height="300px"
src="https://get.pxhere.com/photo/mac-space-galaxy-nebula-outer-space-universe-fantasy-astronomical-object-irxsiempre-741629.jpg"/>
</dd>
</dl>
</body>
</html>'HTML' 카테고리의 다른 글
| [HTML/CSS] 형제 태그 선택자 +, ~ (0) | 2019.11.06 |
|---|---|
| <table> 태그 (0) | 2019.10.01 |
| <a>태그 / <embed>태그 (0) | 2019.06.14 |
| 목록태그 <ol> , <ul> , <dl> (0) | 2019.06.04 |
2019. 6. 4. 02:43
<ol>태그
Ordered List의 약자로 순번이 있는 목록으로 정렬할 때 사용!
목록의 항목을 표시하는 <li> 태그와 함께 사용!
<ol>태그
| 속성 | 설명 |
| type | 각각의 목록 앞에 붙는 표식(A,a, I, i, 1) |
| start | 시작 번호를 지정 |
<ul>태그
Unordered List 약자로 순번이 없는 목록!
<li>태그와 함께 사용
| 속성 | 설명 |
| type | 각각의 목록 앞에 붙는 표식(disc, circle, square) 지정, 기본값은 disc |
<dl> 태그
Dictionary List 약자 순번이 없는 목록!
<li> 대신 <dt> 와 <dd> 사용
<html>
<head>
<title> HTML </title>
</head>
<body>
<ol type="a" start="1">
<li> 아침 </li>
<li> 점심 </li>
<li> 저녁 </li>
</ol>
<br/><br/>
<ul type="disc">
<li> 아침 </li>
<li> 점심 </li>
<li> 저녁 </li>
</ul>
<ul type="circle">
<li> 아침 </li>
<li> 점심 </li>
<li> 저녁 </li>
</ul>
<ul type="square">
<li> 아침 </li>
<li> 점심 </li>
<li> 저녁 </li>
</ul>
<dl>
<dt>아침밥</dt>
<dd>삼겹살!</dd>
<dt>점심밥</dt>
<dd>탕수육!</dt>
<dt> 저녁밥 </dt>
<dd> 라면! </dt>
</dl>
</body>
</html>'HTML' 카테고리의 다른 글
| [HTML/CSS] 형제 태그 선택자 +, ~ (0) | 2019.11.06 |
|---|---|
| <table> 태그 (0) | 2019.10.01 |
| <a>태그 / <embed>태그 (0) | 2019.06.14 |
| 이미지 태그 <img> (0) | 2019.06.04 |