🗒️ 2017/05/19 (39)

1. 2017.05.19 CSS3의 새로운 스타일 2

   * 배경 이미지의 표시 위치 지정하기 - background-origin 프로퍼티를 사용하면 배경 이미지의 표시 위치 기준을 지정할 수 있음. background-origin: border-box; - 테두리 영역의 왼쪽 위를 기준으로 하여 이미지를 표시 background-origin: padding-box: - 패딩 영역의 왼쪽 위를 기준으로 하여 이미지를 표시 background-origin: content-box; - 내용 영역의 왼쪽 위를 기준으로 하여 이미지를 표시 * 배경 이미지의 크기 지정하기 - background-szie 프로퍼티를 사용하면 배경 이미지의 크기를 지정할 수 있음. background-size: contain; - 이미지의 가로, 세로 비율을 유지하면서 표시 영역에 이미지..
2. 2017.05.19 CSS3의 새로운 스타일 1

   * 크기를 변경할 수 있는 박스 만들기 - resize 프로퍼티를 사용하면 크기를 조정할 수 있는 박스를 만들 수 있음. 1 2 3 4 5 6 7 8 9 10 11 [HTML] 유미나의 방 [CSS] .myResize { width:200px; height:40px; border:solid black 2px; overflow:auto; resize:both; } Colored by Color Scripter cs 1) resize 프로퍼티 none : 크기 변경 불가 // 초기값 horizontal : 폭만 변경 가능 both : 폭/높이 변경 가능 vertical : 높이만 변경 가능 * 박스에 그림자 효과 주기 - box-shadow 프로퍼티를 사용하면 박스에 여러 가지 그림자 효과를 줄 수 있음. ..
3. 2017.05.19 벤더 프리픽스(Vendor Prefix)

   * W3C의 사양이 결정될 때까지 - W3C에서 책정되는 사양은 아래와 같은 단계를 거쳐 결정됨. - 책정의 마지막 단계가 권고임. - W3C 사이트를 참조할 때는 어느 단계의 사양인지를 확인할 필요가 있음. - 권고 전 사양을 웹 브라우저가 도입하는 경우도 있으며, 웹 브라우저의 기능을 참고하여 사양이 정해지는 경우도 있음. Editor's Draft(편집자 초안) -> Working Draft[WD] (초안) -> Last Call Working Draftg[LC] (최종 초안) -> Candidate Recommendation[CR] (권고 후보) -> Proposed Recommendation[PR] (권고안) -> Recommendation[RED] (권고) * 벤더 프리픽스 - 권고 전 CSS..
4. 2017.05.19 CSS3란?

   * CSS의 특징 - CSS3에서는 이미지를 사용하지 않고도 음영이나 그라데이션을 지정할 수 있어서 표현력이 풍부해짐. - JavaScript를 사용하지않고도 애니메이션을 만들거나 변형할 수 있음. - 단락이나 배치를 세세하게 정의할 수도 있음. - 이미지를 사용하지 않아도 되기 때문에 웹 페이지의 데이터량을 절약할 수 있음. - 회선 속도가 느린 스마트폰 등의 환경에서도 쾌적하게 웹 페이지를 열람할 수 있음. 내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)
5. 2017.05.19 의미가 바뀐 태그

   - HTML5에서 모습은 바뀌지 않았지만 의미가 좀 더 분명해진 태그 * 텍스트 관련 태그 - 웹 페이지의 모양은 CSS에서 조정하도록 바뀌었기 때문에 텍스트의 글꼴을 바꾸는 태그는 텍스트 자체에 의미를 부여하도록 사용 목적이 변경되었음. 태그 변경 전 변경 후 작성 예 굵은 글꼴을 나타냄. 키워드나 제품명 등 다른 것과 구별하고 싶은 곳을 나타냄. 그림책 시리즈의 최신작은 >b>HTML5가 보이는 그림책입니다. 문자열을 이탤릭체로 나타냄. 마음의 소리나 다른 나라의 언어 등 본문과는 다른 부분을 나타냄. 유미나는 '힘내자'>라고 결심했다. 취소선이 그어진 문자열을 나타냄. 정확하지 않았던 내용(또는 관련성이 없어진 내용)을 나타냄. 보통은 취소선이 그어진 문자열이 표시됨. 정가 : 1200원 특가 : ..
