Daily coding
CSS : Anchor 태그와 속성들 본문
a { } : 링크와 관련된 속성 설정할 수 있다
- text-decoration : none ----> 링크의 밑줄 없애기
- color : 글자색, background-color: 배경색 등..
- transition : css 속성의 변화 속도 설정하기
a:link {} : 클릭 전의 링크의 속성 설정하기
a:visited {} : 방문 후의 링크의 상태 설정하기
a:hover {} : 링크에 마우스를 올렸을 때 상태 설정하기
a:active {} : 링크를 클릭 했을 때 상태 설정하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
color : blue;
text-align: center;
}
h1{
color : #ff0000;
text-decoration: overline; /* 텍스트에 줄 긋기 */
}
p{
color: #ffcc00;
}
p.ex{
color: rgb(0,255,0); /* 범위: 0~255 */
text-align: rigth;
text-decoration: line-through;
}
a{
/* 링크의 라인 없애기 */
text-decoration: none;
}
a:link{
/* 링크 클릭할 때의 색 바꾸기 */
color:#ff0000;
}
a:visited {
/* 방문한 사이트 색 바꾸기 */
color:#ff00f0;
}
a:hover{
/* 링크에 마우스올렸을 때 색 바꾸기 */
color: #ffff00;
background-color: #000000;
}
a:active {
/* 링크 클릭했을 때 색 바꾸기 */
color: rgb(255,255,255);
}
p.serif{
font-family: "Times New Roman"; /* 폰트 바꾸기 */
font-style: italic;
font-size: 1.5em; /* 픽셀로 했을 때 16px정도 */
color: red;
}
</style>
</head>
<body>
<h1>[종합]"뒷담화 이간질…드레스도 뺏겨" </h1>
<p>"뒷담화 이간질…드레스도 뺏겨"</p>
<p class="ex">"뒷담화 이간질…드레스도 뺏겨"</p>
<a href="http://www.naver.com" target="_blank">Naver 사이트로 이동</a><-클릭
<a href="http://www.google.com" target="_blank">Google 사이트로 이동</a><-클릭
<p class="serif">Welcome to my world. I can do it</p>
</body>
</html>'Front-end > Client' 카테고리의 다른 글
| CSS : 테이블 스타일 (0) | 2020.01.10 |
|---|---|
| CSS : list 스타일과 list-style-image 설정 (0) | 2020.01.09 |
| CSS : Java Script에서 CSS적용하기 (0) | 2020.01.09 |
| CSS : text 정렬 및 다양한 attribute 들 (0) | 2020.01.09 |
| CSS : text size 의 단위들 (0) | 2020.01.09 |
'Front-end/Client' Related Articles
more
