Velog 디자인 클론 코딩

※ 이 글은 예전 블로그에서 퍼왔으며 2020.2.16.에 작성된 글입니다.

---

VIEW

좌: width 768px 이상 / 우: width: 768px 이하

js로 상단바 움직이게 한거

독학으로 공부 하는거라 그냥 만들고 싶은걸 만들고는 있는데,

무언갈 만들다가 한 번 해메기 시작하면 기본 2시간은 잡아 먹는거 같다.

물론, 이런 시간이 있고나면 나중엔 더 빨리 작업할 수 있지만 너무 삽질하는 것도 같고 진도도 잘 못나가는거

같아서 불안하기도 하다.

---

Link

So tired

---

알게 된 점

1. button 태그의 기본 설정 없애는 법 (회색 테두리)

border: none;

2. a 태그의 기본 설정 없애는 법 (밑줄)

text-decoration: none;

3. SCSS lighten 또는 darken 사용

$color = #ffffff;
$lightColor = lighten($color, 10%);
$darkColor = darken($color, 10%);

4. 이런 슬라이드 만들 경우

상위태그{
  position: relative;
  하위태그{
    position:absolute;
  }
}

해주면 쉽게 위치를 잡을 수 있다.

​

5. overflow-wrap 속성

word-break, word-wrap 속성이 overflow-wrap로 보편화 됨.

(두 속성은 IE 전용 속성이였음.)

overflow-wrap: normal; // 단어(공백) 단위 줄바꿈
overflow-wrap: break-all; // 글자 단위 줄바꿈

6. block을 inline 처럼 보이게 하기(?)

상위태그{
  display: flex;
  하위태그{
    display: block;
  }
}

7. margin과 margin-block, margin-inline

CSS 논리적 속성과 값 이해하기 - Webactually

8. 마우스와 맥북 트랙패드 스크롤에 대해

스크롤 값이 일반 마우스는 아마 한 번에 120씩 변하는데 반해, 맥북 트랙패드는 관성이 있어 여러번 작동하며 0~800+ 까지 변한다. 그래서 스크롤 한 번 할 때마다 값을 변하게 하고 싶다면 이 점을 신경써야한다.