HTML & CSS16 [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. [생활코딩] HTML - Emmet 활용법 Emmet : 에디터 Atom의 확장프로그램 ※ 포스팅 상의 Emmet 버전은 2.4.3임 Emmet 유용 단축키 Ctrl + / : 블록된 곳을 주석 처리 Ctrl + D : 블록된 곳과 똑같은, 다음 내용을 찾아 다중 선택 Ctrl + Alt + ← 또는 → : 다음 편집 지점으로 커서 이동 Emmet 활용 포인트 예시1 : 부모-자식태그 한 번에 입력 ol>li //왼쪽처럼 입력 후 Tab 결과1 예시2 : 동일태그 여러개 한 번에 입력 li*4 //왼쪽처럼 입력 후 Tab 결과2 예시2-1 : 부모-자식태그를 ()로 묶어서 여러개 한 번에 입력 (li>a)*6 //왼쪽처럼 입력 후 Tab 결과2-1 예시3 : HTML5의 기본틀 한 번에 입력 ! //왼쪽처럼 입력 후 Tab 결과3 Emmet 사용.. 2019. 5. 31. 이전 1 2 3 다음
