반응형 웹애플리케이션26 타이포그래피 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. 단위 - 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. HTML5 입력 값 체크 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. 유효성체크 = validation pattern은 사용자의 입력값을 알아낼 수 있다. 정규표현식 -> [.....][.....] . 은 모든 문자를 뜻한다. (1개의 단어/숫자) +는 모든 문자+숫자를 넣을 수 있다. form validation은 사용자의 편의를 높여주는 기능일 뿐 보안성은 없다. 보안이라는 것은 결국 서버단에서 해결되어야할 문제이다. 사용자가 입력한 정보를 검증하여 서버에 넣어야한다. 예제 2017. 9. 6. 외부문서삽입 - iframe 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. 웹페이지에 다른 웹페이지를 삽입하는 방법인 아이프래임은 참 편리하면서도 위험한 방법입니다. 왜냐면 신뢰할 수 없는 사이트에서 악성코드 같은 것을 포함하고 있다면 삽입된 외부소스에서 악성코드가 실행될 수 있기 때문이죠. 이런 문제를 해소하기 위해서 HTML의 최신 버전인 HTML5에서는 샌드박스라는 것을 도입했습니다. 아이프래임으로 삽입된 웹페이지에서 자바스크립트 등이 실행되지 않도록 하는 방법인데요. 아이패래임이 무엇인지, 사용법, 그리고 보안을 개선할 수 있는 새로운 방법을 소개합니다.예제 1 예제 2 예제 3 2017. 9. 4. 모바일 지원 (viewport) 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. 예제 HTML 기술소개 기본문법 하이퍼텍스트와 속성 리스트와 태그의 중첩 선행학습 본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다. 2017. 9. 4. 주요태그 - 입력양식 form 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. - 입력양식 form - 사용자가 입력한 정보를 서버로 전송할 때 사용하는 태그 예제 ===> 이곳으로 id, pwd, address를 모두 전송한다. 아이디 : 비밀번호 : 주소 : - 텍스트 입력 - 예제 text : password : textarea : default value - 선택: dropdown list - 예제 색상 붉은색 검은색 파란색 CTRL+마우스클릭 으로 여러개를 선택할 수 있다. => 보통 checkbox를 씀 붉은색 검은색 파란색 - 선택: radio button & checkbox list - 예제 색상(단일선택) 붉은색 : 검은색 : 파란색 : 사이즈(다중선택) 95 : 100 : 105 : - .. 2017. 9. 4. 웹사이트 만들기 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. index.html HTML 기술소개 기본문법 하이퍼텍스트와 속성 리스트와 태그의 중첩 선행학습 본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다. 1.html HTML 기술소개 기본문법 하이퍼텍스트와 속성 리스트와 태그의 중첩 기술소개HTML은 HyperText Markup Language의 약자로서 웹페이지를 만드는 언어입니다. 2017. 9. 1. DOCTYPE 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. Document Type Declaration의 약자 HTML 기술소개 기본문법 하이퍼텍스트와 속성 리스트와 태그의 중첩 선행학습 본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다. 2017. 9. 1. 이전 1 2 3 다음 반응형
