프론트엔드6 [JS] 이벤트 핸들링 자바스크립트로 만들 수 있는 이벤트 핸들러 중심으로 내용을 정리해 보았습니다. 이벤트와 관련된 용어들의 차이는 다음과 같습니다. 이벤트 : 버튼 클릭, 키보드 입력 같은 웹 페이지에서 일어나는 모든 사건입니다. 이벤트 핸들링 : 자바스크립트를 통해 이벤트를 다루는 일입니다. 이벤트 핸들러 : 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드입니다. 이벤트 핸들러 간단한 예시로, 어떤 버튼을 누를때 마다 특정 행동을 하는 이벤트를 이렇게 onclick 속성에 직접 새로운 값을 할당하는 방식으로 만들 수 있습니다. let btn = document.querySelector("#myBtn"); btn.onclick = function(){ console.log("Hello World"); }; .. 2021. 11. 8. [JS] DOM 객체와 요소노드 Vanilla Javascript HTML과 CSS로 웹 페이지를 꾸미고 나면, Vue나 React같은 다양한 프레임워크로 기존의 CSS만으로는 구현할 수 없는 신기한 반응형 웹 동작을 구현할 수 있습니다. 하지만 그런 도구 없이 순수 자바스크립트로도 가능한데요, 추가적인 라이브러리 없이 자바스크립트만으로 웹 동작을 코딩하는 것을 vanilla javascript라고 합니다. vanilla javascript를 공부하면 자바스크립트에 대해 좀 더 깊고 자세히 이해할 수 있게 되고, 추후 공부할 다른 프레임워크에도 빠르게 적응할 수 있게 됩니다. 자바스크립트 파일 연결하기 HTML파일 내에서 자바스크립트 파일과 연결하는 코드를 추가할 수 있습니다. ... 이렇게 body태그 내부의 script태그의 src.. 2021. 11. 6. [CSS] CSS 중급 (2) 페이지의 레이아웃 작성을 위해 사용하는 flex와 grid에 대해 정리해 보았습니다. flex는 부모 요소인 컨테이너(container)와 자식 요소인 아이템(item)으로 구성되며, 각각 플렉스 컨테이너, 플렉스 아이템이라고 부릅니다. 이들에게 다양한 속성들을 적용하여 컨테이너 내부의 아이템 크기나 아이템 배치 형태를 조절해 유연한 플렉스 구조를 설계할 수 있습니다. 하나하나 알아보도록 합시다. flex 적용하기 .container { display: flex; } flex가 일반 block배치와 다른 점은, 바로 block은 세로 방향으로 배치되지만 flex는 마치 inline처럼 가로 방향으로 배치된다는 점입니다. 그리고 float이랑은 다르게 아이템들의 높이가 자동으로 같게 유지됩니다. 배치 방향.. 2021. 10. 27. [CSS] CSS 중급 (1) 우선 CSS의 다양한 선택자 사용 방법들에 대해 정리하고, 지금까지 알아본 CSS 지식들을 이용해 웹페이지 내에서 드롭다운이나 툴팁 같은 특별한 기능을 수행하는 요소들을 구현해 보겠습니다. 선택자 저희는 이미 HTML요소, 아이디, 클래스로 선택자를 설정하는 방법을 알고 있습니다. 좀 더 세밀하게 선택자를 고르는 방법에 대해 알아봅시다. /*해당 요소의 하위 요소 중에서 특정 타입의 요소를 모두 선택합니다*/ div p {스타일;} /*태그의 하위 요소 중 태그 전부 다*/ /*해당 요소의 바로 밑에 존재하는 하위 요소 중에서 특정 타입의 요소를 모두 선택합니다*/ div > p {스타일;} /*태그의 바로 밑에 존재하는 하위 요소 중 태그 전부 다*/ 동위 관계 : HTML 요소의 계층 구조에서 같은 .. 2021. 10. 23. [CSS] CSS 기초 CSS의 기본부터 위치 속성까지의 기초지식들을 정리해 보았습니다. 기본 문법 CSS는 선택자와 선언부로 구성됩니다. 선언부는 중괄호({})로 둘러쌓여 있고, 선언부 내에 '속성명: 속성값' 이 있습니다. 각 속성들은 세미콜론(;)으로 구분됩니다. 다양한 방법으로 선택자를 이용해 HTML 요소를 가리켜 스타일을 적용할 수 있습니다. /*HTML 요소 선택자*/ h2 { color: teal; text-decoration: underline; } /*아이디(id) 선택자*/ #heading { color: teal; text-decoration: line-through; } /*클래스(class) 선택자*/ .headings { color: lime; text-decoration: overline; } /*.. 2021. 10. 20. [HTML] 기본 태그 총 정리 HTML의 기본적인 태그들에 대해 정리해 보았습니다. 전반적인 구조 메인 콘텐츠 텍스트 요소 제목1 제목2 제목3 제목4 제목5 제목6 첫 번째 줄의 단락 두 번째 줄의 단락 굵은 글씨 굵은 글씨 이탤릭체 하이라이팅 삭제효과 밑줄 긋기 인용구 ASAP 우리집 주소 는 여기 기본 요소 배경색 흰색으로 변경 글자색 빨간색으로 변경 글자 크기 250%로 변경 문단 중앙 정렬 스타일링 한번에 적용 색상 이름 RGB 색상값 16진수 색상값 HTML 요소의 배경을 이미지(image)로 설정 새 창에서 오픈 현재 창에서 오픈 제목 3으로 이동 ... 제목 3 사과 포도 사과 포도 호박 - 박과의 한해살이 덩굴성 채소 상추 - 국화과의 한해살이 또는 두해살이풀 tr태그로 테이블의 행을 구별하고 th로 컬럼 이름을 나타.. 2021. 10. 18. 이전 1 다음
