반응형 CSS15 모션그래픽 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. 모션그래픽 CSS의 최신버전에서는 포토샵이나 플래쉬와 같은 프로그램으로 해야 했던 일을 CSS로도 할 수 있게 되었습니다. 이 수업에서는 CSS의 코드를 통해서 그래픽 작업이나 에니메이션 작업을 하는 방법에 대해서 알려드립니다. - 전환 (transition) - 전환은 효과가 변경되었을 때 부드럽게 처리해주는 CSS의 기능입니다. 이와 관련된 것으로는 아래와 같은 속성들이 있습니다. 1. transition-duration 2. transition-property 3. transition-delay 4. transition-timing-function 5. transition transition_1.html Click 전환의 .. 2017. 9. 26. 그래픽 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. - 배경 - 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. 레이아웃 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. - 인라인 vs 블럭레벨 - html 엘리먼트들은 크게 두가지로 구분됩니다. 1. 화면 전체를 사용하는 태그 => block element 2. 화면의 일부를 차지하는 태그 => inline level element 이번 시간에는 inline element와 block level element의 차이점을 다룹니다. 그 과정에서 display라는 중요한 속성에 대해서도 배우게 됩니다. 어떤 element가 block이고 어떤 element가 inline인가? h1은 한 행을 다 쓴다. => block level element a tag는 자기 자신만 쓴다. => inline element inline-block.html Hello.. 2017. 9. 19. 조화 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. HTML은 중첩된 구조를 가지고 있다. 때문에 하나의 엘리먼트는 다양한 요소의 영향을 받는다. 이러한 요소들(효과들)중에 어떤 요소들을 적용해야하는지에 대한 일정한 규칙이 있다. 어떤 속성은 상속되는 것이 유리한지 안유리한지를 판단해서 동작한다. 무엇이 상속되고 무엇이 상속되지 않는가? => CSS설명서를 참고해야한다.inheritance.html 수업내용 html css javascript stylish는 웹사이트의 디자인을 사용자 마음대로 수정할 수 있는 기능이다. 이 기능을 이용해서 주어진데로 웹페이지를 소비하는 것이 아니라 자신의 취향을 반영할 수 있다. 또 다른 사람이 만든 디자인을 적용해서 간편하게 사이트의 디자인을 .. 2017. 9. 11. 속성을 공부하는 방법 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. 선택자 = 주어 속성 = 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. 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. 이전 1 2 다음 반응형
