Conversation
There was a problem hiding this comment.
banner-top안의 text와 banner-bottom의 text가 같은 css속성인데 다르게 동작합니다.
창을 줄였을 때, banner-top의 text는 그대로 있으면서 화면밖으로 나가는 만큼 잘리는 방식으로 동작하고(의도한 바가 아님)
banner-bottom의 text는 css에서 .text에 지정한 아래의 코드가 제대로 적용되어 동작합니다.
왜 banner-top에서는 이상하게 동작하는지 모르겠습니다.
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- banner-top은 text까지 가는데에
banner-top,banner-top-container,banner-top-component를 거쳐서 가야하는 반면, banner-bottom는banner-bottom,banner-bottom-container이렇게 2개의 div하위에 위치하고있습니다.
.banner-top-component {
overflow: hidden;
}- 이 속성을 추가해서 부모 요소가 overflow:hiddend이 되어야 자식요소에서 말줄임표 처리가 가능해집니다.
또, banner-top에서 판다이미지를 어떻게 바닥에 붙여야 좋을지 잘 모르겠습니다.
저는 일단 relative속성을 이용해 bottom: 으로 -px값을 줘서 붙였는데, 이렇게하면서
이미지크기를 유동적으로 만들수가 없습니다.
어떻게하는것이 좋은방법일까요?
.banner-top-image{
align-self: flex-end
}요렇게 하면 됩니다.
부모 요소인 banner-top-container가 flex box여서, 자식요소 각각이 독립적으로 align 스타일링이 필요할 때 align-self 속성을 쓸 수 있습니다.
| <a class="goto_root" href="./index.html"> | ||
| <img src="./icons/Property 1=Variant3.svg" alt="main logo"> | ||
| </a> | ||
| <a class="button-login" href="./login.html"> | ||
| 로그인 | ||
| </a> |
There was a problem hiding this comment.
| <a class="goto_root" href="./index.html"> | |
| <img src="./icons/Property 1=Variant3.svg" alt="main logo"> | |
| </a> | |
| <a class="button-login" href="./login.html"> | |
| 로그인 | |
| </a> | |
| <a class="goto-root" href="./index.html"> | |
| <img src="./icons/Property 1=Variant3.svg" alt="main logo"> | |
| </a> | |
| <a class="button-login" href="./login.html"> | |
| 로그인 | |
| </a> |
선택자, 변수, 함수, 등등 식별자를 이름지어야 할 때 naming convention을 여러개 혼용해서 사용하지 않는게
코드를 읽기 쉽고, 이해하기 쉽게 만드는 방법중 하나 입니다.
naming convention은 종류가 많은데, 일반적으로 널리 알려진것은
camelCase, snake_case, kebaa-case, UPPERCASE,PascalCase 등이 있습니다.
예를들어, 자바스크립트는 대부분 camelCase를 사용하고, 종종 PascalCase를 사용하기도 합니다.
중요한것은 제품을 만드는 사람이 편한 것보다, 읽는 사람이 이해하기쉽게 볼 수 있게 만드는게 중요합니다.
| </section> | ||
|
|
||
| <main> | ||
| <section class="section1"> |
There was a problem hiding this comment.
소프트웨어는 항상 바뀔 수 있습니다.
지금은 section1이지만, 나중엔 이 순서 혹은 위치가 바뀔 수도 있습니다.
역할을 생각해보시면 좀더 변경에 유연한 이름 짓기가 될꺼에요.
| line-height: 24px; | ||
| } | ||
|
|
||
| main{ |
There was a problem hiding this comment.
태그 선택자는 지양하는 것이 좋습니다.
지금은 혼자서 개발하지만, 팀 단위로 개발하면 선택자 사용에 중복되거나, 의도치않은 영향을 줄 수 있습니다.
class 선택자를 사용하는걸 권장합니다. 하나의 태그에 복수의 class를 선언하는 것도 가능합니다.
| main section .text { | ||
| margin: 12px 0 24px ; | ||
| } |
There was a problem hiding this comment.
특정 class를 부모 요소부터 찾아서 잘 적용하셨습니다.
특정 class를 나타내는 class를 하나 더 부여해서 사용하는 다른 방법도 있습니다.
예를들어,
<main>
<section>
<div class="text">...</div>
</section>
</main>main section .text 로 찾는경우 main부터 찾게 되는데,
<div class="text subtitle">
이렇게 class를 하나 더 추가해주면
조부모, 부모 등을 거치지않고 .subtitle로 바로 특정지을 수 있습니다.
| height: 720px; | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 0px 64px; |
There was a problem hiding this comment.
| gap: 0px 64px; | |
| gap: 0 64px; |
0은 단위를 붙이지않아도 됩니다
| <div class="tag">Hot item</div> | ||
| <div class="text">인기 상품을<br>확인해 보세요</div> | ||
| <div class="text-info">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</div> |
There was a problem hiding this comment.
| <div class="tag">Hot item</div> | |
| <div class="text">인기 상품을<br>확인해 보세요</div> | |
| <div class="text-info">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</div> | |
| <div class="tag">Hot item</div> | |
| <div class="text">인기 상품을<br>확인해 보세요</div> | |
| <div class="text-info">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</div> |
화면상 이 영역이 모두 영역을 나타내는 태그로 쓰여야 하는지,
아니면 어떤 역할을 하는지 생각해보시고 적절한 태그를 사용해보세요.
요구사항
기본
심화
주요 변경사항
-netlify에 업로드하였습니다.
링크
스크린샷
멘토에게
-banner-top안의 text와 banner-bottom의 text가 같은 css속성인데 다르게 동작합니다.
창을 줄였을 때, banner-top의 text는 그대로 있으면서 화면밖으로 나가는 만큼 잘리는 방식으로 동작하고(의도한 바가 아님)
banner-bottom의 text는 css에서 .text에 지정한 아래의 코드가 제대로 적용되어 동작합니다.
왜 banner-top에서는 이상하게 동작하는지 모르겠습니다.
white-space: nowrap;overflow: hidden;text-overflow: ellipsis;저는 일단 relative속성을 이용해 bottom: 으로 -px값을 줘서 붙였는데, 이렇게하면서
이미지크기를 유동적으로 만들수가 없습니다.
어떻게하는것이 좋은방법일까요?