728x90
목차
웹표준 장점
- 소스의 통일화 수정 및 운영관리 용이
- 다양한 브라우저, 여러 디바이스에서도 대응가능하여 접근성 향상
- CSS, HTML 분리되어 유지보수에 들어가는 시간 단축, 불필요한 마크업 최소화되어 페이지 로딩속도 향상
- 오래된 브라우저에서도 컨텐츠가 적절하게 표시 호환성과 운영성 확보
- 검색봇을 통한 효율적 노출과 같은 검색엔진 최적화 가능
웹 표준 기술
- XHTML (eXtensible Hypertext Markup Lanaguage)
- CSS(Cascading Style Sheets)
- XML(eXtensible Markup Langauage)
- DOM(Document Object Model)
- ECMAScript : ECMA international 의 ECMA-262 기술 명세에 정의된 표준화된 스크립트 프로그래밍 언어
웹표준 스탠타드 Standards - W3C
Web Design And Application
1. HTML & CSS
HTML로 문서작성하기
[이미지출처]웹표준 디자인 강좌 02 - HTML5 기본 - my Project’s Note (yongbeomkim.github.io)
Outline
- section : Commnly Used, Outline을 잡은 뒤 적절한 요소로 변경
- article : 단독으로 RSS 전송 가능한 independable section
- aside : 메인과는 관련성이 적은 보충적인 콘텐츠를 구분하는섹션
- nav : 네비게이션을 구분하는 섹션
- header : 섹션의 Header 요소
- main : 메인 content
- footer : 섹션의 footer
- figure, figcaption : 참조예제 및 소스 캡션을 나타내는 요소
Classification of Model and Element
- Block : 표제, 단락, 항목, 표 등의 문서의 골조를 구성하는 요소 군
- Inline: 내용물이 되는 콘텐츠에 의미를 부여하는 용도 (텍스트 데이터와 같은 취급)
a, href, url
- a href="{url}" : url 주소
- a href="{#id}" : 링크 연결 id
- a href="mailto:email@hostname"
CSS 문서 작성하기
| 상대단위 | 설명 |
| px | 모니터 화소(1픽셀)기준 |
| % | % 상대비율을 지정 |
| em | 부묘오소 대문자 기준 상대크기 |
| 절대단위 | 설명 |
| pt | 포인터를 1로 하는 단위 |
| pc | 파이카를 1로 하는 단위 |
| mm | 밀리미터 기준 단위 |
| cm | 센티미터 기준 단위 |
| in | 인치(inch) 기준 단위 |
가상클래스
| 선택자 | 의미 |
| :link | 미 방문 링크 |
| visited | 방문을 마친 링크 |
| :hover | 마우스 포인터를 올릴 때 |
| :active | 요소가 활동중일 때 |
| :focus | 요소에 초점맞출 때 |
| :first-child | 요소의 첫 자식 요소 |
속성들의 우선순위
- style : standard < maker < user
- selector : type < class< id
- writing location : externel css < internel css < inline css
- writing order : front loc < back loc
- !important : 위의 순서들을 무시하고 최우선적 설정
inline
- float : left/ right, (inline 객체로써 내부에 객체를 정렬)
- clear: :both , 단 속성을 해제하고, 새로운 단을 생성
- clear fix의 적용은 (tag:after) 가상객체를 활용하면 유용하다.
Kinds of Layout
- Fixed Layout : 고정값으로 너비 지정
- Liquid Layout : 퍼센트 비율로 너비 지정
- Flexible Layout : 1,2번의 장점을 활용하여 레이아웃을 구성
- Responsible Layout : 폭 사이즈에 맞춰서 유연하게 조정
- Adaptive Layout : 특정 디바이스를 예상하여 고정 레이아웃 조합을 구성 (@media)