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 vue
• react *edux

6. select 버튼의 드롭다운 스타일 지우기

• appearance: none;

7. IR기법

• [HTML/CSS] 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:[email protected]?subject=문의사항" class="customerCenter__emailLink">[email protected]</a>
</div>

11. <small>태그

• 저작권이나 법률 관련한 내용을 마크업 할 때 사용을 할 수 있습니다.
• <small class="copyrightText">Copyright &copy; 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. 인라인과 인라인 사이에는 기본적인 공백 문자가 존재합니다.

내일 공부하고 싶은 부분

• 쿠팡 전체 페이지 한번 구현해보기
• 자바스크립트 함수 재정리

하루를 마무리하며

오늘은 무언가 해도해도 끝나지 않는 공부를 제대로 체험한 것 같다.😶 그래도 재미있었던 건 이걸 이렇게 구현을 했네? 하고 생각을 하며 내가 만들었던 레이아웃 구조와 비교하면서 공부를 할 수 있었다는 부분이다.

아직 내껄로 만들기에는 조금 시간이 걸릴 것 같은데 하루 공부량과 분배를 조금 더 적절하게 조율하면서 마크다운도, 자바스크리트도 놓치지 않는 하루를 보내보고 싶다.