211104 프론트엔드 스쿨 4일차

수업 내용

모든 내용 X
새로 알게된 내용, 헷갈리는 부분, 중요한 부분만 기재함

1. border

• border는 width에 포함되지 않는다
  예외) box-sizing: border-box;
  
  

2. radius
radius를 익히기 위해서 실습으로 라이언캣 만들기 😁

이걸 다들 진심으로 임해서 '제 1회 자신만의 캐릭터 그리기 경진대회'까지 열렸다 🤣

3. margin

• 마진 겹침 현상(margin collapsing)
  • 요소와 요소 사이의 margin 값이 겹칠 경우 더 높은 값이 적용되는 현상
  • 자식 요소의 margin값이 부모의 높이에 영향을 미치는 현상
    
  • 해결법! 부모에게
    1. overflow 속성 값 적용
    2. display: inline-block
    3. border 값 적용

4. background

• background와 background-color는 다르다
  background가 관련 속성을 모두 포괄
  background-color는 단축 속성
  
  
  

5. background-image와 img태그 ❗관련링크 다시 보기❗

• 정적인 이미지는 img태그
  변하지 않을 이미지 ex) 배경 이미지

• 동적인 이미지는 background-image
  변할 가능성이 있는 이미지 ex) 베스트셀러의 표지

• 디비에서 불러와야 하는 이미지 같은 경우 CSS로 작업을 하면 백엔드 개발자가 작업하기에 어려움이 있어서 img 태그로 작성

• 관련 링크
  velog - img Tag vs Div(Background img)
  stackoverflow - img Tag vs Div(Background img)
  
  

6. font

• link vs import
  보통 fe들은 import 많이 쓴다

• 요소 - 계산됨 - 모두 표시 - 폰트와 관련된 속성을 다 볼 수 있다
  

• 개발 서체가 따로 있다
  가독성과 정확성을 높이기 위해 사용하는데 대표적으로 네이버 코딩 폰트 D2가 있다

• bootstrap 한글판은 구버젼
  
  

7. opacity와 rgba 차이

• opacity : 하위 요소의 불투명도에 영향을 줌
• rgba : 해당 요소의 불투명도에만 영향을 줌
  
  

8. color 📝미완성

• RGB : 0~ 255 값
  
  

9. position

• 위에서 아래로 차례대로 놓인 box에 position 속성을 적용시켜 움직이기
  (아래 그림은 static인 상태이며 box에 적힌 문구대로 속성을 적용시킬 예정)

relative는 자기가 static 이었을 때의 위치를 기준으로 이동했다
원래 위치에서 왼쪽으로 30px 떨어짐

absolute의 top을 0으로 지정하니 body의 top과 위치를 같이 함

• 움직이기 2
  해당 예시에서 absolute에 top: 100px을 지정하니 relative의 top에서 100px 떨어짐

top: 0을 지정하니 relative의 top과 위치를 같이 함

• 움직이기 3
  보라색 absolute는 top: 0 left: 100px 지정 → body 기준으로 이동함
  파란색 relative는 left: 30px 지정 → 자기가 static 이었을 때의 위치를 기준으로 이동
  주황색 absolute는 top: 0 left: 64px 지정 → 부모인 relative을 기준으로 이동함
  

• 움직이기 4
  버튼 2개를 만들고 position: fixed을 줬다
  다크모드로 보기 버튼은 right: 84px bottom: 27px, 위로 가기 버튼은 right: 15px bottom: 27px 으로 지정했다
  창 크기를 줄이고 늘려도 버튼의 위치는 고정적이다
  
  

• 움직여보니까

  • absolute는 부모가 relative를 가지고 있으면 부모 기준으로 이동한다
    없으면 body를 기준으로 이동한다
  • relative는 static 이었을 때의 위치를 기준으로 위치한다
  • fixed는 viewport(사용자에게 보여지는 웹페이지의 영역)를 기준으로 위치한다
    
    

10. float

• 부모 .wrap 아래 자식 .content 2개가 위치해있다
  .content을 가로로 나란히 놓기 위해 float 속성을 써주기
  

  부모 .wrap이 자식들을 감싸지 않는다
  float으로 인해 자식들이 붕 띄워져서 높이값을 인식못하고 있다
  

• float으로 떠다니는 애들을 가두는 방법

1. 부모에게 overflow: hidden 주기
   부모의 높이가 auto일 때, 부모가 overflow: hidden을 할려면 해당 box 요소의 정확한 영역을 알아야 하기 때문에 부모의 높이를 결정짓는 자식의 height을 되찾아 오게 된다
   부모가 높이값을 찾으면서 떠다니던 자식들이 품으로 돌아온다
   
2. clear-fix 방법
   부모에게 ::after 가상요소를 이용해 아무것도 없는 막내 자식을 준다
   ❗ 이론 다시 찾아보기 ❗
   

오늘의 TIP

1. 참고 링크
codepen - 3D juliangarnier
youtube - css 소 만들기
tistory - 라이언 그리기
velog - 잘 쓴 블로그 추천
w3schools - font-size 확인
adobe - 컬러 참고
velog - Git vs Git Hub

새로 알게 된 내용

• relative가 static이던 때를 기준으로 이동한다는 것을 알게 됐다.
  여기서 나의 문제점이 나온다. 이론을 너무 어렴풋이 이해하고 있다.
  이거 왜 이렇게 되는거야? 라고 물으면 그냥 그런거야...라고 밖에 말할 수 없다😭
  professional한 프론트엔드가 되기 위해서 노력하자.

• TIL의 방향성
  지금은 개념 단계를 배우는 중이니까 다른 이에게 설명하듯이 서술하고 예시도 추가하면 더 좋겠다는 피드백을 받았다!
  이번 글의 position부터 피드백을 반영해보았다.
  아직 부족하지만 확실히 이전 방법보다 나은 거 같다.
  대강 아니까 넘어가자고 속삭이는 나의 자아와 싸우자... 🥊
  시간이 좀 걸려도 나만의 예시를 만들어서 이론 공부와 실습을 동시에 진행하고 해당 내용을 TIL에 정리하는 방식으로 해봐야겠다.
  내일부터는 피드백을 완벽 반영해서 TIL을 알차게 채우자~ 💻
  
  

제 1회 자신만의 캐릭터 그리기 경진대회 개최

• 제출은 자정까지, 투표는 따봉 이모지로 금요일 수업 전까지
• svg, animation 등의 고급 스킬 금지

추진력 대박적인 멋사 식구분들 👍
나도 열심히 그려서 제출했다
이만하면 제출까지는 그래도 할 만하지.. 하고 냈는데 정말 세상 고수들 다 숨어계셨죠
저만 속았죠...