♥ 코딩(Coding)/심화
( 공부복습 ) 선택자심화응용
디자이너 윈썸
2021. 11. 18. 19:03
코딩작업해보기
<!-- header -->
<div class="container" id="header">
<a href="#">Detml</a>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Account</a></li>
<li class="btn"><a href="#">Login</a></li>
</ul>
</div>
<!-- //header -->
<!-- mainTitle -->
<div id="main">
<div class="container mtb100">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br />
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,<br />
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
<div class="bg"></div>
</div>
<!-- //mainTitle -->
<!-- info -->
<div id="info">
<div class="container">
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical
Latin literature from 45 BC,
making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in
Virginia, looked up one of the
more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the
word in classical literature,
discovered the undoubtable source.<br /><br /><br />
Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
Good and Evil) by Cicero, written in 45 BC.
This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of
Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
</p>
<p>
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text,
and a search for 'lorem ipsum'
will uncover many web sites still in their infancy. Various versions have evolved over the years,
sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
</div>
</div>
<!-- //info -->
*{
padding: 0;
margin: 0;
}
a{
text-decoration: none;
color: #333;
font-family: 'Playfair Display', serif;
}
ul,ol{
list-style: none;
}
img{
display: block;
}
body{
font-size: 18px;
color: #333;
font-family: 'Playfair Display', serif;
}
/* 초기 세팅값 */
.container{
width: 63%;
margin: auto;
overflow: hidden;
}
.mtb100{
margin-top: 100px;
margin-bottom: 100px;
}
/* header */
#header{
height: 100px;
}
#header>a{
float: left;
font-size: 28px;
font-weight: 700;
line-height: 100px;
font-style: italic;
}
#header ul{
float: right;
line-height: 100px;
}
#header ul li{
float: left;
margin-left: 40px;
}
#header ul li:last-child{
border: 1px solid #999;
font-size: 14px;
height: 32px;
line-height: 32px;
/*메뉴행간 : 100*/
margin: 33px 0;
/* h:100-h:32-b(border 1px이지만 위아래이므로 2px임)2=66/2 =33 */
margin-left: 60px;
padding: 0 15px;
}
#header ul li:not(.btn){
/*.btn을 제외한 굵게 적용*/
font-weight: 800;
}
/* main */
#main p{
font-size: 20px;
line-height: 40px;
}
.bg{
width: 100%;
height: 800px;
background-image: url(../img/bg.jpg);
/* 상위경로 ../ */
background-size: cover;
background-attachment: fixed;
/* 고정되는 배경화면 */
}
/* info */
#info{
margin-top:100px;
margin-bottom: 200px;
}
#info p{
width: 50%;
float: left;
}
/* 형태구조선택자 - 부모내의 형제관계 태그로 구분 */
#info p:nth-of-type(2){
width: 40%;
float: right;
}
/* 문자선택자 */
#info p:nth-of-type(1)::first-letter{
font-size: 70px;
float: left;
text-transform: uppercase;
/*글자의 형태 변형 속성*/
padding-right: 10px;
}
/* 가상선택자 */
#info p:nth-of-type(2)::after{
content: 'hajeong';
font-size: 40px;
display: block;
margin-top: 120px;
float: right;
font-family: 'Ephesis', cursive;
}