미니프로젝트 2일차 22.04.21

오늘은 미니프로젝트 팀소개 페이지 마지막날 이다.

• css 작업중 공부한 것 , 적용해본 값들 + 만든 코드리뷰

• display 속성값

  • none (보이지않음)

    • 요소를 렌더링하지 않도록 설정합니다. visibility 속성을 hidden으로 설정한 것과 달리, 영역도 차지하지 않습니다.

  • block (블록 박스)

    • div 태그, p 태그, h 태그#, li 태그 등이 이에 해당됩니다.

    • 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다. 이는 word 같은 문서에서 문단을 표시할 때, 한 문단이 끝난 뒤에 나타나는 요소는 항상 다음 줄에 표시되던 것과 비슷한 맥락입니다.

    • width, height 속성을 지정 할 수 있으며, block 요소 뒤에 등장하는 태그가 그 이전 block 요소에 오른쪽에 배치될 수 있어도 항상 다음 줄에 렌더링됩니다.

  • inline (인라인태그)

    • block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없습니다. word 같은 문서에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문장에 효과를 주기 위해 존재하는 단위라고 할 수 있습니다. 문서에서 특정 부분에 색상을 입힌다고 다음에 나오는 글이 줄바꿈 되지 않듯이 inline 요소 뒤에 나오는 태그 또한 줄바꿈 되지 않고 바로 오른쪽에 표시됩니다.

  • inline-block
    + block과 inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정 할 수 있습니다.
    Internet Explorer 7 이하에서는 사용할 수 없습니다.

  • flex

    • Flex는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공합니다.

• justify-content

  • 처음 보는 속성 값이다
    justify-content 속성은 플렉스 요소의 수평 방향 정렬 방식을 설정한다.
    • 1. flex-start : 기본 설정으로, 플렉스 요소는 플렉스 컨테이너의 앞쪽에서부터 배치됩니다.
    • 2. flex-end : 플렉스 요소는 플렉스 컨테이너의 뒤쪽에서부터 배치됩니다
    • 3. center : 플렉스 요소는 플렉스 컨테이너의 가운데에서부터 배치됩니다.
    • 4. space-between : 플렉스 요소는 요소들 사이에만 여유 공간을 두고 배치됩니다.
    • 5. space-around : 플렉스 요소는 앞, 뒤, 그리고 요소들 사이에도 모두 여유 공간을 두고 배치됩니다.
  • space-around 를 이용해서 아이콘들의 배치를 하였다. 그래도 뭔가 맞지 않아 margin left 값을 주었다.

• goToScroll 코드리뷰

  • 기능중 클릭스 스크롤 이동 기능을 구현하였다. 이때 goToscroll 를 이용하였다.

    var location = document.querySelector(".content_team").offsetTop;

    query select를 이용하여 좌표값.offsetTop;을 구한다.

    function goToScroll_hwang() {
    var location = document.querySelector("#hwang").offsetTop;
    console.log(location)
    window.scrollTo({top: location, behavior: 'smooth'});
    }

    id값이나, css좌표를 이용해서 좌표값을 구하고 그 값으로 이동할수 있다. 'smooth'하게

• cosnt

  • 처음보는 것이다. 상수라고 한다. 정해놓고 변하지 않을 (수정하지 않을) 값을 지정 할 때 사용한다.

• 오늘 하루 회고

  • 오늘도 많이 해멨다... 정말 팀원들 기능 구현하는거 보고 모르는점이 너무 많다.
  • css적인 기능들 어떻게 상속되고, 어떻게 영향을 미치는지, 그 값들이 어떤 영향인지 다시한번
    공부를 해야 될 것 같다.
  • js 부분은 손도 못댔다. js기능 구현을 개인적으로 연습해보자.
  • 아직도 갈길이 멀...다..........
  • 페이지 로딩이 오래걸린다 1. css flex값 충돌(예상)(억지로 끼워 맞추다보니) / JS 무한루프(예상)
  • 내일 하나씩 뜯어보면서 분석해보자.