20250307 데브코스 프론트엔드 Day3, 4

💡 인사이트

• 색상 적용시 보이는대로 믿지 말고, 색상 확인해보기
  
  
• root.css에서 변수 선언해서 사용한다. 이렇게 해야 유지보수할 때 편하다. 값 바꿔야 할 때 변수 값만 바꾸면 되니깐.
  
  
• 이미지 파일이 나눠져서 존재하는게 아니고, 여러개가 모여있는 하나의 파일을 받는다. 그러면 위치 값을 피그마나 포토샵 프로그램으로 찾아서 위치 값을 지정해주는 것이다.
  background-image로 넣고, background-repeat: no-repeat해주고, background-position으로 하나하나 위치 값을 지정해준다.

overflow

• auto : 박스의 크기가 컨텐츠 내용보다 작을경우 스크롤바가 생성
• hidden : 크기값을 벗어나는 컨텐츠는 안보이게 표현 (ex는 지원하지 않음)
• scroll : 컨텐츠와 박스의 크기와 상관없이 스크롤바 생성
• visible : 박스의 크기와 상관없이 무조건 전부 보여줌
  
  

overflow-x & overflow-y

• overflow-x : 내용이 넘치는 경우 가로방향으로 스크롤 표현
• overflow-y : 세로방향으로 스크롤 표현 auto, scroll, hidden, visible
  
  

!important

강제성 부여해서 우선순위 지정 가능

float

자식에 float 지정하고, 부모에서 float 해제하는게 좋음.

float 해제 방법

• overflow: hidden
• display: inline-block
• 자식에 float: right, 부모에 float: left를 해서 해제하는 방법도 있지만 권장하지 않음.
  
  

:nth-of-type & :nth-child

• :nth-of-type : 같은 요소들 중에서 선택.
  ie. p:nth-of-type(2)이면 같은 p 타입인 자식 요소들 중에서 두번째 요소를 선택함.
  
• :nth-of-child : 전체 자식 요소 중에서 선택.
  ie. strong:nth-child(2)이면 자식 요소 중 2번째이자 strong 태그인 요소를 선택함.
  
  

position: absolute

자신의 부모 컨텐츠를 확인한다.
특히 부모가 position: relative인지 확인해야 된다.
position:relative가 아니면 또 그 조상으로 다시 간다.

z-index

z-index 값이 큰게 제일 위로 올라간다.

order

order 값이 큰게 뒤로 이동하고, order이 지정이 안되어 있으면 가장 작은 값 바로 뒤로 이동한다.

위치잡기

• 옆으로 옆으로 할 때는 float, display(flex), grid
• 어떤 요소 안의 요소의 위치를 변경하거나 포갤때는 position 사용
  
  

부모 & 자식

• 부모 : display, flex-flow (flex-direction, wrap), justify-contnet, align-content, align-items
• 자식 : order, flex (flex-grow, flex-shrink, flex-basis), align-self

---