본문 바로가기
반응형

Coding/Client - CSS16

Semantic UI 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. - Semantic UI - 1. semantic.ui로 감 2. Download Zip 3. 압축푼 후, Semantic-UI-CSS-master를 에디터 프로젝트에 추가함. 4. html안에 다음의 부분을 복붙함. 2017. 9. 26.
library 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. - library - 라이브러리(library)는 도서관이라는 뜻입니다. 도서관이란 어떤 공간인가요? 공용으로 책을 공유하는 공간/체계를 우리는 도서관이라고 부릅니다. 소프트웨어에서 라이브러리는 도서관의 이런 역할을 비유로 채택한 것입니다. 즉 많은 곳에서 공통적으로 사용될 수 있는 코드를 부품화한 것이 라이브러리입니다. CSS에도 이런 라이브러리가 많습니다. 여기서는 중요한 라이브러리들의 사용법을 알아봅니다. - fontello - 딩벳폰트는 폰트 대신 어떤 문자에 해당하는 이미지로 이루어진 폰트를 의미합니다. fontello는 딩벳이나 아이콘을 폰트로 제공하는 여러 서비스를 모아둔 서비스입니다. 특히 SVG 파일을 업로드하면.. 2017. 9. 26.
유지보수 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. - link 와 import - 똑같은 CSS를 적용해야 하는 웹페이지가 1000개가 있을 때 CSS의 내용이 바뀌었다면 어떻게 해야할까요? 아마 천개의 웹페이지를 모두 수정해야 할 것입니다. 이것은 CSS의 수정을 소극적으로 만들고 그것은 곧 아름다움을 억압하는 암담한 장애물이 될 것입니다. 여기서는 이런 문제를 근본적으로 해결할 수 있는 방법인 link 태그와 @import에 대해서 알아봅니다. 외부로 파일을 빼는 방법은 크게 두가지입니다. 1. 2. link_1.html page2 style.css h1{ color:red;} - 코드 경량화 (minify) -CSS는 네트워크를 통해서 전송됩니다. 자연스럽게 CSS의 크기.. 2017. 9. 26.
모션그래픽 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. 모션그래픽 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.
도구소개 - brackets 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. ---지금부터 수업에서 bracket을 사용하려고 합니다. bracket는 adobe에서 만든 오픈소스 에디터로 html, css 코딩을 하는데 최적화된 좋은 도구입니다. 하지만 이 도구는 코딩을 편리하게 해줄 뿐 우리수업의 내용과는 직접적인 연관은 없기 때문에 보셔도 좋고 안 보셔도 전혀 문제 되지 않습니다.--- http://brackets.io/ 2017. 9. 19.
조화 모든 저작권은 의 생산자인 님에게 있습니다.문제시, 비공개로 전환하겠습니다. 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.
반응형