몽키의 코딩작업실

복합선택자가 중요한 이유!!복합 선택자를 사용하면 특정 부모 요소 안에 있는 태그나, 특정 태그 이후에 나오는 요소들만 스타일링할 수 있다. 복합 선택자 종류 하위 선택자는 특정 요소 안에 있는 모든 요소를 선택한다. 자식 선택자는 부모의 바로 아래에 있는 요소만 선택한다. 인접 형제 선택자는 특정 요소 바로 뒤의 형제 요소 하나만 선택한다. 일반 형제 선택자는 특정 요소 뒤에 나오는 모든 형제 요소를 선택한다. 실습 예제 (HTML 코드) 과일 목록 사과 바나나 과일은 맛있다 오렌지 포도  실습 예제 (CSS 코드)/* (1) 하위..

시맨틱 태그시맨틱 태그(Semantic Tag)는 태그명 자체가 의미를 가지고 있는 HTML 태그를 뜻한다. 예를들어 , 같은 태그는 이름만 봐도 테이블과 주소 정보를 담는 역할을 한다는 걸 알 수 있다.  시맨틱 태그의 필요성과거에는 태그를 사용해 웹페이지의 모든 레이아웃을 구성했다. 그러나 웹사이트 구조가 점점 복잡해지면서 개발자와 검색 엔진이 코드를 이해하기 어려워졌다. 이를 해결하기 위해 HTML5에서 의미를 직관적으로 알 수 있는 시맨틱 태그가 추가되었다. 대표적인 시맨틱 태그 : 웹페이지의 머리글(로고, 제목 등): 내비게이션(메뉴) 영역 : 본문 콘텐츠 영역 : 논리적으로 연관된 콘텐츠 그룹 : 독립적인 콘텐츠(게시글, 뉴스, 블로그 글 등) : 사이드바(광고, 부가 정보 등) : 웹페이..

태그란?하나의 이미지에서 특정 영역을 클릭 가능하도록 설정하는 기능이다. 사용자는 이미지의 특정 위치를 클릭하면 해당 영역에 연결된 링크로 이동할 수 있다.예를 들어, 이케아, 오늘의 집 같은 온라인 쇼핑몰에서는 제품이 배치된 이미지에 태그를 활용해서 각 상품을 클릭하면 해당 상품의 상세 페이지로 이동할 수 있도록 만들 수 있다.   태그 사용 방법 1. 이미지와 맵 연결하기 • 태그에 usemap 속성을 추가하고, # 기호와 함께 의 name 속성값을 지정해야 한다. 2. 맵과 클릭할 영역 설정하기 • 태그를 생성하고, name 속성을 usemap과 동일하게 설정하면 된다. • 태그를 이용해서 클릭 가능한 영역을 지정하고, c..

태그 속성1. 기본적인 속성 controls: 비디오 재생, 멈춤, 음소거 등의 UI 버튼 제공 autoplay: 페이지가 로드될 때 자동으로 재생 muted: 음소거 상태로 시작 loop: 영상이 끝나면 다시 처음부터 반복 재생 poster: 영상이 실행되기 전에 보이는 썸네일 이미지 2. preload 속성 (비디오를 미리 로드하는 방식) auto: 사용자가 볼지 말지 관계없이 영상을 미리 다운로드, 중요한 영상일 경우 사용 metadata: 영상 데이터를 다운로드하지 않고, 길이 등의 메타 정보만 가져옴 none: 영상 데이터를 미리 다운로드하지 않음 (트래픽 절약)  태그 (비디오 자막 추가)1. 자막 관련 속성 srclang: 자막의 언어 (ex. ko → 한국어, en → 영어) label: ..

웹 개발에서 iframe을 사용하면 하나의 페이지 내에서 다른 HTML 페이지를 불러올 수 있다. 이 기술은 특히 중복되는 코드를 방지하고, 컨텐츠를 동적으로 변경할 때 유용하다. 하지만 최근에는 iframe을 사용하지 않는 경우가 많다. 1. iframe이란?iframe은 Inline Frame의 줄임말로, HTML 문서 내에 다른 HTML 문서를 삽입할 때 사용하는 태그이다. 쉽게 말하자면 iframe 태그는 “프레임”이라고 생각하면 쉽다. 그 “프레임” 안에 다른 HTML 페이지를 띄워놓는 것이다. 2. 왜 iframe을 사용할까?웹 페이지를 만들 때, 여러 페이지에서 동일한 메뉴를 사용해야 하는 경우가 있다. 예를 들어, 상단에 있는 메뉴가 5개이고, 각 메뉴를 클릭할 때마다 다른 페이지를 보여줘..

action 속성폼 데이터를 전송할 서버 주소 설정method 속성데이터를 전송하는 방식 (get과 post)get 방식URL에 데이터가 포함되어 전송되며, 보안에 취약하고 데이터 크기 제한이 있음post 방식데이터가 URL에 포함되지 않고 본문(body)에 담겨 전송되며, 보안성이 높고 데이터 크기 제한이 없음target 속성데이터를 전송할 창 지정 (_self, _blank, _parent, _top)formnovalidate 속성입력 값의 정합성(유효성) 검사를 생략하는 속성novalidate 속성form 태그에 추가하면 폼 전체의 유효성 검사를 하지 않음   태그와 action 속성 태그는 사용자가 입력한 데이터를 서버로 전송하는 역할을 함action : 데이터를 전송할 서버 주소를 지정 : 버튼..

select & option여러 개의 옵션 중 하나 또는 여러 개 선택 가능multiple 속성select 태그에서 다중 선택을 가능하게 함textarea여러 줄의 텍스트 입력을 받을 때 사용fieldset & legend관련된 입력 요소를 그룹화하고 그룹명을 설정datalist사용자가 입력을 하면서 선택할 수 있도록 제안 목록 제공input + datalist입력과 자동완성 기능을 동시에 제공  태그와 태그여러 개의 옵션 중에서 하나 또는 여러 개를 선택할 수 있도록 하는 태그기본적으로 하나만 선택 가능하지만, multiple 속성을 사용하면 다중 선택이 가능함다중 선택(multiple)은 Ctrl(Windows) 또는 Command(Mac) 키를 눌러야 선택할 수 있어 사용자 경험(UX)이 좋지 않..

대표적인 표준 name 값 (autocomplete을 위한 표준 값) >이름name사용자의 이름을 입력 받는 필드성honorific-prefix사용자의 성(이름 앞에 오는 존칭) 입력 받는 필드성/이름(전체)given-name사용자의 성과 이름을 받는 필드성(일반 이름)family-name사용자의 성을 받는 필드이메일 주소email사용자의 이메일 주소를 받는 필드전화번호tel사용자의 전화번호를 받는 필드주소(전체)address사용자의 전체 주소를 받는 필드집 주소(스트리트)street-address사용자의 집 주소(거리 주소)를 받는 필드도시address-level2사용자의 도시를 받는 필드주/도/구address-level1사용자의 주/도/구를 받는 필드우편번호postal-code사용자의 우편번호를 받는..

value 속성사용자가 입력한 값을 저장하는 속성readonly 속성읽기 전용 입력 필드를 만들 수 있는 속성 (값은 볼 수 있지만 수정 불가)disabled 속성입력 필드를 비활성화하며, 수정과 폼 전송 시 값이 전송되지 않음maxlength 속성사용자가 입력할 수 있는 최대 글자 수를 제한하는 속성placeholder 속성입력 필드에 안내 텍스트를 제공하는 속성 (입력 시작 시 사라짐)required 속성필수 입력 필드를 설정하는 속성 (폼 제출 전 필수 입력을 요구)autocomplete="on" 속성브라우저가 자동으로 이전 입력 값을 제안하는 기능타입이 달라도 자동완성 데이터 공유name 속성 값이 같으면 자동완성 데이터가 공유됨 (타입에 관계없이)autofocus 속성페이지 로드 시 자동으로 해..

1폼 요소 (form)사용자의 데이터를 입력받는 HTML 요소2체크박스 입력 (type=“checkbox”)여러 개의 선택지를 동시에 선택3라디오 버튼 입력 (type=“radio”)한 그룹 내에서 하나의 선택지만 선택4색상 선택 (type=“color”)색상 팔레트에서 색을 선택5날짜 및 시간 입력날짜와 시간을 선택할 수 있는 입력5.1날짜 입력 (type=“date”)날짜를 선택할 수 있음5.2날짜와 시간 입력 (type=“datetime-local”)날짜와 시간을 함께 선택할 수 있음5.3월 선택 (type=“month”)연도와 월만 선택할 수 있음5.4주 선택 (type=“week”)해당 연도의 몇 번째 주 선택5.5시간 입력 (type=“time”)시간만 입력할 수 있음6숫자 입력 (type=“..