반응형 웹앱23 그래픽 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. - 배경 - CSS를 이용하면 엘리먼트의 배경을 지정할 수 있다. 배경과 관련된 중요속성들을 알아보자. background-color : red background-image : url("bg.png") background-repeat : repeat, no-repeat, repeat-x, repeat-y background-attachment : scroll, fixed background-position : left top or x% y% or x y background-size : 100px 100px or cover or contain w3schools.com background.html Hello World backgr.. 2017. 9. 23. 타이포그래피 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. 단위 - unit을 지정해야한다. 크게 3가지의 단위가 있다. 1. px - 모니터 상의 화소 하나의 크기에 대응되는 단위입니다. 고정된 값이기 때문에 이해하기 쉽습니다만, 사용자가 글꼴의 크기를 조정할 수 없기 때문에 가급적 사용을 하지 않는 것이 좋습니다. 2. em - 부모 태그의 영향을 받는 상대적인 크기입니다. 부모의 크기에 영향을 받기 때문에 파악하기가 어렵습니다. rem이 등장하면서 이 단위 역시 사용이 권장되지 않습니다. 3. rem - html 태그에 적용된 font-size의 영향을 받습니다. html 태그의 폰트 크기에 따라서 상대적으로 크기가 결정되기 때문에 이해하기 쉽습니다. 가장 바람직한 단위입니다. 이.. 2017. 9. 8. 속성을 공부하는 방법 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. 선택자 = 주어 속성 = Property = CSS의 효과 다음의 그림은 속성의 사용빈도를 중심으로 중요도를 열거하였다. (MS제공) https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/ 2017. 9. 8. 가상 클래스 선택자 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. 가상(pseudo)클래스 선택자는 클래스 선택자는 아니지만 엘리먼트들의 상태에 따라서 마치 클래스 선택자처럼 여러 엘리먼트를 선택할 수 있는 선택자이다. 예제 방문함 방문안함 링크와 관련된 가상 클래스 선택자:link - 방문한 적이 없는 링크:visited - 방문한 적이 있는 링크:hover - 마우스를 롤오버 했을 때 :active - 마우스를 클릭했을 때 위의 선택자는 순서대로 지정하는 것이 좋습니다. 특히 visited의 경우는 보안상의 이유로 아래와 같은 속성만 변경이 가능합니다. colorbackground-colorborder-coloroutline-colorThe color parts of the fill and.. 2017. 9. 8. 부모 자식 선택자 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. : ul 밑에 있는 모든 li를 뜻한다. 예제 HTML CSS JavaSCript HTML CSS 1. Selector 2. Declaration JavaSCript - 선택자 공부 팁 - http://flukeout.github.io/ 2017. 9. 8. 선택자와 선언 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. CSS를 적용하는 방법 1. 문법의 속성으로 주기 2. 를 활용하기 어떤 태그를 디자인하기 위해서는... 1. 디자인하려는 태그를 선택하고 (선택자, Selector) 2. 선택한 대상에게 원하는 효과를 적용해야한다. (선언, Declaration) 예제 HTML CSS JavaSCript 2017. 9. 7. HTML5 입력 값 체크 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. 유효성체크 = validation pattern은 사용자의 입력값을 알아낼 수 있다. 정규표현식 -> [.....][.....] . 은 모든 문자를 뜻한다. (1개의 단어/숫자) +는 모든 문자+숫자를 넣을 수 있다. form validation은 사용자의 편의를 높여주는 기능일 뿐 보안성은 없다. 보안이라는 것은 결국 서버단에서 해결되어야할 문제이다. 사용자가 입력한 정보를 검증하여 서버에 넣어야한다. 예제 2017. 9. 6. 외부문서삽입 - iframe 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. 웹페이지에 다른 웹페이지를 삽입하는 방법인 아이프래임은 참 편리하면서도 위험한 방법입니다. 왜냐면 신뢰할 수 없는 사이트에서 악성코드 같은 것을 포함하고 있다면 삽입된 외부소스에서 악성코드가 실행될 수 있기 때문이죠. 이런 문제를 해소하기 위해서 HTML의 최신 버전인 HTML5에서는 샌드박스라는 것을 도입했습니다. 아이프래임으로 삽입된 웹페이지에서 자바스크립트 등이 실행되지 않도록 하는 방법인데요. 아이패래임이 무엇인지, 사용법, 그리고 보안을 개선할 수 있는 새로운 방법을 소개합니다.예제 1 예제 2 예제 3 2017. 9. 4. 모바일 지원 (viewport) 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. 예제 HTML 기술소개 기본문법 하이퍼텍스트와 속성 리스트와 태그의 중첩 선행학습 본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다. 2017. 9. 4. 정보로서의 HTML 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. - meta tag - 어떠한 데이터를 설명하는 데이터 : 우리가 작성한 웹페이지를 컴퓨터에 저장할 때, utf-8로 인코딩하라. 예제 생활코딩은 일반인에게 프로그래밍을 알려주는 온라인/오프라인 강의입니다. - 의미론적 태그 (semantic element) -예제 HTML 기술소개 기본문법 하이퍼텍스트와 속성 리스트와 태그의 중첩 선행학습 본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다. 선행학습 본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링.. 2017. 9. 4. 이전 1 2 3 다음 반응형
