<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>portpolio</title>
<link rel="stylesheet" href="/portpolio/css/main.css">
<link rel="stylesheet" href="/portpolio/css/reset.css">
<link rel="stylesheet" href="/portpolio/css/all.min.css">
</head>
<body>
<!-- 위 핸드폰 나오는 소개글 -->
<div class="container">
<div class="title">
<h2>Landing Page For Apps</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod ab temporibus eius illum ipsam, nostrum,
</p>
<button class="btn-gray btn-show">Show More</button>
</div>
<div class="phone-img">
< img src="/portpolio/img/phone.png" alt="">
</div>
</div>
<div class="introduction">
<h2>It is the perfact theme for your next Project!</h2>
<p> lorem ipsum doloar sit amet, con</p>
</div>
</body>
</html>
/* common css*/
.btn-gray{
background-color: #444445;
color: white;
border-radius: 5px;
}
.container-wrap{
width: 90%;
margin: auto;
}
/* main css */
.container{
display: flex;
background-image: linear-gradient(#4a8cd6,#4d6ac5);
}
.title{
width: 100%;
height: 300px;
}
.title h2{
margin-top: 50px;
}
.title h2,p {
color: white;
padding:10px 0 10px 60px;
}
.btn-show{
border-radius: 5px;
padding: 10px;
margin-left: 60px;
}
.phone-img img {
width: 50%;
position: relative;
left: 150px;
top: 50px;
}
이 상태에서 클래스 introduction에 있는 p태그의 컬러가 왜 하얀색으로 적용되는건가요?
저는 title클래스에 있는 h2와 p태그만 css를 줬는데 아래에 까지 적용이 됩니다 선생님 ㅠㅠ
