- colgroup
뒤에 나오는 컬럼에 적용할 스타일을 해당 태그에서 미리 적용할 수 있다.
<table>
<colgroup>
<col style ="background deepskyblue;">
<col>
<col>
<col>
</colgroup>
</table>테이블의 첫 번째 열들은 전부 deepskyblue 배경색으로 설정한다.
- 페이지 책갈피
현재 페이지에서 이동하고 싶은 부분으로 이동하는 법
요소의 id 속성을 이용해서 간단한 책갈피를 만들 수 있다.
책갈피를 통해 가고싶은 위치 요소에 id속성으로 특정한 문자열 값을 부여해주면
다른 <a> 태그에서 href에 가고 싶은 곳의 "#아이디명"으로 작성해 주면 클릭 시 그곳으로 이동한다.
<html>
<head>
<meta charset="UTF-8">
<title>1_bookmark</title>
</head>
<body>
<h1>페이지 책갈피</h1>
<p>
<a href="#book1">여섯번째 신호등으로 이동!</a>
</p>
<p>
<a href = "#book2">열세번째 신호등으로 이동!</a>
</p>
<h3>첫번째 신호등</h3>
<p>
붉은색 푸른색<br>
그 사이 3초 그 짧은 시간<br>
노란색 빛을 내는<br>
저기 저 신호등이<br>
내 머릿속을 텅 비워버려<br>
내가 빠른 지도<br>
느린지도 모르겠어<br>
그저 눈앞이 샛노랄 뿐이야<br>
</p>
<h3>두번째 신호등</h3>
<p>
붉은색 푸른색<br>
그 사이 3초 그 짧은 시간<br>
노란색 빛을 내는<br>
저기 저 신호등이<br>
내 머릿속을 텅 비워버려<br>
내가 빠른 지도<br>
느린지도 모르겠어<br>
그저 눈앞이 샛노랄 뿐이야<br>
</p>
<h3>세번째 신호등</h3>
<p>
붉은색 푸른색<br>
그 사이 3초 그 짧은 시간<br>
노란색 빛을 내는<br>
저기 저 신호등이<br>
내 머릿속을 텅 비워버려<br>
내가 빠른 지도<br>
느린지도 모르겠어<br>
그저 눈앞이 샛노랄 뿐이야<br>
</p>
<h3>네번째 신호등</h3>
<p>
붉은색 푸른색<br>
그 사이 3초 그 짧은 시간<br>
노란색 빛을 내는<br>
저기 저 신호등이<br>
내 머릿속을 텅 비워버려<br>
내가 빠른 지도<br>
느린지도 모르겠어<br>
그저 눈앞이 샛노랄 뿐이야<br>
</p>
<h3>다섯번째 신호등</h3>
<p>
붉은색 푸른색<br>
그 사이 3초 그 짧은 시간<br>
노란색 빛을 내는<br>
저기 저 신호등이<br>
내 머릿속을 텅 비워버려<br>
내가 빠른 지도<br>
느린지도 모르겠어<br>
그저 눈앞이 샛노랄 뿐이야<br>
</p>
<h3 id = "book1">여섯번째 신호등</h3>
<p>
붉은색 푸른색<br>
그 사이 3초 그 짧은 시간<br>
노란색 빛을 내는<br>
저기 저 신호등이<br>
내 머릿속을 텅 비워버려<br>
내가 빠른 지도<br>
느린지도 모르겠어<br>
그저 눈앞이 샛노랄 뿐이야<br>
</p>
<h3>일곱번째 신호등</h3>
<p>
붉은색 푸른색<br>
그 사이 3초 그 짧은 시간<br>
노란색 빛을 내는<br>
저기 저 신호등이<br>
내 머릿속을 텅 비워버려<br>
내가 빠른 지도<br>
느린지도 모르겠어<br>
그저 눈앞이 샛노랄 뿐이야<br>
</p>
<h3>여덟번째 신호등</h3>
<p>
붉은색 푸른색<br>
그 사이 3초 그 짧은 시간<br>
노란색 빛을 내는<br>
저기 저 신호등이<br>
내 머릿속을 텅 비워버려<br>
내가 빠른 지도<br>
느린지도 모르겠어<br>
그저 눈앞이 샛노랄 뿐이야<br>
</p>
<h3>아홉번째 신호등</h3>
<p>
붉은색 푸른색<br>
그 사이 3초 그 짧은 시간<br>
노란색 빛을 내는<br>
저기 저 신호등이<br>
내 머릿속을 텅 비워버려<br>
내가 빠른 지도<br>
느린지도 모르겠어<br>
그저 눈앞이 샛노랄 뿐이야<br>
</p>
<h3>열번째 신호등</h3>
<p>
붉은색 푸른색<br>
그 사이 3초 그 짧은 시간<br>
노란색 빛을 내는<br>
저기 저 신호등이<br>
내 머릿속을 텅 비워버려<br>
내가 빠른 지도<br>
느린지도 모르겠어<br>
그저 눈앞이 샛노랄 뿐이야<br>
</p>
<h3>열한번째 신호등</h3>
<p>
붉은색 푸른색<br>
그 사이 3초 그 짧은 시간<br>
노란색 빛을 내는<br>
저기 저 신호등이<br>
내 머릿속을 텅 비워버려<br>
내가 빠른 지도<br>
느린지도 모르겠어<br>
그저 눈앞이 샛노랄 뿐이야<br>
</p>
<h3>열두번째 신호등</h3>
<p>
붉은색 푸른색<br>
그 사이 3초 그 짧은 시간<br>
노란색 빛을 내는<br>
저기 저 신호등이<br>
내 머릿속을 텅 비워버려<br>
내가 빠른 지도<br>
느린지도 모르겠어<br>
그저 눈앞이 샛노랄 뿐이야<br>
</p>
<h3 id = "book2">열세번째 신호등</h3>
<p>
붉은색 푸른색<br>
그 사이 3초 그 짧은 시간<br>
노란색 빛을 내는<br>
저기 저 신호등이<br>
내 머릿속을 텅 비워버려<br>
내가 빠른 지도<br>
느린지도 모르겠어<br>
그저 눈앞이 샛노랄 뿐이야<br>
</p>
<h3>열네번째 신호등</h3>
<p>
붉은색 푸른색<br>
그 사이 3초 그 짧은 시간<br>
노란색 빛을 내는<br>
저기 저 신호등이<br>
내 머릿속을 텅 비워버려<br>
내가 빠른 지도<br>
느린지도 모르겠어<br>
그저 눈앞이 샛노랄 뿐이야<br>
</p>
<h3>열다섯번째 신호등</h3>
<p>
붉은색 푸른색<br>
그 사이 3초 그 짧은 시간<br>
노란색 빛을 내는<br>
저기 저 신호등이<br>
내 머릿속을 텅 비워버려<br>
내가 빠른 지도<br>
느린지도 모르겠어<br>
그저 눈앞이 샛노랄 뿐이야<br>
</p>
</body>
</html>Ctrl 키 누르고 가고싶은 bookmark를 누르면 이동한다.
결과 2는 결과 1의 "여섯 번째 신호등으로 이동하기!" 누르면 이동하는 것을 볼 수 있다.
- HTML 요소
- 블록 레벨 요소
웹 페이지 상에 블록으로 만들어지는 요소
코드상에 한 줄로 이어서 써도 앞 뒤 요소 사이에 새로운 줄을 만들어 준다.
display 속성 값이 block인 요소는 해당 라인 전체를 차지한다.
스타일을 임의로 부여하면 이어서 표현이 가능하다.
p태그, h1~h6 태그, ul 태그, ol 태그, div 태그
- 인라인 요소
블록레벨 요소 내에 포함되어 있다.
새로운 줄을 만들지 않고 작성한 그 단락 내에 표현된다.
display 속성값이 inline인 요소는 해당 라인 전체가 아닌 안에 담긴 내용만큼 차지한다.
스타일을 임의로 부여하면 다음 줄에서 시작하게 표현이 가능하다.
a태그, img태그, span 태그
블록 요소와 인라인 요소 차이 확인해보기!
<html>
<head>
<meta charset="UTF-8">
<title>2_display</title>
<style>
div{
height:150px;
}
span {
height:150px;
}
</style>
</head>
<body>
<h1>div와 span의 차이</h1>
<!-- hr태그는 가로줄 그어지는 태그 -->
<div>☆ div 태그 ☆</div> 입니다.<hr>
<!-- div : 블록요소 -->
<span>★span 태그★</span> 입니다.<hr>
<!-- span : 인라인 요소 -->
</body>
</html>
div 태그 사용해보기!
<html>
<head>
<meta charset="UTF-8">
<title>3_div1</title>
</head>
<body>
<div style="color: blue;">여기는 div1입니다.</div>
<div style="background: deeppink; width: 500px; float:left; ">
여기는 div2입니다.
</div>
<div style="background: deepskyblue; width: 500px; float:right;">
여기는 div3입니다.
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>4_div2</title>
</head>
<style>
div{
width:320px;
border:2px solid red;
padding:10px;
}
img {
float:left;
border: 2px dotted blue;
width: 150px;
height: 150px;
margine-right:10px;
}
</style>
<body>
<div>
<img src = "https://linked2ev.github.io/assets//img/jsp-logo.png" >
자바 서버 페이지는 HTML내에 자바 코드를 삽입하여 웹 서버에서 동적으로 웹 페이지를 생성하여 웹 브라우저에 돌려주는 서버 사이드 스크립트 언어이다. Java EE 스펙 중 일부로 웹 애플리케이션 서버에서 동작한다.
</div>
</body>
</html>
'WEB > HTML,CSS' 카테고리의 다른 글
| DAY 09 : progress, 시맨틱 태그 (0) | 2022.01.20 |
|---|---|
| DAY 08 : iframe, form 태그, input 태그 (0) | 2022.01.19 |
| DAY 06 : 테이블, 병합, 캡션, thead, tbody, tfoot (0) | 2022.01.17 |
| DAY 05 : void 요소, 이미지 태그, 하이퍼 링크 (2) | 2022.01.13 |
| DAY 04 : 서식 태그, 리스트 태그 (0) | 2022.01.12 |