[신주하] Sprint2 #39
[신주하] Sprint2 #39
Conversation
|
스프리트 미션 하시느라 수고 많으셨어요. |
commit 단위를 더욱 자주, 작게 해보시는건 어떠실까요?git을 다룰 때 commit은 "언제 해야 하는가"를 생각해보신 적 있으신가요?
그럼 커밋을 언제 해야 할까요?저는 다음과 같은 룰을 지키며 커밋을 하는걸 권장 드립니다:
관련하여 읽으시면 좋은 아티클을 추천드릴게요:tl;dr관련 변경 사항 커밋 자주 커밋 미완성 작업을 커밋하지 마십시오 커밋하기 전에 코드를 테스트하세요 |
커밋 타입도 한 번 고려해보세요 !tl;dr:커밋 메시지 형식 type: Subject
body
footer기본적으로 3가지 영역(제목, 본문, 꼬리말)으로 나누어졌다. 메시지 type은 아래와 같이 분류된다. 아래와 같이 소문자로 작성한다. feat : 새로운 기능 추가 |
|
|
||
| <div class="feature-content"> | ||
| <h2 class="feature-tag">Hot item</h2> | ||
| <h1>인기 상품을<br/>확인해 보세요</h1> |
There was a problem hiding this comment.
<h1> 태그는 문서에 하나만 넣는게 어떨까요?
이하 MDN 발췌
페이지 당 하나의 <h1>만 사용하세요. 여러 개를 써도 오류는 나지 않겠지만, 단일 <h1>이 모범 사례로 꼽힙니다. 논리적으로 생각했을 때도, <h1>은 가장 중요한 제목이므로 전체 페이지의 목적을 설명해야 할 것입니다. 두 개의 제목을 가진 책이나, 여러 개의 이름을 가진 영화는 볼 수 없죠! 또한 스크린 리더 사용자와 SEO에도 더 적합합니다.
| <div id="socialMedia"> | ||
| <a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer"> | ||
| <img src="logo1.jpg" alt="페이스북" width="20" /></a> | ||
|
|
||
|
|
||
| <a href="https://twitter.com/" target="_blank" rel="noopener noreferrer"> | ||
| <img src="logo2.jpg" alt="트위터" width="20" /></a> | ||
|
|
||
| <a href="https://www.youtube.com/" target="_blank" rel="noopener noreferrer"> | ||
| <img src="logo3.jpg" alt="유튜브" width="20" /></a> | ||
|
|
||
| <a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer"> | ||
| <img src="logo1.jpg" alt="인스타그램" width="20" /></a> | ||
| </div> |
There was a problem hiding this comment.
(제안/선택)요소들이 순서 없는 목록을 의미한다면 <ul>과 <li>로도 나타낼 수 있습니다 !
<ul class="footer-social">
<li>
<a target="_blank" href="https://www.facebook.com/">
<img src="images/ic_facebook.svg" alt="페이스북" />
</a>
</li>
<li>
<a target="_blank" href="https://www.twitter.com/">
<img src="images/ic_twitter.svg" alt="트위터" />
</a>
</li>
<li>
<a target="_blank" href="https://www.youtube.com/">
<img src="images/ic_youtube.svg" alt="유튜브" />
</a>
</li>
<li>
<a target="_blank" href="https://www.instagram.com/">
<img src="images/ic_instagram.svg" alt="인스타그램" />
</a>
<li>
</ul>MDN: HTML
<ul>요소는 정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현합니다.
li 태그의 기본 스타일을 제거하고 싶다면 다음과 같이 작성할 수 있습니다 ! { list-style: none; }
There was a problem hiding this comment.
해당 버튼은 css로 작성하시는게 바람직합니다 !
padding과 background-color 그리고 border-radius 등으로 같은 UI를 출력할 수 있습니다 😊
There was a problem hiding this comment.
로고 파일 하나만 있어도 됩니다 !
하나의 로고파일로 크기를 조정하여 개발할 수 있습니다 !
다음과 같이요 !
<img src="..." class="logo" />
// ...
.logo { width: 200px }There was a problem hiding this comment.
또한 벡터 이미지는 svg로 저장하시는걸 추천드려요 !
이하 MDN
SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 서술하는XML기반의 마크업 언어입니다.SVG는 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링 되는 이미지를 서술하며 CSS, DOM, JavaScript, SMIL (en-US) 등 다른 웹 표준과도 잘 동작하도록 설계됐습니다. SVG는 달리 말하자면 HTML과 텍스트의 관계를 그래픽에 적용한 것입니다
이미지 파일은 최소 단위가 픽셀로 되어있으며 확대했을 때 이미지가 깨질 수 있어요 !
피그마에서 export하실 때에 svg로 export할 수 있습니다 😊
There was a problem hiding this comment.
해당 이미지 파일도 css를 통하여 개발되어야 합니다 😊
|
수고하셨습니다 주하님 ! 미션 수행 하시느라 고생 많으셨습니다 ! |
2 participants
요구사항
기본
[ X ] 랜딩 페이지의 url path는 루트(‘/’) 입니다.
[ X ] title은 “판다마켓”으로 설정해 주세요.
[ ] 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 해주세요.
[ X ] 화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px“로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 해주세요.
[ X ] 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 cursor: pointer를 설정해 주세요.
[ X ] “판다마켓” 클릭 시 루트 페이지(‘/’)로 이동시켜주세요.
[ X ] “구경하러 가기" 클릭 시 (“/items”)페이지로 이동시켜주세요.(빈 페이지)
[ X ] “로그인”버튼 클릭 시 로그인 페이지(‘/login’)로 이동합니다
[ X ] “구경하러가기”버튼 클릭 시(’/items’)로 이동합니다.
[ X ] 페이스북, 트위터, 유튜브, 인스타그램 아이콘은 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동 합니다.
[ X ] “Privacy Policy”, “FAQ”는 클릭 시 각각 아래 페이지로 이동합니다 - Privacy 페이지(‘/privacy’) - FAQ 페이지(‘/faq’)
심화
[ X ] 사용자의 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 보세요.(설정 값은 자유입니다)
주요 변경사항
[ X ] 메인 페이지 HTML/CSS 구조 구현
[ X ] 이미지 및 로고 파일 추가
[ X ] 로그인 페이지 연결
스크린샷
멘토에게