박스크기를 200을 주고 padding left를 50을 주면 박스는 200px 크기를 유지한채 오른쪽으로 이동하잖아
근데 ㄴㄴ 박스크기 200이고 padding left50이면 박스크기 150로 하고 패딩 50이렇게 하자. 박스크기 늘리자말고 ㅇㅋ?
이게 바로 box-sizing: border-box;
채팅 아이콘에 채팅 1개 왔다고 표시하기
friends.html
<a class="nav__link" href="#">
<span class="nav__notification">1</span>
<i class="far fa-comment fa-2x"></i>
</a>
nav-bar.css
.nav__link {
/*position 추가*/
position: relative;
color: #2e363e;
}
.nav__notification {
background-color: tomato;
width: 30px;
height: 30px;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: 600;
position: absolute;
left: 15px;
bottom: 15px;
}
span은 width, height값을 줄 수 없음
줄려면 display:felx 하도록
position: absolute는 가장 가까운 relative를 가진 부모 기준으로 움직이는거임
결과
이것봐.
이부분이 다 똑같지?
이제 저 부분 만들거야
screen-header.css 생성
.screen-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px;
}
.screen-header__title {
font-size: 32px;
font-weight: 600;
}
.screen-header__icons span {
margin-left: 25px;
}
friends.html
<header class="screen-header">
<h1 class="scscreen-header__icons">Friends</h1>
<div class="screen-header__icons">
<span><i class="fas fa-search fa-lg"></i></span>
<span><i class="fas fa-music fa-lg"></i></span>
<span><i class="fas fa-cog fa-lg"></i></span>
</div>
</header>
css에 import 해주는거 잊지말고!
결과
우린 이제 저 빨간네모 부분처럼 만들거야
friends.html
<h1 class="scscreen-header__icons">Friends</h1>
이 부분을
<h1 class="screen-header__title">Friends</h1>
이렇게 class이름 바꿔줘. title이라고 했어야하는데 저거 잘못 이름 준거야😂
++
<a id="friends-display-link">
<i class="fas fa-info-circle"></i> Friends' Names Display
<i class="fas fa-chevron-right fa-xs"></i>
</a>
style2.css
자세히보면 모든 글자 색들이 검정색이 아니라 검정색에 가까운 회색임
body {
color: #2e363e;
이렇게 해주고
ㅇㅇㅇㅇ
friends.css 파일 새로 생성
#friends-display-link {
text-align: center;
display: block;
background-color: #fafafa;
padding: 15px 0px;
font-size: 16px;
}
#friends-display-link i {
color: rgba(0, 0, 0, 0.3);
}
저 부분 다양하게 쓰이지?
그래서 user-componet.css를 만들어서 공통 스타일을 줄거야.
<div class="user-component">
<div class="user-component__column">
<img
src="https://avatars3.githubusercontent.com/u/3612017"
class="user-component__avatar"
/>
<div class="user-component__text">
<h4 class="user-component__title">Nicolas</h4>
<h6 class="user-component__subtitle">this text whatever</h6>
</div>
</div>
<div class="user-component__column"></div>
</div>
저렇게 두 section으로 나눠지도록 html코딩 저렇게 짜
user-compoenet.css 파일 생성
.user-component,
.user-component__column:first-child {
display: flex;
align-items: center;
}
.user-component__avatar {
width: 70px;
height: 70px;
border-radius: 27px;
margin-right: 20px;
}
.user-component__title {
font-weight: 600;
font-size: 22px;
}
.user-component__subtitle {
margin-top: 8px;
font-size: 17px;
color: rgba(0, 0, 0, 0.5);
}
나는 이미지랑 text를 바꿔봤어
friends.html
class="user-componentavatar **user-componentavatar--xl"**
저렇게 추가하는데 이건 변형(modifier)이야. xl(x-large사이즈)
user-component.css
.user-component__avatar--xl {
width: 80px;
height: 80px;
}
이렇게 하면 프사 사진 크기 키워져
전
후
그리고
저렇게 간격이 있어. 다른창에도 똑같이 적용할거야
이제 이 부분에 대한 걸 variable.css에 작성할거임
:root {
--yellow: #fae100;
--horizontal-space: 25px;
}
screen-header.css
padding: 25px; -> padding: var(--horizontal-space);
그럼 이제 friends에 margin이 아니라 padding이 적용됨 좌우에.
그 다음 이제
저렇게 하나의 박스로 만들거야
<!-- user component -->
<main class="friends-screen">
<div class="user-component">
<div class="user-component__column">
<img
src="https://image.dongascience.com/Photo/2020/03/5bddba7b6574b95d37b6079c199d7101.jpg"
class="user-component__avatar user-component__avatar--xl"
/>
<div class="user-component__text">
<h4 class="user-component__title">최예진</h4>
<h6 class="user-component__subtitle">
지속적 밤샘으로 예민해진 상태
</h6>
</div>
</div>
<div class="user-component__column"></div>
</div>
<!--channel 추가-->
<div class="friends-screen__channel">
<div class="friends-screen__channel-header">
<span>Channel</span>
<i class="fas fa-chevron-up fa-xs"></i>
</div>
<div class="user-component">
<div class="user-component__column">
<img
src="https://image.ajunews.com/content/image/2019/12/25/20191225170826943516.jpg"
class="user-component__avatar user-component__avatar--sm"
/>
<div class="user-component__text">
<h4 class="user-component__title">인절미</h4>
</div>
</div>
<div class="user-component__column">
<span>2</span>
<i class="fas fa-chevron-right fa-xs"></i>
</div>
</div>
</div>
</main>
결과