section 분할하기 (복잡함)
icon과 img 가져와서 붙여넣기
<body>
<header class="header">
<section class="header1">
<button class="fa-solid fa-bars"></button>
<a href="https://www.youtube.com/">
<img src="https://littledeep.com/wp-content/uploads/2019/03/youtube_logo_download_main-1024x394.png" alt="youtubeLogo" height="30px">
</a>
</section>
<section class="header2">
<form class="search-area">
<fieldset>
<input type="search" autocomplete="off" placeholder="검색">
<button id="search-btn" class="fa-solid fa-magnifying-glass"></button>
</fieldset>
<section>
<button class="fa-solid fa-microphone"></button>
</section>
</form>
</section>
<section class="header3">
<button class="fa-solid fa-video"></button>
<button class="fa-regular fa-bell"></button>
<button class="fa-solid fa-user"></button>
</section>
</header>
<main>
<section class="content">
<section class="content-left">
<section>
<iframe width="560" height="315" src="https://www.youtube.com/embed/hKkYJMc_CkE?si=Eh8zidX_G3izQQyQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</section>
<section>
<h1>Do it! 자바 프로그래밍 입문-05장 클래스와 객체1(4)</h1>
</section>
<section class="profile">
<section class="profile-left">
<button class="fa-solid fa-user"></button>
<section>
<p class="p1">easypub</p>
<p class="p2">구독자 2.74만명</p>
</section>
<button>구독</button>
</section>
<section class="profile-right">
<section>
<button class="fa-regular fa-thumbs-up"></button>
<button class="fa-regular fa-thumbs-down"></button>
</section>
<button class="fa-solid fa-share"></button>
<button class="fa-solid fa-arrow-down-long"></button>
<button class="fa-solid fa-ellipsis"></button>
</section>
</section>
<section class="line1">
<p>조회수 1.6만회 5년 전 Do it! 자바 프로그래밍 입문</p>
</section>
<section class="line2">
<h1>댓글 27개</h1>
<button class="fa-solid fa-bars"></button>
<p>정렬 기준</p>
</section>
<section class="comment1">
<button class="fa-solid fa-user"></button>
<input placeholder="댓글 추가...">
</section>
<section class="comment2">
<section class="comment2-1">
<section class="first">
<button class="fa-solid fa-user"></button>
</section>
<section class="first-1">
<p>@user-bj4yp1tu4d</p>
<p>강사님~ 자바 입문에 대한 이해도가 낮아서 자바 코딩에 어려움이 있었던 직장인입니다. 책에는 없는 내용까지 다양한 예제로 다루어주셔서 걈사합니다. 중간에 약간 속도가 빨라지는 부분이 있었지만, 잠시 멈춰 놓고 클래스와 객체 부분에서 배운 내용을 다시 떠올려보며 학습하니, 이해가되었습니다. 좋은 강의 감사합니다.</p>
</section>
</section>
<section class="comment2-2">
<section class="second">
<button class="fa-solid fa-user"></button>
</section>
<section class="second-1">
<p>@user-ou3yy4zh5m</p>
<p>근데 이게 참 누가보면 입문인데 누가 보면 절대 입문은 아니고 ㅋㅋ 일단 아예 프로그래밍 처음하는 사람이 이 책으로 혼자 해볼려면 힘들긴 하겠네요</p>
</section>
</section>
</section>
</section>
<section class="content-right"></section>
</section>
</main>
</body>css code
* {
box-sizing: border-box;
/* border: 1px solid black; */
}
body {
margin: 0;
display: flex;
flex-direction: column;
}
.header {
height: 50px;
margin-top: 0px;
margin-left: 15px;
background-color: white;
display: flex;
}
.header1 {
flex-basis: 20%;
display: flex;
}
.header1 >button {
border: none;
background-color: white;
}
.header2 {
flex-basis: 70%;
display: flex;
justify-content: center;
align-items: center;
}
.search-area {
flex-basis: 60%;
display: flex;
justify-content: center;
align-items: center;
}
.search-area > fieldset {
flex-basis: 90%;
display: flex;
border: 1px solid #ddd;
border-radius: 15px;
}
.search-area > fieldset > input {
flex-basis: 90%;
border: none;
}
.search-area > fieldset > button {
flex-basis: 10%;
border: none;
background-color: white;
}
.search-area > section {
flex-basis: 10%;
}
.search-area > section > button {
border: none;
border-radius: 50%;
width: 30px;
height: 30px;
}
.header3 {
flex-basis: 10%;
display: flex;
justify-content: flex-end;
}
.header3 > button:nth-of-type(1),
.header3 > button:nth-of-type(2) {
margin-right: 15px;
margin-top: 15px;
border: none;
background-color: white;
width: 30px;
height: 30px;
}
.header3 > button:nth-of-type(3) {
margin-right: 15px;
margin-top: 15px;
border-radius: 50%;
border: none;
width: 30px;
height: 30px;
}
main {
display: flex;
justify-content: center;
}
main > section {
display: flex;
flex-basis: 90%;
}
main > .content > .content-left {
display: flex;
flex-direction: column;
flex-basis: 80%;
}
.content-left iframe {
flex-basis: 100%;
border-radius: 15px;
}
.profile {
display: flex;
}
.profile > section {
flex-basis: 100%;
display: flex;
}
.profile-left {
justify-content: flex-start;
}
.profile-left button:first-child {
border: none;
border-radius: 50%;
height: 50px;
width: 50px;
margin-right: 10px;
margin-top: 15px;
}
.profile-left button:last-child {
height: 40px;
width: 60px;
border-radius: 30px;
background-color: black;
color: white;
margin-left: 15px;
margin-top: 15px;
}
.profile-left section {
display: flex;
flex-direction: column;
}
.profile-left .p1 {
display: flex;
flex-direction: column-reverse;
margin-bottom: 0px;
}
.profile-left .p2 {
margin-top: 0px;
}
.profile-right {
justify-content: flex-end;
display: flex;
}
.profile-right section {
justify-content: flex-end;
margin-right: 5px;
}
.profile-right > section > button {
border: none;
height: 50px;
border-radius: 50%;
width: 50px;
}
.profile-right > button {
border: none;
border-radius: 50%;
margin-right: 5px;
height: 50px;
width: 50px;
}
.line1 {
margin-top: o;
background-color: #ddd;
border-radius: 15px;
}
.line2 {
display: flex;
}
.line2 > h1 {
margin-right: 30px;
}
.line2 > button {
border: none;
background-color: transparent;
}
.comment1 {
display: flex;
}
.comment1 button {
height: 50px;
width: 50px;
border: none;
border-radius: 50%;
margin-right: 15px;
}
.comment1 input {
width: 100%;
border: none;
outline: none;
border-bottom: 2px solid black;
}
.comment2-1 {
display: flex;
margin-top: 20px;
justify-content: flex-start;
}
.first {
flex-basis: 10%;
display: flex;
align-items: center;
}
.first button {
border: none;
width: 30px;
height: 30px;
border-radius: 50%;
}
.first-1 {
flex-basis: 90%;
}
.comment2-2 {
display: flex;
margin-top: 20px;
justify-content: flex-start;
}
.second {
flex-basis: 10%;
display: flex;
align-items: center;
}
.second button {
border: none;
width: 30px;
height: 30px;
border-radius: 50%;
}
.second-1 {
flex-basis: 90%;
}
main > .content > .content-right {
flex-basis: 20%;
flex-direction: column;
}느낀점
section을 세분화해서 나눠야 크기 조절, 정렬하기 쉬움. 같은 크기나 같은 style 가진 것들끼리 class로 묶어서 css 같이 넣어주는 것도 좋음
완벽하진 않지만 기능을 넣어서 만들어보고 싶음
