Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[김태완] Sprint1 #52

Merged
merged 1 commit into from
Sep 14, 2024
Merged

[김태완] Sprint1 #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5507
}
393 changes: 393 additions & 0 deletions CSS/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,393 @@
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

.header{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #DFDFDF;
width: 100%;
height: 70px;
padding: 0 200px;
max-width: 1920px;
margin: 0 auto;
}

.logo{
width: 153px;
height: 51px;
flex-shrink: 0;
cursor: pointer;
}
.button.header-button{
flex-shrink: 0;
width: 128px;
height: 48px;
padding: 11px 43px;
font-size: 16px;
font-weight: 600;
line-height: 26px;
cursor: pointer;
}

.button{
background-color: #3692FF;
color: white;
border: none;
border-radius: 10px;
font-family: 'Pretendard';
}

.main-ad{
width: 100%;
height: 540px;
background-color: #CFE5FF;
position: relative

}
.main-ad-box{
gap: 7px;
display: flex;
position: absolute;
top: 200px;
left: 405px;
right: 405px;
align-items: center;
justify-content: center;
}
.main-ad-content{
padding: 0px 0px 60px 0px;
gap: 32px;
display: flex;
flex-direction: column;
justify-content: center;

}
.main-ad-content > a{
text-decoration: none;
}
.main-ad h2{
font-family: 'Pretendard';
font-size: 40px;
font-weight: 700;
line-height: 56px;
}
.button.main-ad-button{
border-radius: 40px;
text-align: center;
font-family: 'Pretendard';
font-size: 20px;
font-weight: 600;
line-height: 32px;
height: 56px;
padding: 16px 124px;
white-space: nowrap;
display: flex;
align-items: center;
cursor: pointer;
}
.main-ad-image{
width: 746px;
height: 340px;
}

.main-first-box,
.main-second-box,
.main-third-box{
width: 100%;
height: 720px;

display: flex;
justify-content: center;
align-items: center;
}
.main-first-content,
.main-second-content,
.main-third-content{
display: flex;
justify-content: space-between;
border-radius: 12px;
width: 988px;
background-color: #FCFCFC;
white-space: nowrap;
margin: 0 auto;
}

.main-first-image,
.main-second-image,
.main-third-image{
width: 579px;
height: 444px;
}
Comment on lines +97 to +124
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

동일한 스타일 속성을 가지고 있다면, class를 분리할 필요 없이 범용적인 이름의 class 하나만 작성하고 적용해 주시면 됩니다.

.main-first-texts{
padding-right: 24px;
margin-top: 103px;
margin-bottom: 103px;
}
.main-second-texts{
padding-left: 24px;
display: flex;
flex-direction: column;
margin-top: 103px;
margin-bottom: 103px;
margin-right: 64px;
text-align: right;
}
.main-third-texts{
padding-right: 24px;
margin-top: 103px;
margin-bottom: 103px;
margin-left: 22px;
}
.main-first-texts h5,
.main-second-texts h5,
.main-third-texts h5{
font-size: 18px;
font-weight: 700;
line-height: 26px;
font-family: "Pretendard";
color: #3692FF;
margin-bottom: 12px;
}

.main-first-bigtext,
.main-second-bigtext,
.main-third-bigtext{
font-family: "Pretendard";
font-size: 40px;
font-weight: 700;
line-height: 56px;
letter-spacing: 2%;
color: #374151;
margin-bottom: 24px;
}
.main-first-smalltext,
.main-second-smalltext,
.main-third-smalltext{
font-family: "Pretendard";
font-size: 24px;
font-weight: 500;
line-height: 32px;
color: #374151;
}

.sub-ad{
width: 100%;
height: 540px;
background-color: #CFE5FF;
position: relative

}
.sub-ad-box{
gap: 7px;
display: flex;
position: absolute;
top: 143px;
left: 405px;
right: 405px;
align-items: center;
justify-content: center;
}
.sub-ad-content{
padding: 0px 0px 60px 0px;
gap: 10px;
display: flex;
flex-direction: column;
justify-content: center;
white-space: nowrap;
margin-right: 69px;
margin-top: 112.5px;
}
.sub-ad h2{
font-family: 'Pretendard';
font-size: 40px;
font-weight: 700;
line-height: 56px;
color: #374151;
}
Comment on lines +204 to +210
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

