developer_kcm

요소의 가시성 관찰(Intersection Observer) - 기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지를 구별하는 기능을 제공합니다. 이 기능은 비동기적으로 실행되기 때문에, scroll 같은 이벤트 기반의 요소 관찰에서 발생하는 렌더링 기능이나 이벤트 연속 호출 같은 문제 없이 사용할 수 있습니다. const io = new IntersectionObserver(function (entries) { entries.forEach(function (entry) { console.log(entry.isIntersecting, entry.target) })..

Git(깃)은 컴퓨터 파일의 변경사항을 추적하고 여러 사용자들 간에 해당 파일 작업을 조율하기 위한 대표적인 버전 관리 시스템(VCS)이다. GitHub는 대표적인 무료 Git 저장소이다. GitHub 업로드 순서 git init // 현재 프로젝트에서 변경사항 추적(버전 관리)를 시작 git config --global core.autocrlf true(windows) or input(MacOS) // 개행문자(Newline) 설정 git config --global user.name '사용자이름' // 2~3 커밋(버전 생성)을 위한 정보 등록 git config --global user.email '이메일주소' // 2~4는 git을 처음 설치하고 사용할 때 설정한다. git config --glo..

전환(transition) transition 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성 - 속성명 지속시간 타이밍함수 대기시간; # 지속시간은 단축형으로 작성할 때, 필수 포함 속성 ## 속성 값을 여러 개 지정 가능 - transition-property(속성명) - transition-duration(지속시간) - transition-timing-function(타이밍함수) - transiton-delay(대기시간) >> transition-property 전환 효과를 사용할 속성 이름을 지정 - all : 기본 값(모든 속성에 적용) - 속성이름: 전환 효과를 사용할 속성 이름 명시 >> transition-duration 전환 효과의 지속시간을 설정 - 시간: 지속시간(s)을 지정 >>..

display Flex Container의 화면 출력(보여짐) 특성 flex => 블럭 요소와 같이 Flex Container 정의 inline-flex => 인라인 요소와 같이 Flex Container 정의 >> flex-direction 주 축을 설정 - row => 행 축 (좌 => 우) - row-reverse => 행 축 (우 => 좌) - column => 열 축 (위 => 아래) - colume-reverse => 열 축 (아래 => 위) >> flex-wrap Flex Items 묶음(줄 바꿈) 여부 - nowrap(기본값) => 묶음(줄 바꿈) 없음 - wrap => 여러 줄로 묶음 - wrap-reverse wrap의 반대 방향으로 묶음 >> justify-content 주 축의 정렬..

position - static 기준 - relative 요소 자신을 기준 - absolute 위치 상 부모 요소를 기준 - fixed 뷰포트(브라우저)를 기준 - sticky 스크롤 영역 기준 (postion과 같이 사용하는 css 속성들은 모두 음수를 사용할 수 있다.) => top, bottom, left, right, z-index - auto 브라우저가 계산 - 단위: px, em, rem 등 단위로 지정 요소 쌓임 순서(Stack order) 중요! 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정 1. 요소에 postion 속성의 값이 있는 경우 위에 쌓임 (기본값 stactic 제외) 2. 1번 조건과 같은 경우, z-index 속성의 숫자 값이 높..

css 가상 클래스 선택자 :hover 마우스를 요소에 올려두는 동안 동작 :active 마우스를 클릭하고 있는 동안에만 동작 :focus 선택자 ABC 요소가 포커스되면 동작 대표적으로 input 요소 tabindex 속성을 통해 Focus가 될 수 있는 요소를 만들 수 있다. 이름에서도 알 수 있듯, Tab 키를 사용해 Focus 할 수 있는 순서를 지정하는 속성이다. 순서(값)로 -1이 아닌 다른 값을 넣은 것은 논리적 흐름을 방해하기 때문에 권장하지 않는다. 가상 클래스 선택자 FIRTST CHILD 선택자 ABC가 형제 요소 중 첫째라면 선택 .fruits span: first-child {} .fruits라는 클래스를 가진 부모 요소의 여러 형제 요소 첫째 자식 요소에 적용 단, 첫째 자식이 ..