본문 바로가기

분류 전체보기

(75)
2023.09.13 CSS 코드 속성 값 설명 align-items: 이 속성을 사용하면 요소의 수직 (세로) 정렬을 한다. center 주로 수직 가운데 정렬을 위해 사용된다. flex-end 수직 축의 끝 부분에 정렬한다. flex-start 요소를 수직 축의 시작 부분에 정렬한다. stretch 수직으로 늘려서 컨테이너의 높이에 맞게 정렬한다. baseline 기준선에 정렬한다. 요소의 텍스트 기반 정렬을 사용할 때 유용하다. justify-content flex-start 플렉스 아이템을 가로 축의 시작 부분에 정렬. flex-end 플렉스 아이템을 가로 축의 끝 부분에 정렬. center 플렉스 아이템을 가로 축의 중앙에 정렬. space-between 플렉스 아이템 사이에 동일한 간격을 유지하며 정렬. space-around..
2023.09.12 자바스크립트 코드 코드 의미 === 엄격한 비교연산자 ( 하나라도 다를시 값이 나오지 않음 ) == 유한 비교연산자 ( 하나정도 달라도 값이 나옴 ) classList classList.add classList.remove classList는 뒤에 add / remove 같이 사용해줘야함. 어떠한 요소를 동적으로 관리해주는 역할. element 객체는 웹 페이지의 구조와 콘텐츠에 대한 접근 및 조작을 가능하게 하는 핵심 도구 중 하나이다. join 메서드는 배열의 모든 요소를 하나의 문자열로 결합하고, 요소 사이에 seperate로 지정한 문자열을 삽입하여 반환합니다. 반환된 문자열은 콤마로 구분된 문자열입니다. 예제) const fruits = ["apple", "banana", "cherry"]; const resul..
VS CODE 단축키 정리 ( 자주 쓰는 단축키 ) // VS CODE 정리 단축키 설명 더블클릭 Ctrl + D 특정단어 전체 선택하기 Alt + 클릭 원하는곳 개별선택 Alt + 화살표 ( 위,아래 ) 코드 위치 변경 (위,아래) Alt + Shift + 화살표 복사해서 원하는 위치로 변경 Ctrl + / 주석풀기 Alt + Shift + 드래그 원하는 곳에 커서를 뒀을때 한번에 선택하기 Ctrl + home / end 맨위.아래로 이동 Ctrl + B 목록숨기기 Alt + Shift + F 태그 및 정렬 정리
23.09.06 <css tag일지> 태그 설명 문법 box-sizing: border-box; box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성이다. box-sizing : content-box(콘텐트 영역을 기준으로 크기를 정한다.) box-sizing : border-box (테두리를 기준으로 크기를 정한다.) box-sizing : initial (기본값으로 설정한다.) box-sizing : inherit ( 부모요소의 속성값을 상속받는다.) list-style 목록화 시키는 작업이다. ul / li / ol 를 대신하는 작업 : disc, circle, square => list-style-type: disc : decimal, decimal-le ading-zero =>list-style-type: ..
23.09.06 <java script tag일지> 의미없는 태그 span (line구조) div (박스구조) javascript 태그 query selector 웹 개발에서 사용되는 JavaScript의 함수 중 하나입니다. 이 함수는 HTML 문서에서 원하는 요소를 선택하고 조작하는 데 사용됩니다. inner text 이 속성은 주로 JavaScript를 사용하여 HTML 문서의 텍스트를 읽거나 변경하는 데 사용됩니다."innerText"를 사용하면 웹 페이지에서 동적으로 텍스트를 변경하거나 읽어들이는 데 유용하게 활용할 수 있습니다. classList 이 속성을 사용하면 요소의 클래스를 추가, 제거, 토글하고 클래스 목록을 검사할 수 있습니다. 추가할땐 .add("active") / 제거할땐 .remove("active") 특정 클래스를 지정하고 추..