Conversation
There was a problem hiding this comment.
DS_Store는 mac에서 시스템이 폴더에 접근할 때 생기며, 해당 폴더에 대한 메타데이터를 저장하는 파일입니다. 즉 git에 올라갈 필요가 없어요! 추후 .gitignore 등을 배우실 수도 있을 것 같은데, gitignore에 등록해두면 git에 올라가지 않는 동작을 추가할 수 있습니다. https://www.toptal.com/developers/gitignore 나중에 참고해보세요!
| @import url("https://fonts.googleapis.com/css2?family=Acme&display=swap"); | ||
|
|
||
| .acme-regular { | ||
| font-family: "Acme", sans-serif; | ||
| font-weight: 400; | ||
| font-style: normal; | ||
| } | ||
|
|
||
| /* color palette */ | ||
|
|
||
| :root { | ||
| --primary: #6d6afe; | ||
| --red: #ff5b56; | ||
| --black: #111322; | ||
| --white: #ffffff; | ||
| --gray1: #3e3e43; | ||
| --gray2: #9fa6b2; | ||
| --gray3: #ccd5e3; | ||
| --gray4: #e7effb; | ||
| --gray5: #f0f6ff; | ||
| } | ||
|
|
There was a problem hiding this comment.
나중에 파일이 커지면 컬러 및 폰트 파일은 추후 분리해보는 것도 좋을 것 같아요.
| <div id="wrap"> | ||
| <header id="header"> |
There was a problem hiding this comment.
일부는 아이디로 하고 일부는 classname으로 작성을 하셨네요. 혹시 이렇게 다르게 작성하신 이유가 있으실까요~?
There was a problem hiding this comment.
일반적으로 특별한 이유가 없다면 통일을 하는게 추후 관리하기 더 용이합니다!
| </h1> | ||
| <h1>쉽게 저장하고 관리해 보세요</h1> | ||
| <a href="./signup/" class="link_add">링크 추가하기</a> | ||
| <img src="./assets/images/main/mainImg.png" alt="" /> |
There was a problem hiding this comment.
이미지 태그에는 alt 속성을 추가하여 이미지가 로드되지 않았거나, 시각 장애가 있는 사용자를 위한 대체 텍스트를 제공하는 것이 좋습니다 :)
| <div class="cont_item"> | ||
| <div class="cont_txt"> | ||
| <h1> | ||
| <span class="gradient_txt gradient_link">원하는 링크</span>를 |
There was a problem hiding this comment.
classname이 일관성을 가지면 추후 classname만 보더라도 어떤 영역인지 쉽게 파악할 수 있습니다. 다양한 명명규칙이 있는데 https://medium.com/witinweb/css-%EB%B0%A9%EB%B2%95%EB%A1%A0-1-bem-block-element-modifier-1c03034e65a1 이 부분도 가볍게 참고해주세요!
There was a problem hiding this comment.
이미지 파일 이름의 규칙이 다 다른 것 같아요! 통일을 해도 좋을 것 같습니다.
There was a problem hiding this comment.
svg와 png를 혼용해서 쓰신 것 같아요. 혹시 두 이미지 파일 형식의 차이에대해 알고계신가요~?
There was a problem hiding this comment.
이름만 보고도 어떤 곳에 쓰이는 이미지인지 알 수 있으면 좋을 것 같습니다.
| <title>Linkbrary</title> | ||
| <link rel="stylesheet" href="./assets/css/common.css" /> | ||
| <link rel="stylesheet" href="./assets/css/reset.css" /> | ||
| <link rel="stylesheet" href="./assets/css/signin.css" /> |
There was a problem hiding this comment.
signup.html에서 signin.css를 가져오는 것이 애매해보여요! signin.css를 auth.css로 의미를 포괄할 수 있게 변경하는 것은 어떨까요?
| <input | ||
| id="password" | ||
| name="password" | ||
| placeholder="******" | ||
| type="password" | ||
| /> |
There was a problem hiding this comment.
placeholder가 위와 아래가 다르네요! 통일해도 좋을 것 같긴 합니다.
There was a problem hiding this comment.
질문 답변내용)
em과 rem 단위는 웹 디자인에서 요소의 크기를 설정할 때 사용자의 브라우저 설정이나 상위 요소의 크기에 따라 동적으로 조정되도록 하는 데 유용합니다. 이러한 단위를 사용하는 주된 목적은 접근성과 반응형 디자인을 향상시키는 역할을 하는데요, 사용자가 시스템 또는 브라우저 설정에서 기본 폰트 크기를 변경했을 때, 페이지의 텍스트 크기뿐만 아니라 간격, 크기 등도 비례하여 조정되어야 최적의 사용자 경험을 제공할 수 있습니다. 현업에서 많이 쓰입니다!!
요구사항
기본
심화
스크린샷
멘토에게
-사용자의 브라우저 font-size가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정했나요? 이부분이 em이나 em을 이용하는거같은데 현업에서도 많이 이용하나요? 보통 박스나 박스안의 요소들 크기를 정할때 사용한다는데 구체적으로 어디에 자주 쓰이는지 궁금합니다!