html5(12)
-
4-1. CSS의 적용 방법과 기본문법 - 3
1. CSS로 지정하는 길이의 단위 알아보기CSS에서 지정하는 길이값의 단위는 문서가 표현되는 매체의 종류(인쇄물/모니터)에 따라 달라질 수 있습니다. 인쇄용이라면 "절대값"과 관련된 단위인 "in(인치), cm(센티미터), mm(밀리미터), pt(포인트), pc(파이카)" 등을 적용하고 모니터(또는 스크린)용이라면 "em, ex, px, %" 등의 "상대값"을 적용합니다. 웹작업에서는 주로 상대값으로 지정하는 것이 효과적입니다. HTML5에서는 "ren과 ch"가 추가됐고, 뷰포트(viewport)의 백분율 길이인 "vw, vh, vmin, vmax"등이 추가됐습니다. 1-1. 절대값에 해당하는 단위는 in, cm, mm, pt, pc 등이 있는데, 이 값들의 길이는 다음과 같습니다. 1in = 96i..
2018.01.12 -
4-1. CSS의 적용 방법과 기본문법 - 2
1. CSS의 값을 표현하는 규칙들1-1. CSS로 표현하는 색상값 알아보기글자와 배경의 색상을 지정할 때 그 값으로 "16진수를 이용한 헥사표기법, 색상의 키워드(이름)를 입력하는 방법, RGB의 범위 값 입력 방법"등을 사용할 수 있습니다. HTML5에서는 "색조/채도/명도 입력"과 "투명도 추가"방법이 도입됐습니다. ex1) "16진수 표기법"은 "#"으로 시작해서 R(red), G(green), B(blue)에 해당하는 색상값을 16진수로 연이어 입력합니다. 각 16진수는 2자리로 표현되며 "#rrggbb"의 형식이 되는데, 각 값들이 반복되는 값일 경우 "#rgb"의 형식으로 한 자리씩 생략 가능합니다.#ffddbb ☞ #fdb 앙큼한유채`S 일상 Story ex2) "색상 키워드"를 입력하는 ..
2018.01.11 -
4-1. CSS의 적용 방법과 기본문법 - 1
1. CSS는 적용할 대상인 선택자(selector)를 지정해야 하고, 중괄호({, })로 감싼 영역에 속성(Attribute)과 값(value)을 작성합니다. 속성은 얼마든지 작성할 수 있으며 '세미콜론(;)'으로 구분합니다. 선택자(selector)에는 적용하고자 하는 요소의 태그명, 클래스 명, 아이디명 등을 지정할 수 있습니다. selector{Attribute: value;} 1-1. 각 요소에 직접 적용하는 CSS 각 HTML 시작 요소에 직접 CSS를 적용할 수 있습니다. 이방법은 웹 표준의 관점에서 본다면 아주 나쁜 방법인데요, 각 요소마다 스타일을 적용한다는 것을 구조를 작성하는 HTML과 표현을 담당하는 CSS를 분리해야 한다는 웹 표준 규정을 무시하는 것이기 때문입니다. 그럼에도 불구..
2018.01.08 -
3-1. HTML 문서의 구조
1.DOCTYPE 지정하기 웹 표준으로 마크업하는 가장 기본적인 사항은 바로 "문서형의 선언"입니다. HTML문서의 최상단에 지정하며 HTML 버전에 따라 차이가 있습니다. 1-1. HTML4의 경우 다음의 3가지의 형식 중에서 가장 많이 활용되는 타입은 "Transitional 타입"입니다. "Strict 타입"의 경우 엄격하고 제약이 많은 만큼 다소 까다롭지만, 유지/보수에 효율적이고 속도도 빠른 장점이 있습니다. -1) Strict타입 : 엄격한 형식으로 iframe, font, center 등 폐지된 요소를 사용할 수 없습니다. -2) Transitional 타입 : 다소 유연한 형식으로 폐지된 요소라도 사용 가능합니다. -3) Frameset 타입 : 문서가 프레임을 포함할 경우 사용합니다. 1..
2017.09.13 -
2-4. HTML5의 등장
HTML5는 브라우저와 디바이스에서 사용되고 보다 직관적인 시멘틱 마크업이 추가된 것뿐만 아니라 추가적인 플러그인 없이 많은 웹 애플리케이션을 가능하게 하는 것을 합니다. HTML5의 기술은 W3.org에서 확인 가능합니다. https://www.w3.org/html/logo/ 1. HTML5의 기술들과 개발단계 1-1. SMANTICS "의미론적: 마크업은 HTML5에서 새로 정의 되었습니다. 새로 추가된 요소들도 있지만, 이제 태그의 분류도 "블록"과 "인라인" 레벨이 아닌 "의미구조"에 맞게 분류합니다. 세부항목은 메타데이타 켄텐츠(metadata content), 플로우 컨텐츠(flow contents), 색셔닝 컨텐츠(sectioning content), 헤딩 컨텐츠(heading content..
2017.09.13 -
submit, href, replace 차이점
1. 차이점 submit 페이지 이동시에 다음페이지로 정보를 전송합니다. href 정보를 전송하지 않고 페이지만 이동합니다. replace 정보를 전송하지 않고 페이지만 이동합니다. 2. 예제 -1) submit -2) href -3)replace * href와 replace의 큰 차이점href의 경우 페이지를 이동할 때 순서대로 이동하게 되므로 뒤로가기 버튼을 누르면 바로 이전페이지로 이동하게 됩니다. -> 1.php -> 2.php -> 3.php 순으로 이동하게 되면 뒤로가기 버튼을 통해 2.php 페이지로 돌아가집니다.반면에 replace의 경우는 페이지 자체를 새로 출력하게 되므로 1.php를 실행하기 이전의 페이지로 돌아가게 됩니다. -> 1.php -> href방식으로 2.php -> rep..
2017.04.14