[TIL] 04.17

< Question >

1. div 배치와 사이즈는 괜찮은데 왜 스크롤이 생길까?

(header, footer 수정하여 깃에 커밋했는데 자꾸 스크롤이 생김)
body 를 윈도우 최대 크기인 100vh, 100vw 이거로 설정해서 그런가..?

2. git 충돌

3. pull 후에 이미지 깨지거나 엑박뜨는경우

4. 글자 밑줄 간격 더 띄우는 방법

5. 아이콘에 노션 링크 건거 새창으로 뜨게 만들기

---

< 튜터님 피드백 >

• 1. Header & Footer 고정시키는 방법에는 position 을 fixed 하는것을 추천하신다.

  어차피 위/아래에 고정되어있기때문에.
  
  -> 스크롤이 생겼던 이유는 헤더가 position: fixed; 가 아니라 display: fixed 로 적용이 되어있었다.. 깃에서 pull 해오면서 다른분이 수정하신듯하다! (display flex 오타 예상)
  -> header : top 0, footer : bottom : 0 + position : fixed 적용하기. (헤더를 싸고있는 내용에 css 주지말고 header 자체에 css 로 위치 주기)
  -> 페이지말고 section 내에서 header 와 footer 가 필요한 경우에는 absolute 적용해도 괜찮다. 어차피 바깥 구역에 침범하지 않기 때문!!
  -> 개인정보 상세페이지에는 스크롤이 필요하지않아서 header, footer 사이즈를 고정시킨 후 div 를 중앙에 맞게 조절했는데, 메인페이지와 생성페이지에는 스크롤이 필요하여 CSS 분리작업을 하였다.

• 2. header, footer 에 따라 바디부분이 달라져서 다른 팀원분들도 계속 수정, push+pull 과정에서 억지로 저장하는 경우도 생겨서.. 웬만해선 고정으로 있는 부분은 업무분배 초기에 확실하게 정해놓고 가는게 편할듯하다.

• 3. 이미지 엑박으로 구성되어있는 div 배열이 무너져서 보이곤 했는데, 이미지 파일 경로를 설정할때 무조건 ./ 으로 시작하여 현재 내 위치부터 시작되도록 해야함! 어느사진은 적용이 되어있고, 또 어떤건 안되어있어서 전부 ./ 로 시작해서 위치 타고들어가는 방법으로 수정하니 해결되었다.

  • user agent styleshee
    내가 아무런 값을 지정해주지 않았을때, user agent stylesheet가 적용될 수 있다.
    프로젝트를 시작하면, 초기에 먼저 css를 초기화하고 시작하는 것이 좋다. 이렇게 초기화를 해주는 이유는 브라우저마다 기본으로 제공하는 스타일이 있기때문이다.

  • user agent stylesheet이란?
    (= 사용자 에이전트 스타일시트)
    사용자 에이전트 / 브라우저에서 기본스타일을 제공하는 기본 스타일시트.
    모든 문서에는 이러한 user agent stylesheet가 있다.

  ->  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@4.0.1/reset.min.css"/>
  ->  head 태그 안에 위에 코드 작성.

• 4. 밑줄은 태그로 text-decoration 속성이 아닌 border-bottom 속성을 지정해주었다.

  padding-bottom 값을 지정하여 텍스트와 밑줄 사이의 간격을 지정할 수 있다.
  <border-bottom: 1px solid red;>
  border-bottom 속성을 조정하여 밑줄의 모양과 굵기, 모양, 색깔을 조정!

• 5. 새로운 창으로 링크 이동 : target blank 걸기.

• 6. display: inline-block 나란히 나열

• 7. 아이콘 한바퀴 구르기 효과

.icon_edit:hover {
  transition: all 1.5s;
  transform: rotate(360deg);
}