About Me
섹션 태그는 h2 태그부터 h6중에 하나를 반드시 사용해야 함!
섹션(논리적으로 관련된 내용끼리 구분) 영역은 보통 제목과 본문 영역으로 구성되어있음
-> 구조와 CSS를 잘 정의하면 중복된 부분은 최소한의 코드로 작성 가능
<section id="about" class="about">
<div class = "container">
<div class="title">
<h4> Who Am I</h4>
<h2> About Me</h2>
</div>
<div class="about-self">
<div class="left">
<img src = "duck.jpeg" alt="">
</div>
<div class = "right">
<h3> Hello, <strong> I'm Aaron</strong></h3>
<p> I'm Back-End Developer and studying frontend part</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe veritatis aperiam accusantium.<br></p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe veritatis aperiam accusantium.<br></p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe veritatis aperiam accusantium.<br></p>
<div class="social">
<a href="#">
<i class="fa-brands fa-google"></i>
</a>
<a href="#">
<i class="fa-brands fa-yahoo"></i>
</a>
<a href="#">
<i class="fa-brands fa-youtube"></i>
</a>
<a href="#">
<i class="fa-brands fa-twitch"></i>
</a>
</div>
</div>
</div>
</div>
</section>section 태그 끼리, 세부 디자인은 조금씩 다르므로 각 영역을 구분하기 위해 class="about" 지정해서 구분
class = "title", class = "about title"을 통해 본문과 제목 구분
-> css 적용이 쉽도록 div 태그 사용
CSS
section{
font-family: 'Poppins', sans-serif;
padding:5rem 0;
}
section:nth-child(2n){
background-color: #f8f8f8;
}짝수 번째 section 마다 배경을 회색 계열로 지정
section .title{
margin-bottom : 3rem;
}
section .title h4{
font-size:1.35rem;
color:#ed4848;
position:relative;
}
section .title h2{
font-size:3.5rem;
}
section .title p{
font-size:1.15rem;
}
본문은 왼쪽,오른쪽으로 나뉨
/* float 속성 해제 */
section .about-self::after{
content:"";
clear:both;
display:block;
}
/* 본문 너비 절반 지정 & 왼쪽 배치 */
section .about-self .left{
width:50%;
float:left;
}
/* 이미지 크기가 부모 영역을 넘지 않도록 부모 영역의 최대 크기로 지정 */
section .about-self .left img{
max-width:100%
}
/* 본문 너비 절반 지정 및 오른쪽 배치 */
section .about-self .right{
width:50%;
float:left;
padding:0 2rem;
}about-self 클래스 하위와 left,right 클래스로 구분해 놓음
-> float 속성으로 레이아웃을 분할하고 각각 너비의 절반 씩 차지하도록 지정해야 함
-> 하지만 float 속성은 적용 대상의 원래 위치를 보장하지 않기 때문에 clear 속성으로 float 속성을 해제해야 함
img 태그에 max-width 속성을 주어 이미지가 부모 요소의 너비보다 커지지 못하게 제한
section .about-self .right h3{
font-size:2.25rem;
margin-bottom:1rem;
}
section .about-self .right h3 strong{
color:#ed4848;
}
section .about-self .right p{
font-size:1.15rem;
margin:1rem 0;
}
section .about-self .right .social a{
font-size:2.5rem;
margin-right:0.2rem;
}
What I Do
제목 + 본문(수평방향으로 3단 분리)
<section id="features" class="do">
<div class="container">
<div class="title">
<h4> Features</h4>
<h2> What I Do</h2>
</div>
<div class = "do-me">
<div class="do-inner">
<div class="icon">
<i class="fa-brands fa-java"></i>
</div>
<div class="content">
<h3> JAVA</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illo culpa magni laboriosam sit excepturi quibusdam adipisci, vero debitis?</p>
</div>
</div>
<div class="do-inner">
<div class="icon">
<i class="fa-solid fa-database"></i>
</div>
<div class="content">
<h3> Mysql</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illo culpa magni laboriosam sit excepturi quibusdam adipisci, vero debitis?</p>
</div>
</div>
<div class="do-inner">
<div class="icon">
<i class="fa-solid fa-leaf"></i>
</div>
<div class="content">
<h3> Spring Framework</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illo culpa magni laboriosam sit excepturi quibusdam adipisci, vero debitis?</p>
</div>
</div>
</div>
</div>
</section>
앞선 about me에서 제목 부분의 스타일을 지정해놓음
본문 스타일 지정하기
section .do-me::after {
content:"";
display:block;
clear:both;
}
/* 우선은 3분할이 안되서 flex 레이아웃 이용 */
section .do-me{
display: flex;
flex-direction: row;
justify-content: space-between;
}
/* 사각형 크기와 간격, 내부 여백 설정 */
section .do-me .do-inner{
background-color:#fff;
width:30%;
padding:2rem;
float:left;
margin-left:5%;
cursor:pointer;
}
/* 마지막 사각형의 외부 여백 설정 */
section .do-me .do-inner:last-child{
margin-right
}폰트 및 크기, 마우스 올릴 때 색상 변경
section .do-me .do-inner .icon i{
font-size:2.5rem;
color:#ff6a6a;
}
section .do-me .do-inner .content h3{
font-size:2rem;
margin:1rem 0;
}
section .do-me .do-inner .content p{
font-size:1.15rem;
}
section .do-me .do-inner:hover{
background-color:lightcoral;
color:white;
}
section .do-me .do-inner:hover i{
color:white;
}
배경 영역 추가
what I Do 영역에 다음 코드 작성
...
</section>
<div class="bg"></div>.bg{
background:url('background.jpg') center center;
background-size:cover;
background-attachment:fixed;
height:650px;
}
배경영역은 아무런 정보를 전하지 않는 단순히 디자인적 요소이므로 h2~6 태그 사용 이유 X
-> div 태그 사용
Journey for Backend Developer