6. 2017.05.19 HTML5의 새로운 태그 2

   * 폼의 새로운 속성 - HTML5에서는 폼의 input 요소의 type 속성의 값이 큰 폭으로 확장됨. 속성 기능 search 검색 키워드 입력 tel 전화번호 입력 url URL 입력 email 메일 주소 입력 month 연월 입력 week 주 입력 date 날짜 입력 time 시각 입력 datetime UTD(협정 세계시) 입력 datetime-local 현지 날짜와 시각 입력 number 수치 입력 range 지정 범위의 수치 입력 min 속성으로 최소값, max 속성으로 최대값을 지정함. (생략 시는 0~100) color 색 입력 서버에는 '#ffeaf()' (이스케이프하면 '%23ffeat()')와 같이 문자열이 보내짐. [지원 상황] IE Firefox Opera Safari Chrome ..
7. 2017.05.19 HTML5의 새로운 태그 1

   * 문서의 구성과 관련된 태그 - HTML 문서 안에서 택스트가 어떤 위치에 있는지를 나타내기 위한 태그 - 시각적인 변화는 없지만 텍스트를 의미적으로 구분할 수 있음. 태그 기능 작성 예 일반적인 섹션을 나타냄. 제목을 붙여도 좋을 만한 문장의 모음에 대해 사용함. 오늘의 날씨 맑음 독립된 콘텐츠를 나타냄. 뉴스 기사나 게시판, 블로그의 투고에 사용함. 그림책 정리 유미나는 책갈피를 모티브로 한 캐릭터입니다. 헤더가 되는 콘텐츠를 나타냄. 섹션의 목차나 검색 폼 등에 사용함. 푸터(각주)가 되는 콘텐츠를 나타냄. 저작권과 관련된 정보나 관련 페이지의 링크 등에 사용함. 안녕하세요. 웹 페이지의 내비게이션이 되는 콘텐츠를 나타냄. 페이지의 목차나 항목 리스트 등에 사용함. 목차 일람 HTML5란 CSS란..
8. 2017.05.19 HTML5의 특징

   - HTML5에서는 HTML4에 비해 태그의 의미를 분명히 하도록 되어 있음. * 문서형 정의의 간략화 - HTML5에서는 HTML 문서의 맨 앞에 쓰는 DOCTYPE 선언의 표기를 간략화하고 있음. HTML5 : HTML 4.01 : 문서형 정의(DTD: Document Type Definition) : HTML4에서는 HTML문서의 형과 버전, 언어를 정의함. - 웹 브라우저는 이 선언을 보고 HTML 문서가 어떤 버전으로 작성되었는지를 판단하고 동작을 바꿈. - HTML5에서는 표준 스타일을 CSS, 표준 스크립트를 JavaScript로 정하고 있음. 이 때문에 type 속성을 생략하고 CSS나 JavaScript를 그대로 이용할 수 있음. [CSS] HTML5 : HTML 4.01 : [JavaS..
9. 2017.05.19 HTML5란?

   * HTML5 - 2012년 3월 W3C(World Wide Web Cnsortium)가 사양을 책정한 차세대 마크업 언어. - HTML 4.01을 대신하여 점점 고도화되는 웹 애플리케이션, 웹 콘텐츠를 처리할 수 있도록 사양을 고려하고 있음. - 지금까지는 그래픽 그리기나 페이지 이동을 수반하지 않은 통신 등 HTML에서 구현할 수 없는 기능은 Adobe Flash나 Microsoft Silverlight와 같은 애드온을 통해 구현해 왔으나 HTML5에는 이러한 것들이 표준 사양으로 들어가 있음. HTML 사양의 역사 1993년 HTML 1.0 1995년 HTML 2.0 1997년 HTML 3.2 1997년 HTML 4.0 1999년 HTML 4.1 (사실 W3C는 HTML을 대신할 마크업 언어로 XH..