이번주 할 일! ⇒ 요 빔캠프 스터디 레포지토리 만들기 채워나갑시다 ~
이름 | 배운 내용 | memo | 보충할 개념 | 질문하고 싶은 것 |
김설하 | 1. position: absolute 사용이 인상깊었어요!
opacity: 0으로 보이는 것만 없어지고 공간은 차지하는 상태가 되는데 그걸 position: absolute 처리를 하면 요소가 노말 플로우에서 벗어나서 기존의 공간을 차지하던 것이 없어지는 것이 신세계였습니다.
2. translate
line-height으로 간격 정제 후
transform: translate(0,1em) 으로 딱 메인메뉴 글자 밑에 깔끔하게 배치하신 것!
3. pointer-events: none
이벤트 제어 속성 / 호환성 문제
처음 보는 속성이었습니다 ..
4. 가상요소로 마우스 이벤트가 없어지는 빈 공간을 채운 것
5. 가상요소의 border 이용해서 화살표 꼬다리 만들기
| 글자크기 이용해서 요소들 배치 조절하시는거 아트다 아트…
간단한 기능을 퀄리티 있게 하라는 말씀이 이런걸까요 …
디자이너적 시선도 느낄 수 있었던 것 같아요. 요소들 간의 사이즈가 어떻게 유기적으로 나오는지 다 알고계시는 느낌?! 젠장 디자인 공부 하고싶어졌다 ㅋㅋ
2. trasnlate 사용이 예술이라고 느꼈어요 …..와… 제가 평소에 멀리하던 속성이라 그런가 반성했습니다
3. 이벤트 제어 속성을 처음 봤는데요 ⌒.⌒ㅠ 잘 쓰면 정말 간편하겠구나 싶어요
4. 가상요소로 빈 공간 채우기!
나라면 관성대로 padding 으로 채웠을 것 같은데 새로운 접근법 알고 갑니다
position을 주면 노말 플로우에서 벗어난다는 사실도 그렇고, 대체적으로 이론으로 알고있는 사실임에도 이렇게 사용할 수 있구나..헤엥..이러고 본 듯싶어요 많이 자극이 됐습니다! | position, transform,
pointer-events
opacity는 공간을 점유하는데 visibility: hidden 이나 기타 숨김 속성들은 어떻게 작용하는지 정리해보기 | |
이름 | 배운 내용 | memo | 보충할 개념 | 질문하고 싶은 것 |
김설하 | 1. position: absolute 사용이 인상깊었어요!
opacity: 0으로 보이는 것만 없어지고 공간은 차지하는 상태가 되는데 그걸 position: absolute 처리를 하면 요소가 노말 플로우에서 벗어나서 기존의 공간을 차지하던 것이 없어지는 것이 신세계였습니다.
2. translate
line-height으로 간격 정제 후
transform: translate(0,1em) 으로 딱 메인메뉴 글자 밑에 깔끔하게 배치하신 것!
3. pointer-events: none
이벤트 제어 속성 / 호환성 문제
처음 보는 속성이었습니다 ..
4. 가상요소로 마우스 이벤트가 없어지는 빈 공간을 채운 것
5. 가상요소의 border 이용해서 화살표 꼬다리 만들기
| 글자크기 이용해서 요소들 배치 조절하시는거 아트다 아트…
간단한 기능을 퀄리티 있게 하라는 말씀이 이런걸까요 …
디자이너적 시선도 느낄 수 있었던 것 같아요. 요소들 간의 사이즈가 어떻게 유기적으로 나오는지 다 알고계시는 느낌?! 젠장 디자인 공부 하고싶어졌다 ㅋㅋ
2. trasnlate 사용이 예술이라고 느꼈어요 …..와… 제가 평소에 멀리하던 속성이라 그런가 반성했습니다
3. 이벤트 제어 속성을 처음 봤는데요 ⌒.⌒ㅠ 잘 쓰면 정말 간편하겠구나 싶어요
4. 가상요소로 빈 공간 채우기!
나라면 관성대로 padding 으로 채웠을 것 같은데 새로운 접근법 알고 갑니다
position을 주면 노말 플로우에서 벗어난다는 사실도 그렇고, 대체적으로 이론으로 알고있는 사실임에도 이렇게 사용할 수 있구나..헤엥..이러고 본 듯싶어요 많이 자극이 됐습니다! | position, transform,
pointer-events
opacity는 공간을 점유하는데 visibility: hidden 이나 기타 숨김 속성들은 어떻게 작용하는지 정리해보기 | |
이름 | 배운 내용 | memo | 보충할 개념 | 질문하고 싶은 것 |
김설하 | 컨텐츠 크기만큼 가로 잡아주는 속성
1. 고전적인 방법 : display: inline
2. width: max-content`
선택자 우선순위 문제 해결법 : 선택자를 더 추가해서 점수를 높여준다
justify-content: center이 훨씬 직관적인 방법이라지만 space-around 이용해서 이미지 가운데 정렬하신 것 신박했다
이미지는 대체적으로 flex-shrink:0로 줄어듦 방지하는 편 | 애니메이션 ᐟ.ᐟ.ᐟ. 호버하면 밑줄쳐지는거 배우고싶었는데 이렇게 배워간다 ㅎㅎ margin 이용하는거였구나
left right 0으로 양옆 펼치는 것을 십분 활용한 예제가 아니었나 싶다
overflow: hidden 이 포인트인듯
다른 아코디언 디스플레이 예시도 해보고싶다 | overflow를 적극적으로 써볼 생각 | |
권지혜 | 컨텐츠 크기만큼 아래 가로선을 잡아주는 방법은
1. 텍스트 양만큼 너비가 잡힐 수 있게 display: inline-block을 넣기
또는 2. width: max-content 해주는 방법이 있다. 이 방법은 익스 지원X
글자 사이 간격이 필요할 때 letter-spacing. px 단위보다는 em단위로 줘야 상대적 영향을 받는다.
background-color: currentcolor는 부모로부터 컬러를 받아온다는 뜻. |
