25일차
어제 박영웅 강사님께서 해주신 조언 한마디한마디가 현재 내 공부 자세에 대해 반성하고 다시 다잡을 수 있는 원동력이 된 것 같다.
- 주말에 슬랙에 불이 켜져있는 사람이 반이 되지 않는다.
- 남들보다 부족하다면 더 공부를 하고 반복을 해야한다.
오늘 공부할 목록
PART1 피드백 마무리- 자바스크립트 데이터 타입 정리
- Vue.js CH3
- 클론 코딩할 페이지 선정 및 레이아웃 구조파악하기
새로 배운 내용
1. margin이나 padding이 잘 적용되지 않는다면 태그의 속성을 먼저 생각해보기.
<strong>태그는 기본적인 속성이 block이 아닌 inline이기 떄문에 margin값이 적용되지 않는다.
2. 0.5px짜리 선을 요구하는 경우
- 선의 최소 높이는 1px이므로 이런 경우 background: linear속성을 이용할 수 있습니다.
background: linear-gradient(to bottom, gray 0%, gray 50%, transparent 50%, transparent 100%);3. <form> 태그의 경우 화면에는 보이지 않지만 해당요소에 필요한 적절한 HTML요소를 빠지지 않고 작성을 해줘야합니다.
<fieldset>: 연관성 있는 서식을 묶을 수 있음<lengend>:<form>요소의 성격을 명확하게 알려줌
4. 접근성을 보장할 수 있는 레이블링
aria-label을 이용한 방법<select class="formSelect__select" name="searchCategory" id="searchCategory" aria-label="검색 카테고리 검색">
<label>태그를 이용해 마크업 후 화면에서 사라질수 있도록 class="sr-only"를 부여해 정리<label for="searchKeyword" clas="sr-only">검색어</label>
5. 구글 검색 팁
react -vue: vue는 제외하고 검색react vs vuereact *edux
6. select 버튼의 드롭다운 스타일 지우기
appearance: none;
7. IR기법
8. user-select: none;
- 사용자가 선택을 할 수 없도록 하는 속성.
9. ::before요소와 ::after요소를 이용해 삼각형 만들기
.myCoupang__list::before,
.myCoupang__list::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.myCoupang__list::before{
border-left: 5px solid red;
border-right: 5px solid blue;
border-bottom: 8px solid green;
}
따라서 border-left와 border-right의 색상을 transparent로 설정하면 삼각형이 그려진 것을 확인할 수 있습니다.
단, 만들어진 삼각형의 border값을 설정하기 위해서는 ::after요소에 추가적인 속성을 부여해야합니다.
.myCoupang__list::after {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 8px solid orange;
top: -.7rem;
}::before와 똑같이 스타일링을 하되 top좌표의 위치를 1px차이나도록 설정을 하면 다음과 같습니다.
완성본입니다.
10. a링크에 전화걸기 기능과 이메일 기능(제목 자동설정) 설정하기
- 전화걸기
href="tel:전화번호" - 이메일보내기(제목 자동설정)
href="mailto:이메일주소?subject=문의사항"
<div class="customerCenter__telephone">
<span class="sr-only">대표 전화번호</span>
<a href="tel:15777011" class="customerCenter__telephoneLink">1577-7011</a>
</div>
<div class="customerCenter__email">
email <span aria-hidden="true">:</span>
<a href="mailto:help@coupang.com?subject=문의사항" class="customerCenter__emailLink">help@coupang.com</a>
</div>11. <small>태그
- 저작권이나 법률 관련한 내용을 마크업 할 때 사용을 할 수 있습니다.
<small class="copyrightText">Copyright © Coupang Corp. 2010-2020 All Right Reserved.</small>
12. 속성선택자를 이용한 다중 선택
[class*="navigation__list"] {
list-style: none;
padding-left: 0;
margin: 0;
}- 클래스 값이
navigation__list인 것을 가지는 것을 선택합니다.
.navigation [class^="icon-"] {
font-size: 2rem;
}-네비게이션 클래스 영역에 한정해, class이름이 icon-으로 시작하는 것을 선택합니다.
13. 인라인과 인라인 사이에는 기본적인 공백 문자가 존재합니다.
내일 공부하고 싶은 부분
- 쿠팡 전체 페이지 한번 구현해보기
- 자바스크립트 함수 재정리
하루를 마무리하며
오늘은 무언가 해도해도 끝나지 않는 공부를 제대로 체험한 것 같다.😶 그래도 재미있었던 건 이걸 이렇게 구현을 했네? 하고 생각을 하며 내가 만들었던 레이아웃 구조와 비교하면서 공부를 할 수 있었다는 부분이다.
아직 내껄로 만들기에는 조금 시간이 걸릴 것 같은데 하루 공부량과 분배를 조금 더 적절하게 조율하면서 마크다운도, 자바스크리트도 놓치지 않는 하루를 보내보고 싶다.
0seo