Power 개발일지

안녕하세요!오늘은 제가 공부할 때 자주 사용하는 Visual Studio Code 단축어를 소개해드리겠습니다.특히 HTML에서 클래스(Class)나 아이디(Id)를 지정할 때 유용한 단축어를 알려드릴게요.Visual Studio Code에서는 Emmet 기능을 통해 더 빠르게 HTML 코드를 작성할 수 있답니다.Class와 ID 빠르게 지정하기HTML에서 CSS 클래스는 . (점), 아이디는 # (샵)을 이용해 빠르게 생성할 수 있어요. 클래스 지정.클래스명 입력 → 자동 생성 .name 아이디 지정#아이디명 입력 → 자동 생성html복사편집#ID div id="ID">div>#ID 여러 개 한 번에 만들기 (*숫자)클래스나 아이디를 여러 개 생성하려면 *숫자를 붙이면 됩니다.Class복사편집...

오늘은 addEventListener의 종류를 알아보겠습니다.addEventListener는 JavaScript에서 특정 이벤트가 발생했을 때 실행할 함수를 등록하는 메서드 입니다. UI 이벤트이벤트설명load웹 페이지의 로드가 완료되었을 때unload웹 페이지가 언로드될 때 (예: 다른 페이지로 이동)error자바스크립트 오류 발생 또는 자원 로드 실패 시resize브라우저 창 크기를 조정했을 때scroll사용자가 페이지를 스크롤했을 때 EX) 키보드 이벤트이벤트설명keydown키를 처음 눌렀을 때keyup키에서 손을 뗐을 때keypress문자가 입력되었을 때 (현재는 일부 브라우저에서 deprecated)EX) 마우스 이벤트이벤트설명click요소를 클릭했을 때 (눌렀다 뗐을 때)dblclick요소를..

오늘은 display: flex;속성에 대해 알아보겠습니다.flex속성은 css에 display 속성 중 하나로써 박스 레이아웃을 작성할 때 사용되는 아주 유용한 방법입니다.이런 flex속성은 요소들을 유연하고 균형 잡힌 배치를 가능하게 도와줍니다. 1.flex속성 주요 속성우리가 display: flex;속성을 사용하였을 때 쓸 수 있는 속성들입니다.flex-direction주 축(메인 축)의 방향을 설정합니다. (row, column 등)justify-content주 축(가로)을 따라 자식 요소들을 정렬합니다. (가운데 정렬, 간격 분배 등)align-items서브 축(세로)을 따라 자식 요소들을 정렬합니다. (위, 가운데, 아래 정렬 등)flex-wrap자식 요소들이 한 줄에 다 안 들어갈 때 줄바..