728x90
728x90
- HTML Colors CSS <a> tag 의사 클래스
- a: link -> 링크 첫 방문 시 상태
- a: visited - 링크 방문 후 링크 상태
- a: hover -> 마우스 클릭 전
- a: active -> 마우스 클릭 후
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: beige;}
bdo {color: cornflowerblue;}
/* 방문 전 & 방문 후 */
a:link, a:visited
{
color: darkcyan;
background-color: gainsboro;
border: 2px solid tomato;
text-decoration: none;
text-align: center;
}
/* 마우스 올려놓을 때 */
a:hover
{
color: slateblue;
background-color: grey;
text-decoration: underline;
}/* 마우스 클릭했을 때*/
a:active
{
color:gold;
background-color: antiquewhite;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="https://monynony0203.tistory.com/31?category=1044186" target="_blank">click</a>
</body>
</html>
- HTML Bookmarks
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="#H1">open chapter 2</a>
<br>
<a href="#H2">open chapter 5</a>
<h2>Chapter 1</h2>
<p> this chapter is</p>
<h2 id="H1">Chapter 2</h2>
<p> this chapter is</p>
<h2>Chapter 3</h2>
<p> this chapter is</p>
<h2>Chapter 4</h2>
<p> this chapter is</p>
<h2 id="H2">Chapter 5</h2>
<p> this chapter is</p>
<h2>Chapter 6</h2>
<p> this chapter is</p>
<h2>Chapter 7</h2>
<p> this chapter is</p>
</body>
</html>
- HTML Image Height, Width
- Inline CSS
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbz0Jbp%2FbtrqCa3BmJ7%2FANZB9PT5x0uF5cxzQA7o50%2Fimg.jpg"
style="width: 300px; height: 200px;">
<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbz0Jbp%2FbtrqCa3BmJ7%2FANZB9PT5x0uF5cxzQA7o50%2Fimg.jpg"
width="300" height="200">
</body>
</html>
- Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
img
{
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbz0Jbp%2FbtrqCa3BmJ7%2FANZB9PT5x0uF5cxzQA7o50%2Fimg.jpg"
alt="you can't watch this picture">
</body>
</html>
- Image Floating
<!DOCTYPE html>
<html>
<head>
<style>
img
{
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<p>
<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbz0Jbp%2FbtrqCa3BmJ7%2FANZB9PT5x0uF5cxzQA7o50%2Fimg.jpg"
alt="you can't watch this picture" style="float:left"> 울면 안돼
</p>
<br><br><br><br><br><br><br><br><br><br><br><br>
<p>
<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbz0Jbp%2FbtrqCa3BmJ7%2FANZB9PT5x0uF5cxzQA7o50%2Fimg.jpg"
alt="you can't watch this picture" style="float:right"> 울면 안돼
</p>
</body>
</html>
728x90
'Programming Language > HTML | CSS | JS' 카테고리의 다른 글
| HTML 9일차 공부 <picture> Tag (0) | 2022.01.20 |
|---|---|
| HTML 8일차 공부 (0) | 2022.01.20 |
| HTML 6일차 공부 (0) | 2022.01.13 |
| HTML 5일차 공부 (0) | 2022.01.12 |
| HTML 4일차 공부 (0) | 2022.01.10 |
