CSS Cascade style sheet 종류 (작동 우선순위 순) 1. 인라인 : jQuery 이용하여 css 변경 명령 시 인라인으로 적용 2. 내부 3. 외부 (웹표준 권장사항) - link - import CSS 문법 선택자{ 속성:값; } 참고 css 파일은 style 태그 없이 바로 문법 작성 css 주석 : /* 내용 */ (ctrl+/) 선택자 전체 선택자 : * asterisk 태그 선택자 : p,h1~h6,ul,li,a,img,form,input,span,div,header,footer,article,section,aside 클래스 선택자 : .클래스명 아이디 선택자 : #아이디명 자식 선택자 : > 색상값 1. 컬러명 2. 16진코드값: #RRGGBB 3. RGB 10진값: rgb(..

favicon 보통 title 아래에 삽입 meta link 아래 삽입 마크업 실습 유의점 tag.00 = class 명 / tag#00 = id명 메인메뉴는 무조건 id="nav" 줄것( 탭키 눌렀을 때 연결되도록) nav : 지금 문서에서 다른 문서로 넘어가는 링크 모음 = 메뉴 반응형페이지: 크기를 줄여도 레이아웃 가운데에 오는 경우 꼭 div.center (가운데 정렬x) 푸터로고는 a 태그 불필요 section : 제목 태그 필수, 문서 내 콘텐츠를 주제별로 나눌 때. ( 태그 묶을 때 제목이 들어가야할 요소는 section 으로, 그 외 작은 요소/의미 없는 요소/css 활용 요소는 div로 ) article : 주로 기사 등에서 사용

Markup 실습(html5 기준) header section 제목태그 필수(h2-6) footer div.center>h1.logo>a[href="#"]>img 메인메뉴 ul>li*4>a[href="#"] div.subWrap>ul.sub>li*5>a[href="#"] 본문 전체 메인 배너 ul.banner>li>a[href="#"]>img 매거진, 스토리, 프로모션 매거진 ul>li*3>(a[href="#"]>img+div.gBox)+a[href="#void">strong+span SHOW MORE 스토리 ul>li*4>(a[href="#void"]>img)+div.textBox>span.subTitle+h3.storyTitle+p+p.date SHOW MORE 프로모션 ul>li*4>(a[href=..

11월 24일 4일차 원격수업 audio 지도 api 이용하여 삽입하기 1. 지도 api 검색 후 웹 소스 추출 2. app key 발급 후 입력 3. 지도 위치에서 주소창의 위도,경도 추출 4. 마커 이미지 등록 및 위치 선정 공간 분할 태그 div 블럭 요소를 묶을 때 span 인라인 요소를 묶을 때(내용을 텍스트로 묶을 때) 태그 구분 id 큰 요소, 반복 불가 class 작은 요소, 반복 사용, 한꺼번에 디자인 가능 시멘틱semantic 태그(html5) header footer nav >ul>li 메인메뉴 aside 퀵메뉴, 서브메뉴 article 독립된 본문의 한단위, 제목필수(h2~6) section 글이 많이 들어가는 부분, 제목필수(h2~6) * article과 section은 부모자식,..

11월 23일 3일차 FORM (인라인) → 필수항목 * method - get : 기본, 공개, 짧은 데이터, 주소줄에 노출, 보안 ↓ - post : 긴 데이터, 보안 ↑, 주로 개인정보 비번 등 input (단일태그= 닫을필요 없음) type text password radio : 원형 선택, 택일이므로 id는 각각, name은 동일하게 작성 checkbox : 다중선택 가능하므로 id, name 모두 각각 작성 file(첨부파일) submit, reset : 버튼 이름은 value 값으로 지정 image(사용자가 만든 이미지를 버튼으로 사용, 최근엔 css 이용) hidden ↓ 속성=값 경우 생략하고 속성만 작성 가능 required 입력 시 필수 항목 설정 disabled checked mul..

11월 20일 2일차 크롬 image downloader 확장기능 추가 img src="주소" alt="속성" 두 가지 요소 필수 src="http://placehold.it/너비x높이" 빈 상자 삽입 imagemap: 하나의 사진에 여러 개 링크 삽입 * name: 프로그램 이름으로도 사용, id, class 디자인용 * 좌표값 - 사각형(rect): x시작점,y시작점,x끝점,y끝점 - 원형(circle) :x중심점,y중심점,반지름 - 다각형(poly) : x1,y1,x2,y2,x3,y3... * caption 그림 3-2. 카페라떼 figure (그림) - 블록요소로 상하좌우 마진이 있음. 좌우 마진이 더 넒음. 본문에 비해 독립적인 내용 하나를 표현하기 위해 사용함. 이미지에 주로 사용디지만 꼭 이..