태그 선택자는 공용으로 적용해야 하는 경우를 제외하고는 사용을 지양하고 대신 클래스 선택자를 활용하는 연습을 하시는 게 좋습니다.
해당 css가 적용되는 모든 범위에서의 태그에 반영되기 때문에, 이후 변경 및 수정 등의 유지보수 시 어려움을 겪을 수 있습니다.
지금같은 경우 sub-ad class를 가진 요소 하위의 h2 태그에만 적용되겠지만, 그 안에서도 변경 사항은 발생할 수 있으니까요

.sub-ad-image{
width: 746px;
height: 397px;
}
.footer{
background-color: #111827;
width: 100%;
height: 160px;
display: flex;
justify-content: center;
}
.footer-box{
max-width: 1120px;
width: 100%;
margin-left: 400px;
margin-right: 400px;
margin-top: 32px;
display: flex;
justify-content: space-between;
}
.company{
color: #9CA3AF;
font-family: 'Pretendard';
font-size: 16px;
font-weight: 400;
line-height: 19px;
white-space: nowrap;
}
.info{
Comment on lines +210 to +239
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

선택자 간에는 가독성을 위해 한 줄씩 띄워 주세요!


font-family: 'Pretendard';
font-size: 16px;
font-weight: 400;
line-height: 19px;
display: flex;
gap: 30px;

}
.info > a{
white-space: nowrap;
cursor: pointer;
text-decoration: none;
color: #E5E7EB;
}
.footer-image-box{
white-space: nowrap;
}
.footer-image-box > a{
cursor: pointer;
}
Comment on lines +249 to +260
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

자식 선택자(>)는 구현 상 불가피한 경우가 아니라면 지양해주시는 게 좋습니다.
추후에 문서 구조가 바뀐다거나, 특정 요소에만 다른 스타일을 부여해야 한다거나 하는 변경 사항이 생겼을 때 유지보수에 어려움을 줄 수 있습니다.


@media screen and (max-width: 768px) {

.header {
padding: 0 40px;
}

.button.header-button {
width: 128px;
height: 48px;
padding: 11px 43px;
font-weight: 600;
line-height: 26px;
cursor: pointer;
font-size: 16px;
}

/* main-ad - 이미지 크기 변화, 위치 */
.main-ad {
height: 400px;
}

.main-ad-box {
top: 100px;
left: 20px;
right: 20px;
white-space: nowrap;
}

.main-ad h2 {
font-size: 24px;
line-height: 32px;
}

.button.main-ad-button {
font-size: 16px;
padding: 12px 80px;
}

.main-ad-image {
width: 10%;
height: auto;
}

.main-first-box,
.main-second-box,
.main-third-box {
height: auto;
padding: 20px;
}

.main-first-content,
.main-second-content,
.main-third-content {
flex-direction: column;
width: 80%;
}

.main-first-texts,
.main-second-texts,
.main-third-texts {
margin: 20px 0;
padding: 10px;
}

.main-first-image,
.main-second-image,
.main-third-image {
width: 100%;
height: auto;
}

.main-first-bigtext,
.main-second-bigtext,
.main-third-bigtext {
font-size: 28px;
line-height: 36px;
}

.main-first-smalltext,
.main-second-smalltext,
.main-third-smalltext {
font-size: 18px;
line-height: 24px;
}

/* sub-ad 작업중 - 이미지 크기 변화, 위치*/
.sub-ad {
height: 400px;
}

.sub-ad-box {
top: 100px;
left: 20px;
right: 20px;
white-space: nowrap;
}

.sub-ad h2 {
font-size: 24px;
line-height: 32px;
}

.sub-ad-image {
display: block;
max-width: 100%;
height: auto
}

/* footer 반응형 작업중 - 이미지 크기 변화, 위치 */
.footer {
height: 120px;
}

.footer-box {
flex-direction: column;
margin: 0 20px;
text-align: center;
}

.company {
font-size: 14px;
}

.info {
gap: 15px;
font-size: 14px;
}

.footer-image-box > a {
margin-right: 10px;
}
}
Loading
Loading