링크를 버튼으로 만들기.
기본 링크 . 파랑 빨강 class='btn'추가로 버튼화. class='btn blue'색깔 부여 .btn{ }으로 버튼 클래스 선택. .btn.blue{}로 버튼에다가 파란색이 것에 대해 선택.색깔에 대해서 에디터에서 빠른편집을 누르면 색을 상세지정 할 수 있다.
<!DOCTYPE html><html > <head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gugi&display=swap" rel="stylesheet">
<meta charset="utf-8"> <title></title> <style>
.btn{
text-decoration:none;
font-size: 2rem;
color:white;
//위치선정.
padding: 10px 20px 10px 20px;
margin: 20px;
display: inline-block;
border-radius: 10px;
//장면전환 효과.
transition:all 0.1s;
//글자 음여
text-shadow: 0px 2px black;
//웹 폰트 적용.
font-family: 'Gugi', cursive;
}
.btn:active{
transform: translateY(3px);
//클릭시 아래로 왔다갔다.
}
.btn.blue{
background-color: #1f75d9;
//그림자 역할 하는 어두운 색.
border-bottom:5px solid #black;
}
.btn.blue:active{
//눌렸을때 그림자 길이도 줄이면 정말 눌린 듯한 기분이 듬.
border-bottom:2px solid #165195;
}
.btn.red{
background-color: red;
//그림자 역할 하는 어두운 색.
border-bottom: 5px solid #black;
}
.btn.red:active{
//눌렸을때 그림자 길이도 줄이면 정말 눌린 듯한 기분이 듬.
border-bottom:2px solid #black;
} </style>
</head> <body>
<a class='btn blue' href="#blue"> 파랑</a>
<a class='btn red' href="#red"> 빨강</a>
</body></html>
이렇게 하면 링크를 버튼으로 표현할 수 있다.
섬네일
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
.thumbnail{
margin:20px;
width:150px;
height:100px;
background-size: cover;
background-repeat; no-repeat;
background-position: center center;
border:5px solid gray;
}
.thumbnail.circle{
border-radius: 100%;
} </style>
</head>
<body>
<div class="thumbnail" style="background-image:url('image/fire.jpg')"></div>
<div class="thumbnail round" style="background-image:url('image/fire.jpg')"> </div>
<div class="thumbnail circle" style="background-image:url('image/fire.jpg')"></div>
<img src="image/fire.jpg" alt="">
</body></html>
Masonry Layout
벽돌을 쌓는 것처럼 배치하는 것. (mamsonry--벽돌,석조) 구성요소를 쌓아 나간다. 대표적 서비스 -- pinterest css-- multi column 칼럼을 나눠서 조각조각 정보를 나눔. .column {
column-count: 4;
/* 화면이 n개로 쪼개져서 보임.width와 같이 사용시 최대 칼럼의 수를 제어 할 수 있다.*/
text-align: justify;
/*글자가 들쑥날쑥 한게 아니라 옆으로 정렬.;*/
column-width: 200px;
/*칼럼의 폭을 200픽셀로 지정해서 자동으로 단을 나눠주기.-- 브라우저 크기에 맞춰서 칼럼수를 자동으로 조정함.*/
column-gap:30px;
/*칼럼 사이의 간격.*/
column-rule-style:solid;
/*칼럼 사이에 솔리드한 단선 생성. dotted 라고 하면 점선.dashed라고 하면 절취선이 된다.*/
column-rule-width: 5px;/*단선의 폭.*/
column-rule-color: red;/*단선의 색.*/
}
h1{ column-span: all; /*제목이 칼럼의 구분을 뛰어넘게 만들기.*/}
</style> </head> <body>
<div class="column">
<h1>아이스크림</h1>
왕초보