보통 html의 body에 쭈욱 입력을 해 놓으면
글 내용의 경우 우측으로 나열되고
그 외에 블록문은 전부 아래로 나열이 된다.
블록문을 다른 방향으로 나열하기 위해 사용하는 style 문이 float이다.
다음 예제를 확인해보자
<html>
<head>
<meta charset="UTF-8">
<title>Float</title>
<link rel="icon" href="img/btn.png">
<style>
div{
width: 50px;
height: 25px;
border: 3px solid yellowgreen;
margin: 5px;
/*정렬 기준을 왼쪽으로 block -> inline*/
float:left;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
원래 아래로 나열되는 것이 위와 같이 나열되었다.
다음으로는 link
글자에 링크를 거는 a태그의 속성인데 링크에 마우스를 올리거나 누르는 순간이나 초기 상태 등을 설정한다.
link, visited, hover(예전에 이미지에 한번 썻었다.), active를 사용해 설명한다.
<html>
<head>
<meta charset="UTF-8">
<title>링크</title>
<link rel="icon" href="img/btn.png">
<style>
/*
링크 상태
link : 링크걸린 초기 상태
visited : 한번 클릭된 링크 상태
hover : 마우스가 올라간 상태
active : 누르는 순간
*/
a:link{
text-decoration: none;
}
a:visited{
/*
방문했던 링크
*/
text-decoration: none;
color: orange;
}
a:hover{
/*
마우스 올렸을 때
색깔 파랑
폰트 굵게
밑줄
*/
color:blue;
font-weight: 600;
text-decoration: underline;
}
a:active{
/*
클릭했을 때
*/
color: green;
text-decoration: none;
}
</style>
</head>
<body>
<a href="http://www.w3schools.com/css/" target="blank">
CSS TUTORILAS
</a>
</body>
</html>
각각의 결과는 아래와 같이 나온다.
첫번째가 평상시
두번째가 마우스를 올렸을 때
세번째가 클릭했을 때
네번째가 방문 했던 기록이 있을 때
실제로 웹사이트를 볼 때 경험해본 기능일 것이다.
이번에는 예전에 [HTML]02-06.iframe, 다른 사이트 참조 + 예제(https://qdgbjsdnb.tistory.com/134) 글에서 다뤘던 예제를 이용해서
링크의 '_'를 없애고
마우스를 올렸을 때 테두리가 생기게 해보자.
<!--
1.이미지에 해당 사이트 링크를 걸것
2.마우스 오버 했을때 테두리가 가도록 수정
3.링크의 밑줄 제거
-->
<style>
img{
border: 1px solid white;
}
img:hover{
border: 1px solid black;
}
a:link{
text-decoration: none;
}
</style>
<a href="http://www.daum.net"target="_blank">
<img src="img/daum.png" alt="다음 이미지" width="150" height="70"/>
</a>
<a href="http://www.google.com"target="_blank">
<img src="img/google.png" alt="구글 이미지" width="150" height="70"/>
</a>
<a href="http://www.msn.com"target="_blank">
<img src="img/msn.jpg" alt="MSN 이미지" width="150" height="70"/>
</a>
<a href="http://www.nate.com"target="_blank">
<img src="img/nate.png" alt="NATE 이미지" width="180" height="70"/>
</a>
<a href="http://www.naver.com"target="_blank">
<img src="img/naver.png" alt="네이버 이미지" width="120" height="70"/>
</a>
따로 html 틀을 안잡아도 작동이 되긴 한다.
위의 코드를 실행하면 전과 다르게 이미지 우측 아래 밑줄이 사라지고 마우스를 올렸을 때 박스가 생긴다.
text-decoration: none;를 통해서 밑줄이 사라지게 된다.
navi와 footer을 합친 iframe 예제를 확인해봐도 똑같이 적용되어 밑줄이 사라져 깔끔하게 보인다.
'HTML, CSS, JavaScript, jQuery > 03.CSS' 카테고리의 다른 글
| [CSS]03-07.display, visibility, 요소 숨기기 / 보이기 / 삭제 / 블록 / 인라인 (0) | 2018.10.17 |
|---|---|
| [CSS]03-06.배운 내용 활용해서 사이트의 메뉴 바 만들기 (0) | 2018.10.17 |
| [CSS]03-03.background, 배경화면 (0) | 2018.10.17 |
| [CSS]03-02.Border, 테두리 선 (0) | 2018.10.16 |
| [CSS]03-01.CSS, Style, 선택자 (0) | 2018.10.16 |