본문 바로가기
반응형

생활코딩55

JavaScript소개 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. JavaScript란? HTML과 CSS는 정적인 언어입니다. 정적이라는 것은 이것들이 브라우저를 통해서 웹페이지를 화면에 그려주면 이 화면을 변경할 수 있는 방법이 없다는 의미입니다. (잘 이해가 안되죠? 걱정 마세요. 수업 들으면 곧 알게 됩니다.) J avascript는 HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주는 언어입니다. 경고창을 띄우고, 탭인터페이스를 만들고, Drag & Drop 기능의 웹에플리케이션을 만들수 있는거죠. 이 언어의 역사를 조금 이야기 해볼까요? 자바스크립트는 좀 허술한 언어입니다. 기능도 많지 않고, 주류에서 좀 벗어난 객체지향 모델(모르셔도 됩니다)을 가지고 있기도 합니다. 그래서 .. 2017. 9. 26.
조화 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. HTML은 중첩된 구조를 가지고 있다. 때문에 하나의 엘리먼트는 다양한 요소의 영향을 받는다. 이러한 요소들(효과들)중에 어떤 요소들을 적용해야하는지에 대한 일정한 규칙이 있다. 어떤 속성은 상속되는 것이 유리한지 안유리한지를 판단해서 동작한다. 무엇이 상속되고 무엇이 상속되지 않는가? => CSS설명서를 참고해야한다.inheritance.html 수업내용 html css javascript stylish는 웹사이트의 디자인을 사용자 마음대로 수정할 수 있는 기능이다. 이 기능을 이용해서 주어진데로 웹페이지를 소비하는 것이 아니라 자신의 취향을 반영할 수 있다. 또 다른 사람이 만든 디자인을 적용해서 간편하게 사이트의 디자인을 .. 2017. 9. 11.
타이포그래피 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. 단위 - 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.
선택자와 선언 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. CSS를 적용하는 방법 1. 문법의 속성으로 주기 2. 를 활용하기 어떤 태그를 디자인하기 위해서는... 1. 디자인하려는 태그를 선택하고 (선택자, Selector) 2. 선택한 대상에게 원하는 효과를 적용해야한다. (선언, Declaration) 예제 HTML CSS JavaSCript 2017. 9. 7.
HTML과 CSS가 만나는 법 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. CSS 실행방법 1. In-line 방식 (하드코딩) 2. 활용 예제 Hello world => color:red 부분만 CSS문법, 나머지는 html의 문법 Hello World 2017. 9. 7.
CSS 소개 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. CSS의 기반은 HTML이다. HTML = 정보, HTML은 홀로 존재할 수 있다. 하지만 CSS는 HTML없이 존재할 수 없다. HTML= 정보 CSS = 디자인 CSS는 에 들어가게 된다. **정보와 디자인의 분리 예제 바보 천하의 보배 2017. 9. 7.
HTML5 입력 값 체크 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. 유효성체크 = validation pattern은 사용자의 입력값을 알아낼 수 있다. 정규표현식 -> [.....][.....] . 은 모든 문자를 뜻한다. (1개의 단어/숫자) +는 모든 문자+숫자를 넣을 수 있다. form validation은 사용자의 편의를 높여주는 기능일 뿐 보안성은 없다. 보안이라는 것은 결국 서버단에서 해결되어야할 문제이다. 사용자가 입력한 정보를 검증하여 서버에 넣어야한다. 예제 2017. 9. 6.
HTML5 입력양식의 속성들 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. 예제 2017. 9. 6.
반응형

티스토리툴바