블로그

1.가장 큰 제목 h12.주요메뉴 h23.내용 - p,div/ul/ol/dlp,div - 서술 형태의 내용들(ex.ceo인사말)div원래는 묶어주는 용도(box) 하나하나 분리해야 하는 내용 - 목록태그부가 설명이 필요한 경우 dl / 그렇지 않다면 ul,ol순서가 필요 - ol,불필요 - ul 4.사용자메뉴하위메뉴가 아니라서 h3는 아님,주요메뉴와 동급 -> h2서술형태x(div,p),부가 설명이 필요없음(dl),순서 필요없음(ol) -> ul 5.p와 br의 보여짐 차이차별화된 고품격 택배서비스를 제공합니다.차별화된 고품격 택배서비스를 제공합니다. 차별화된 고품격 택배서비스를 제공합니다. 차별화된 고품격 택배서비스를 제공합니다. 6.자세히보기는 꼭 dl밖에 있어야 한다. dl안에는 dt,dd만 있어야..

*웹 표준 페이지 개발 방법 - 분리해서 작성1.구조(structure) - xhtml,html2.표현(presentation) - css3.동작(behavior) - javascript 디자이너 - 사이트를 쉽게 사용 할 수 있도록 디자인(ui,ux) *내용 작성 요령1.의미있게2.논리적으로3.구조적으로 *코딩 순서1.내용 작성2.마크업(의미 또는 목적에 맞는 태그 부여)3.콘텐츠 블록(같은 주제관련된 내용 묶기)4.css초기화5.css작성6.스크립트 적용 그후에는 cross browsing / validation check / acceccibility check익스플로러 - 개발자도구 - 버전체크 *웹페이지 필수 구성 요소1. - 설명서2. - 한국어가 들어있어3.

실습text로 써야되는 부분자동으로 갱신되는 부분 웹폰트 - 활용이 어렵다.솔루션에 사용 비트맵(웹-확대시 깨짐)/벡터작은 글자들은 타이핑,큰 글자는 이미지로 폰트는 글자설정 자체를 기본폰트로 1.가이드 설정(픽셀) 글자,패스,가이드 -> 백터방식tip:shift+가이드 : 눈금에 딱 달라붙게 해줌 2.클릭해야 하는 이미지 -> 여백주기클릭 안하거나,큰이미지 -> 최대한 딱맞춰서여백은 균일하게 3.slice-view-snap켜놓기(달라붙게해줌) - 어떻게 자를지 표시하는 기능slice후 두번저장 - save - slice흔적 남기기 4.확장자는 - 퀄리티는 80은 충분(100이랑 80이랑 용량 2배차이) jpg - 16~24비트까지 지원(많은 색상을 표현 할 수 있다. 15만 5천개 정도의 컬러) / 가..

position:absolute/fixedstatic/relative(x) static2.htmlmargin:auto - (블록요소 div,p,ul,li...)= text-align:center - (인라인 요소text,img) absolute - flaot랑 비슷다른요소의 영향 주거나 받지 않음flaot처럼 위로 떠버림같은 기준점을 사용 할 수 있다. **레이어1.요소들간의 층(앞/뒤)2.z-index 속성 사용3.1부터 시작하는 정수 사용(순차적인 필요x)4.형제간에는 순서와 무관하며 높은 숫자가 앞5.속성을 지정하지 않는 경우 나중에 작성된 요소가 앞6.임의로 생성된 값은 실제 값보다 무조건 뒤(z-index를 쓰면 무조건 앞)7.position 속성과 함께 사용 먼저 작성된 것이 아래쪽에 위치 실..

*border-width:1234(보더 네방향 길이를 다르게 준다.)*border-color -실습*# - id - 태그의 구분.class - 효과주기p,a,{}는 p와 a에게 같은효과를 주기a{} - 공백 앞에꺼 안에 a가 있다면.f1 ul li{} - 클래스가f1이라는 태그에 ul 안에 들어있는 li가 있다. line-height : 글자를 중간으로 정렬 div #headerdiv중에 어떤태그가 헤더 div #header{}

레이아웃 직접적 상관 PositionFloat *여백 속성1.margin(콘텐트 박스의 바깥쪽 여백) 박스의 위치가 바뀐다.2.padding(콘텐트 박스의 안쪽 여백) 박스의 크기가 바뀐다. Box Modelborder와 padding은 width에 더해진다padding-left:100(Content area:1000)padding-right:100 = 1200(브라우저가 박스를 처리하는 방법) *margin1.바깥쪽 여백(위치)2.margin: top right bottom left margin: top right bottom left (same right) margin: top/bottom right/left margin:all margin:auto 3.margin:auto = margin 0 aut..

*요소레벨(element level)*태그가 어떻게 보여지는가에 대한 구분 줄이 바뀌는 태그&줄이 안바뀌는 태그 1.블록 레벨(Block Level)- 독립된 행을 갖는 요소 집합- 크기 지정,위치 조정 가능(*)- p,h1~h6,ul,ol,li,div,table...- 다른 블록 레벨 요소와 인라인 요소 포함 가능- p,h,dt,address같은 일부 요소는 다른 블록 포함 불가 p,h,dt,address 같은 일부 요소는 다른 블록 포함 불가 - 인라인만 포함 할 수 있다. 1)독립된 행을 갖는 요소 집합*Block Level Element- default width : 100%(auto)- default height : 0(auto)너비는 100% 높이는 0 이지만 높이는 안에 콘텐트를 입려가면 자..

9.thead/ tfoot/ tbody : 각 셀들의 역할 별 구분웹접근성 - 장애인에게도 보장이 가능한 장치서두 - 결과 - 본문 순서 10.id(속성) : 제목 셀에 이름 부여11.headers(속성) : 해당 셀의 제목셀 지정selector{property : value}Element.className#idName a(text-decoration:none) / 글자 밑줄 안나오게하기.line_color(coloe:red)#header{} Class는 하나의 페이지에서 여러 번 사용해도 되고Id는 하나의 페이지에서 한번만 사용해야함 = uniqueId는 태그를 구분할 목적으로 사용 **입력 양식(Web Form)**사용자가 페이지에 값을 전달하는 모든 방식 *form*1.모든 폼 요소는 ~ 안에서 작..