💡Before/After 가상클래스 예제
- Content attr Hover Effect
<body>
<!--속성 = property = attribute-->
<div class="gnb">
<a href="#none" data-text="CodingWorks Online Class"></a> <!--data-text는 사용자 정의 속성이다.일반적으로 data-로 시작함.-->
</div>
</body>body{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
line-height: 1.5rem;
margin: 0;
font-weight: 300;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
a{
text-decoration: none;
}
.gnb a{
width: 300px;
display: block;
height: 40px;
position: relative; /*부모요소*/
overflow: hidden;
}
.gnb a:before,
.gnb a:after {
content: attr(data-text); /*before, after에는 무조건 content를 포함시켜야 한다. 여기서 attr 사용.*/
position: absolute;
width: inherit;
height: inherit;
text-align: center;
line-height: 40px;
color: #fff;
text-transform: uppercase;
transition: 0.3s; /*항상 움직이는 요소에 transition값을 준다.*/
}
.gnb a:before{
background-color: crimson;
top:0; /*css 에서 0을 쓸 때는 단위를 생략해도 된다.*/
}
.gnb a:after{
background-color: dodgerblue;
top: 100%; /*부모요소의 height와 같음.(100%)*/
}
.gnb a:hover:before {
top: -100%; /*부모요소의 상단 끝부분부터 시작한다는 것이다.*/
}
.gnb a:hover:after {
top:0;
}
/*사실을 gnb before와 after이 함께 위로 올라가는 것이지만 overflow:hidden을 사용하면 이들이 교체되는 것처럼 보인다/*/
💡순서 체크 가상클래스 예제
- Personal profile page
<body>
<div class="container">
<div class="card">
<img src="./crew-01.jpg" alt="person1">
<div class="content">
<h2>Andrew Yu <span>Developer</span></h2> <!--h2안에 span태그를 넣고 display-block을 해주면 줄을 바꿀 수 있음.-->
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, ea.
</p>
<class class="sns">
<a href="#none"> <i class="fa fa-facebook"></i> </a>
<a href="#none"> <i class="fa fa-twitter"></i> </a>
<a href="#none"> <i class="fa fa-instagram"></i> </a>
</class>
</div>
</div>
<div class="card">
<img src="./crew-02.jpg" alt="person2">
<div class="content">
<h2>Andrew Yu <span>Designer</span></h2> <!--h2안에 span태그를 넣고 display-block을 해주면 줄을 바꿀 수 있음.-->
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, ea.
</p>
<class class="sns">
<a href="#none"> <i class="fa fa-facebook"></i> </a>
<a href="#none"> <i class="fa fa-twitter"></i> </a>
<a href="#none"> <i class="fa fa-instagram"></i> </a>
</class>
</div>
</div>
<div class="card">
<img src="./crew-03.jpg" alt="person3">
<div class="content">
<h2>Andrew Yu <span>Planner</span></h2> <!--h2안에 span태그를 넣고 display-block을 해주면 줄을 바꿀 수 있음.-->
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, ea.
</p>
<class class="sns">
<a href="#none"> <i class="fa fa-facebook"></i> </a>
<a href="#none"> <i class="fa fa-twitter"></i> </a>
<a href="#none"> <i class="fa fa-instagram"></i> </a>
</class>
</div>
</div>
</div>
</body>/* Google Web Font */
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
/* Fontawesome 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
body{
font-family: 'Raleway', sans-serif;
line-height: 1.5em;
margin: 0;
background-color: #fff;;
}
a{
text-decoration: none;
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.card{
margin:10px;
position: relative;
width: 300px;
height: 400px;
overflow: hidden;
transition: 0.5s;
border-radius: 5px;
}
.content{
width: inherit;
height: inherit;
position: absolute; /*inline-block이 되므로 width, height 지정해주기*/
top:100%; /*부모요소의 끝점부터 자식요소를 시작한다는 의미*/
left:0; /*부모요소의 왼쪽에 딱 맞게 위치.*/
padding:20px; /*여백*/
box-sizing: border-box;
color:#fff;
text-align: center;
padding-top:150px;
transition: 0.5s;
}
.content h2{
font-size: 30px;
}
.content h2 span{
display: block;
font-size: 14px;
color: gold;
margin-top: 10px;
}
.card:nth-child(1) .content{
background: linear-gradient(to top, crimson, transparent);
}
.card:nth-child(2) .content{
background: linear-gradient(to top, dodgerblue, transparent);
}
.card:nth-child(3) .content{
background: linear-gradient(to top, yellowgreen, transparent);
}
.card:hover .content{
top:0;
}
.card:hover {
transform: translateY(-20px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.21);
}
.sns a {
color: #fff;
border: 1px solid #fff;
width: 20px;height: 20px;
display: inline-block;
border-radius: 50%;
font-size: 13px;
text-align: center;
line-height: 20px;
}
- Searching Engine
<body>
<form action="" class="search">
<h1>What are you looking for?</h1>
<input type="text" placeholder="검색 또는 URL입력">
<input type="submit" value="Search">
</form>
</body>/* Google Web Font */
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap');
body {
font-family: 'Montserrat', sans-serif;
line-height: 1.5em;
margin: 0;
font-weight: 300;
/*background-image: url(images/snow-photo.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed; -> 배경이미지를 넣었을 때 가로,세로 비율을 무시하고 화면에 가득 차게 해줌.*/
background: url(./snow-photo.jpg) no-repeat center center fixed;
}
body:before {
content: '';
position: absolute;
background-color: rgba(0, 0, 0, 0.65);
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
a {
text-decoration: none;
}
.search {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.search h1 {
color: #fff;
text-align: center;
font-weight: normal;
margin-bottom: 30px;
font-size: 38px;
font-weight: 300;
}
.search input[type=text],
.search input[type=submit] {
padding: 20px;
border: none;
outline: none;
box-sizing: border-box;
font-size: 18px;
}
.search input[type=text] {
width: 350px;
margin-right: -6px;
border-radius: 40px 0 0 40px;
padding-left: 40px;
}
.search input[type=submit] {
width: 150px;
border-radius: 0 40px 40px 0;
cursor: pointer;
background-color: orange;
color: #fff;
}
.search input[type=submit]:hover {
background-color: darkgoldenrod;
}
.search input[type=text]::placeholder {
font-size: 20px;
font-style: italic;
}
'3-2기 스터디 > HTML+CSS+JS 실전 퍼블리싱' 카테고리의 다른 글
| [5주차] 확장선택자, 콘텐츠 slider (0) | 2022.05.22 |
|---|---|
| [4주차] before after 가상클래스와 순서 체크 가상클래스 (0) | 2022.05.21 |
| [3주차] CSS 키프레임 애니메이션과 가상클래스 hover (0) | 2022.05.08 |
| [2주차] jQuery Basics & Method (0) | 2022.05.05 |
| [1주차] Basic HTML & CSS Overview (0) | 2022.05.05 |
댓글