HTML 팝업 열기 팝업창 내용 팝업창 내용을 입력하세요. 닫기 HTML 파일에는 팝업창을 나타내기 위한 요소와 팝업창을 표시할 버튼을 만들며 일반적으로는 팝업창을 감싸는 컨테이너 요소와 팝업창 내용을 담는 요소를 포함한다. CSS .popup-container { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 9999; align-items: center; justify-content: center; } .popup-content { background-color: #fff; padding: 20px; border-radius: 8..
jQuery 란? jQuery는 JavaScript를 기반으로 한 라이브러리로 DOM 조작과 이벤트 처리를 더 쉽고 간결하게 만들어주는 라이브러리이다. jQuery를 사용하면 일부 JavaScript 코드를 짧게 작성하여 반복적이고 일반적인 작업을 할수있다. 예를 들어 jQuery를 사용하여 CSS 선택자를 활용하여 요소를 쉽게 선택하고 스타일을 변경하거나 이벤트 핸들러를 간단하게 연결할 수 있다, jQuery는 크로스 브라우징을 지원하여 브라우저 간 호환성 문제를 해결해준다. Vanilla JavaScript 예시 Hello, World! 클릭하여 텍스트 변경 jQuery 예시 Hello, World! 클릭하여 텍스트 변경 Vanilla JavaScript, jQuery 바닐라JS 는 순수한 JavaS..
바닐라 JS란? 바닐라 JavaScript란 순수하게 웹 브라우저에서 실행되는 JavaScript를 의미한다, 즉 어떠한 프레임워크나 라이브러리를 사용하지 않고 순수 JavaScript 만을 사용하여 웹 페이지를 동적으로 조작하고 기능을 구현하는 것을 말한다. HTML, CSS와 함께 웹 페이지를 구성하고, 웹 페이지의 요소들을 JavaScript 를 통해 동적으로 변경하며 이를 통해 웹 페이지의 사용자 경험을 향상시키며 다양한 기능을 추가할수 있다. 바닐라 JS DOM 조작 - HTML 문서의 요소들을 JavaScript를 통해 선택하고 내용을 변경하거나 스타일을 조정할수 있다. 이벤트 처리 - 버튼 클릭, 마우스 이벤트, 키보드 입력과 같은 이벤트를 JavaScript로 처리하여 웹 페이지의 동작을 ..
float 이란? float 이란 CSS에서 요소의 레이아웃을 제어하기 위해 사용되는 속성 중 하나이다. CSS 속성 float은 '띄우다' 라는 뜻으로, 한 요소를 일반적인 레이아웃의 흐름으로 부터 띄워 수평 정령 할 때 사용하며 float 속성은 이미지와 텍스트를 함께 배치할 때 사용하며, 요소가 부모요소 기준으로 왼쪽 또는 오른쪽에 배치된다. 현재는 Flexbox, Grid와 같은 더 효과적인 레이아웃 기술들이 있다. Flexbox란? 1차원 display 속성중 하나로 컨테이너들의 레이아웃, 정렬, 간격설정을 하는데 효과적이며 다루고자 하는 아이템들의 사이즈를 모르거나 크기가 유동적이여야 하는 상황 에서 유용하게 사용한다. Grid란? 2차원 부모 요소와 자식 요소로 구분되며 부모 요소를 Grid..
Semantic Tag 란? 시멘틱 태그는 한줄로 요약하면 의미를 부여한 태그라고 보면된다. Division(분할) 태그에 의미를 부여하여 검색엔진을 최적화 하여 의미가 있는 요소는 개발자 모두에게 명확한 의미를 전달한다. 종류 등 더 많은 시멘틱 태그가 존재한다. 이런 시멘틱 태그는 HTML5에서 처음 등장한다.
웹표준 웹표준의 정의 웹 페이지를 구성하고 표시하기 위한 규직과 표준들의 집합 웹표준은 웹 사이트가 다양한 브라우저와 플랫폼에서 일관되게 동작하도록 보장하고, 웹의 상호운용성, 접근성, 검색엔진 최적화 등을 개선하는데 기여한다. 종류 1. HTML(HyperText Markup Languge) - 웹 페이지의 구조와 콘텐츠를 정의하는 언어로 텍스트, 이미지, 비디오 등을 표시한다. 2. CSS(Cascading Style Sheets) - 웹 페이지의 디자인과 스타일을 정의하는 언로도 레이아웃, 색상, 글꼴 등의 스타일을 지정한다. 3. JavaScript - 웹 페이지의 동적인 기능과 상호작용을 담당하는 프로그래밍 언어이다. 4. SEO(검색엔진 최적화) - 웹 페이지가 검색엔진에서 노출되고 검색 결과..
