HTML11 [HTML&CSS&JS] 자연스럽게 슬라이딩되는 아코디언 메뉴 HTML 섹션1 어쩌고 저쩌고... 섹션2 어쩌고 저쩌고... 섹션3 어쩌고 저쩌고... CSS /* 여닫는 버튼 */ .accordion { background-color: #eee; color: #444; /* 커서 모양 변경 */ cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; font-size: 15px; transition: 0.4s; } /* 클릭됐을 때 배경색 추가(js로 .active 클래스 추가), 호버했을 때 */ .active, .accordion:hover { background-color: #ccc; } /* 아코디언 패널(평소엔 숨겨져 있음) */ .panel { .. 2019. 10. 18. [edwith] 초보 HTML&CSS 7강 - CSS를 HTML에서 사용하는 방법 CSS의 구조 p { color : red; } 1. 선택자(selector) : p 2. 속성(property) : color 3. 값(value) : red 웹페이지에 스타일을 적용하는 3가지 방법 1. inline - 스타일을 바꾸고 싶은 태그에 직접 적용 Hello world 2. internal - html 안에 있는 head 태그 안에 스타일 태그를 만들어 적용 - 장점 : CSS파일을 별도로 관리하지 않아도 됨, 브라우저가 서버에 CSS파일을 요청하지 않아도 됨 Hello world 3. external - 가장 흔한 방법 - html파일과 별도로 css파일을 따로 만들어 두고 link 태그로 연결 Hello world *메모 : 스타일 적용 시 우선순위는 inline > internal >.. 2019. 6. 3. [edwith] 초보 HTML&CSS 6강 - 개발자도구(Elements tab)을 활용한 HTML CSS 디버깅 크롬 개발자도구 사용하기 개발자도구 열기 - F12 - Ctrl+Shift+I - 설정>도구 더보기>개발자 도구 개발자도구 주요기능 검사(Inspector) 기능 ↙아이콘 클릭 후 화면에서 원하는 요소 클릭. 해당하는 element와 스타일 등 확인 가능 element 상태 편집 - 삭제 : 해당 코드 오른클릭, Delete element - 숨기기 : 해당 코드 오른클릭, Hide element - 코드 편집 : 해당 코드 더블클릭해 속성/값 등을 변경 element 스타일 편집 - 화면상의 요소 상태(마우스 오버 시, 클릭 중, 방문 후)에 따른 스타일 확인 : Styles > 필터 옆 :hov > 원하는 상태 선택 (중복선택 가능) - 선택된 요소에 적용된 모든 스타일 확인 : Computed > .. 2019. 6. 3. [edwith] 초보 HTML&CSS 5강 - ID와 Class ID를 주는 이유 1. 각 element를 각각 따로 제어하기 위해서 2. 검색하기 쉽게 Class를 주는 이유 1. 같은 스타일을 다른 element들에 적용하기 위해 진행된 코딩 Company Name Home Home About Map About me Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores optio at expedita, nobis, ab eveniet tempora veritatis placeat odit sint, vero accusamus nostrum! Dolorum eum architecto aliquam amet quo, ut? What I do Lorem ipsum dolor sit amet, cons.. 2019. 6. 2. [edwith] 초보 HTML&CSS 4강 - HTML 구조화 설계 HTML structure design : HTML 구조화 설계 웹페이지 만들어 보기 진행된 코드 Company Name Home Home About Map About me Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores optio at expedita, nobis, ab eveniet tempora veritatis placeat odit sint, vero accusamus nostrum! Dolorum eum architecto aliquam amet quo, ut? What I do Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores optio at e.. 2019. 6. 2. [edwith] 초보 HTML&CSS 3강 - UI 레이아웃을 위한 HTML 태그 UI 레이아웃을 위한 HTML 태그 UI 레이아웃 3대장 - header, 본문, Footer 레이아웃을 구성하는 태그 - header : 상단 - nav : 주메뉴(주요 navigation link들을 모아놓는 곳). 시각장애인이 상세내용(?)을 제외하고 들을 수 있게 함. - section : 본문 - aside : 사이드바 메뉴에 주로 사용. - footer : 하단 ((Tip)) 위 태그들은 지원 시작된지 얼마 안 됨. 데탑 환경에선 div 태그로 대체(class에 header/section/footer 등 표시)되는 경우가 많음. 브라우저가 대부분 최신인 스마트폰 환경에서 더 많이 보임. 2019. 6. 1. 이전 1 2 다음
