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자식 요소들이 한 줄에 다 안 들어갈 때 줄바..

HTML은 웹 개발을 하는 데 있어 가장 기본이 되는 요소입니다. HTML은 시맨틱태그 와 비시맨틱 등 여러 태그가 존재합니다. 오늘 다뤄볼 내용은 웹 개발에기본이 되는 HTML의 여러태그들을 알아보겠습니다. 목차1.시맨틱 태그 2.비시맨틱 태그 3.시맨틱 태그 와 비시맨틱 태그의 다양한 용도의 따른 분류 4.멀티미디어 태그 5.테이블 관련 태그 6.메타 데이터 및 링크 태그 1. 시맨틱 태그(Semantic Tags)먼저 시맨틱 태그입니다. 시맨틱 태그의 종류는 이렇습니다. 태그웹 페이지나 섹션의 머리글을 정의합니다.보통 사이트 로고, 제목, 네비게이션 메뉴 등이 포함합니다. 태그네비게이션 그룹을 나타냅니다.주로 사이트 메뉴나 목차에 사용됩니다. 태그문서의 주요 콘텐츠를 감쌈니다.문소의..