목차 1. 메뉴 구현을 위한 태그와 선택자 1.1 과 1.2 'checkbox' 속성과 선택자 2. 메뉴 구현 2.1 三 2.2 메뉴 탭 추가입력 2.3 취소(X)형태 구현 1. 메뉴 구현을 위한 태그와 선택자 일반적인 웹페이지에서 석삼(三)처럼 생긴 메뉴표시를 본 적이 있을 것이다. 이를 누르면 메뉴 창이 뜨면서 메뉴닫기 표시인 취소(X) 형태로 변하는데 이를 구현해 보려한다. 여기에 추가로 간단한 애니메이션 효과도 넣어보자. 우선 메뉴 구현을 위해 사용할 태그와 선택자 '+'를 알아야한다. 1.1 과 의 설명에 앞서 이 필요한데 다음의 코드를 보면서 알아보자. 에는 자주쓰이는 네가지 타입 'text, password, radio, checkbox'이 있고 각각 아래의 형태로 구현이 된다. 이 중 'r..

목차 1. HTML과 CSS의 기본속성 1.1 HTML(Hyper Text Markup Language) 1.2 CSS(Cascading Style Sheet) 2. 홈페이지 구성 2.1 홈페이지 구성 TIP 2.1.1 구역 나누기 2.1.2 홈페이지 구성 기본 설정 2.2 홈페이지 구현시 컨텐츠 위치조정 방법 2.2.1 position 속성 2.3 그 외 유용한 속성들 2.3.1 불투명도 설정 2.3.2 overflow 속성 활용 1. HTML과 CSS의 기본속성 1.1 HTML(Hyper Text Markup Language) HTML은 마크업 언어로서 꺾쇠 '' 안에 태그명을 입력한다 기본적으로 여는 태그가 있으면 반드시 닫는 태그로 닫아 줘야한다 태그 안에는 데이터를 입력한다 HTML은 왼쪽에서 ..

목차 1. CSS 2. CSS 사용방법 2.1. 인라인 스타일 2.2. 스타일 엘리먼트 2.3. 외부파일 가져오기 2.3.1. 외부파일 연결하기 2.3.2. 외부파일 연결확인 법 2.3.3. 외부파일 연결하여 css 적용하기 2.4. 기본적인 선택자(selector) 3. 마진(margin)과 패딩(padding) 3.1. 마진(margin) 3.2. 패딩(padding) 3.3. 마진(margin)과 패딩(padding)의 사용팁 3.4. 보더(border) 1. CSS - Cascading Style Sheet의 약자 - HTML은 데이터를 구분해주는 역할. 즉, 기본 골격만 구성한다 - CSS를 사용함으로써 HTML을 꾸며줄 수 있다 - CSS는 HTML과 같이 사용해야한다, 단독으로 사용할 수 없..

목차 1. HTML 2. 브라우저 3. HTML의 구성 3.1. 태그(tag) 3.2. 태그의 속성(property) 3.2.1 절대주소와 상대주소 3.3. 블럭(block)과 인라인(inline) 4. 많이 사용하는 태그 4.1 많이 사용하는 태그 4.2 속성 부여가 필요한 태그 4.3 시멘틱(semantic) 태그 1. HTML - Hyper Text Mark_up Language - Mark_up 언어라고도 하며 꺾쇠()로 이루어진 언어를 뜻한다 - 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 알 수 있다 - 특별한 언어가 아닌 텍스트구조로 이루어져 메모장으로도 코드를 작성해 구현할 수 있으나, 효율이 떨어져 vscode와 같은 에디터들을 사용한다. 2. 브라우저 - 일반적으로 웹사이트를 열게 ..