이름 | 배운 내용 | memo | 보충할 것 | 질문하고 싶은 것 |
김설하 | - flex basis→ margin 속성을 주며 정렬이 안 맞던 현상을
negative margin 으로 해결한 것
-flex 속성의 유연함으로 인해 일부 svg요소가 작아지는 것 눈으로 확인
→ flex-shrink: 0; 속성으로 줄어들지 않게 설정
tag- span의 경우
부모의 폰트사이즈 상속받아서 유기적으로 처리될 수 있도록 em처리
- flex로 아이템들의 정렬 맞추기
- margin-top: auto; 속성 : 쓰이지 않은 윗 공간 쓸 수 있게 됨
(활용하지 않은 위쪽의 margin영역이 auto로 잡혀서 컨텐츠가 아래로 내려감)
.price-item.most {
margin: -20px 20px;
} 으로 가운데 컨텐츠만 튀어나오게 보이는 것 (외워야겠다..)
웹페이지 메인 구성 뿐만이 아니라
컨텐츠 안에서도 헤더-컨텐츠-푸터 3단계로 볼 수 있다. | 정렬 유의하며 css 짜는 시선..!
뭔가를 배치할 때 네거티브 마진의 유용성을 느낌
내 딴의 시멘틱 태그 고민하며 먼저 해보고 강의로 절충하며 채워본다든지 능동적으로 해봤는데, 시간은 오래 걸렸지만 내가 무심코 잘못하고 있는 작업과정을 발견할 수 있어서 좋았다. ** 덩어리 하나를 완성하고 복붙해서 변화만 주기 **
깃허브 올리는 과정에서 배운 커맨드
$ git restore —staged .
잘못 git add 된 스테이징 사항들 다시 내리는 것
(.) 을 붙였으므로 다 내림 | - negative margin
- 인라인 간의 세로 정렬이 항상 골치가 아프다 → flex 말고 다른 솔루션이 있는지? | 이 예제를 하실 때는 다들 시멘틱 태그에 대한 고민을 해보셨으면 좋겠어요!! 맞춰보고 싶은 마음에 먼저 html짜보고 영상 시청했는데 덩어리를 보는 시선이 다른 게 재밌더라구요 
처음 html을 짤 때
section> (header>h2) + section> article*3 으로 큰 덩어리를 잡으려 했는데,
header 안에서 보여주는 헤딩이 상위 section의 헤딩과 내용적으로 같은데 어떻게 해결하나
⇒ 평소에 단위를 쪼개는 습관 때문. 어쩐지 헤딩 태그가 많아지더라
⇒ 헤더 역할을 하는 영역이 제목 외의 어떠한 컨텐츠를 포함하지 않는다면 따로 영역 지정해주지 않기 |
권지혜 | 1. display: flex 속성은 상당히 유연한 속성이기 때문에, 이 속성으로 인해 작아지면 안되는 속성들이 작아지기도 한다. 예를 들면 이번 영상에 나왔던 svg 속성처럼.
→ flex-shrink: 0을 주면서 해결. 원래 flex-shrink의 기본값은 1이다.
2. svg 속성에 바로 color 태그만 쓰면 먹히질 않는다.
이때 color 태그에 색을 지정하되, fill이라는 태그를 사용하여 currentcolor를 쓰면 color에 영향을 받아 색이 바뀐다.
3. font-size는 부모로부터 자식이 상속을 받는데, font-size를 px 단위를 써서 개별적으로 하나하나 지정하는 대신, 부모의 크기에 영향을 받아 상대적으로 바뀌는 em 단위를 쓸 수 있다.
예를 들어 부모의 font-size가 30px일때, 자식에게 0.5em을 쓰면 결과적으로 부모의 반인 15px이 적용된다. |
이름 | 배운 내용 | memo | 보충할 것 | 질문하고 싶은 것 |
김설하 | JS를 이용하지 않은 모달 윈도우 / 실무적인 예제는 아님 | |||
권지혜 | 1. <a>와 <a> 밑에 있는 <div>가 서로 연계될 수 있도록 의도적으로 <a>에 써져있는 링크와 id 선택자를 똑같은 단어로 작성한다.
예) <a href=”#open”>open</a>
<div id=”open” class=”modal”>Contents</div>
2. 해시정보가 해당 요소의 id와 일치할 때 가상요소 target을 사용하여 a 태그를 단 버튼을 누르게 되면 배경색이 다른 색으로 바뀌게 만들 수 있다.
예) .modal:target{
background-color:blue;}
3. 컨텐츠 내용이 상대적으로 많이 들어가는 자식 요소에 flex-grow:1을 사용해서, 옆에 있는 요소보다 훨씬 가로로 넓어지게 할 수있다.
4. backdrop-filter: blur(4px)
익스플로러에 사용이 불가하다는 단점이 있으나, 이 태그를 사용하게 되면 요소 뒤에 블러처리를 하거나 색상 필터링을 할 수 있는 등 다양한 효과를 낼 수 있다.
효과를 제대로 보기 위해서는 배경을 최소한 반투명하게 만들어줘야한다.
사파리에서 사용하려면 -webkit-을 앞에 붙여줘야한다.
5. 이미지가 위아래로 움직이게 만들고 싶다면?
@keyframes fly{
0%{transform: translateY(5%);
100%(transform: translateY(-50%);}
한 후에 해당 이미지 부분 요소에 animation-name: fly;를 쓰면 됨.
animation-duration은 속도 조절
animation-iteration-count: infinity 하면 무제한으로 움직이기 가능.
0%→100%→0%→100% 순서로 이미지가 계속 움직이게 만들고 싶다면
animation-direction: alternate;
6. 모달창이 안보였다가 보이게 하고 싶다면?
.window{
transform: translateY(-150%);
opacity: 0;}
⇒ 클릭을 하기 전 모달창이 안보이고 한마디로 화면보다 훨씬 위에 있는 상태
.modal:target .window{
transform: translateY(0);
opacity: 1;}
⇒ 클릭을 한 후에 모달창이 아래로 내려오고, 투명도 조절을 한 상태
모달창이 자연스럽게 스르륵 내려오게 하고 싶다면 transition 태그 사용. |
