CSS
-
[WebPage] 2-3. Bootstrap, 쉽고 빠른 웹 프레임워크 - 웹 페이지 제작 강좌Web/WebPage 2015. 6. 20. 13:42
5. 부트스트랩에서 제공하는 Base CSS 5-1. 타이포그래피 (Typography) 타이포그래피는 문자에 관한 디자인 관련된 부분입니다. 1) 텍스트 강조하기 - 웹 화면의 텍스트 중 강조를 위한 여럿 요소들을 제공하고 있습니다. - 문단 내에서 특별한 문장을 눈에 띄게 해주는 lead, 텍스트 중에서 강조가 필요한 단어에 이탤릭이나 볼드 속성을 부여하는 strong, em이 있습니다. 2) 텍스트 눈에 띄게 하기 (lead) - lead 클래스는 문단 내에서 눈에 강조를 하여 눈에 띄게 하는 효과를 줍니다. - 사용법은 또는 태그로 감싸 준 뒤, 해당 태그의 클래스를 "lead"로 지정해주면 됩니다. 아래 예제를 통해 확인 가능 합니다. 12345 This is normal text. This i..
-
[WebPage] 2-3. Bootstrap, 쉽고 빠른 웹 프레임워크 - 웹 페이지 제작 강좌Web/WebPage 2015. 6. 17. 15:57
1. 부트스트랩 구조와 이해 - 부트스트랩을 직접 사용하는 방법도 중요하지만, 부트스트랩을 잘 사용하기 위해서는 구조에 대해서 알아 두는 것도 중요합니다. 2. 글로벌 스타일 (Global Styles) 처음으로 알아볼 것은 부트스트랩 전체를 관통하는 글로벌 스타일 입니다. 글로벌 스타일에 해당하는 Doctype, CSS Reset, Typography에 대해서 알아보는 것으로 시작하겠습니다. 2-1. HTML5 문서 타입 - 부트스트랩은 html5, css3, jQuery를 기반으로 작성되었습니다. - 따라서 html5 doctype을 요구합니다. ( * Doctype이란, 해당 문서에 대한 형식을 의미합니다) - HTML5 로 들어서서 아래와 같은 형식으로 간편하게 정의할 수 있게 되었습니다. 12 ..
-
[WebPage] 2. CSS 요소(Elements) - 웹 페이지 제작 강좌Web/WebPage 2015. 6. 17. 11:52
3. CSS Elements 3-1. CSS3 보더(Borders) - 보더란 쉽게 말해서 테두리에 지정되는 속성을 말합니다. 1. 모서리가 둥근 보더 - 기존 CSS2에서는 모서리가 둥근 보더를 사용하기가 매우 난감했습니다. 보더를 쪼갠 뒤, 각 모서리마다 서로 다른 이미지를 배치해서 모서리가 둥근 보더를 표현해야만 했습니다. - But, CSS3에서는 모서리가 둥근 보더가 기본 스타일에 포함되어 있으므로 해당 프로퍼티를 이용하여 생성해 주면 됩니다. 실습을 위해 기존의 작성한 FirstPage.html에 아래 코드를 입력합니다. 1234 This box has rounded corners. Colored by Color Scriptercs 다음으로 보더를 지정하기 위한 CSS를 작성하겠습니다. 123..
-
[WebPage] 2. CSS & Bootstrap - 웹 페이지 제작 강좌Web/WebPage 2015. 6. 16. 16:05
Chapter 2 CSS & Bootstrap 1. Bootstrap은 무엇인가? - 부트스트랩(Bootstrap)은 오픈소스(Open Source) 기반의 웹 UI 프레임워크입니다. - 개발자는 부트스트랩이 제공하는 각종 컴포넌트를 이용하여, 트위터와 같은 심플한 UI를 구현할 수 있습니다. - 부트스트랩은 기본 형태를 벗어나서 어느 정도까지 개발자 입맛대로 바꿔서 쓸 수 있도록 커스터마이즈(Customize) 할 수 있는 기능이 있습니다. => 종합적으로 웹의 기본 프레임을 부트스트랩이 형성하고, 나머지 세세한 부분에서 웹 개발자의 노력을 더하면 UI 관점에서 깔끔하면서 강력한 퍼포먼스를 자랑 할 수 있는 사이트를 만들 수 있게 되는 것 입니다. 2. CSS 2-1. CSS란? - CSS(Cascad..
-
[javascript] 58. DOM CSS - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:38
JavaScript HTML DOM - Changing CSS 1. Changing HTML Style HTML 요소의 스타일을 변경하기 위해서 아래 문법을 사용합니다: document.getElementById(id).style.property=new style 아래 예제는 요소의 스타일을 변경하는 예제입니다: 123456789101112131415161718 Hello World! Hello World! document.getElementById("p2").style.color = "blue";document.getElementById("p2").style.fontFamily = "Arial";document.getElementById("p2").style.fontSize = "larger"; The..
-
[jQuery] 17. CSS() - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:23
jQuery - css() Method 1. jQuery css() Method css() 메소드는 선택된 요소의 하나 이상의 스타일 속성을 설정하거나 반환합니다. 2. Return a CSS Property 특정 CSS 속성 값을 반환하기 위해서, 아래 문법을 사용합니다: css("propertyname"); 아래 예제는 처음 매치되는 요소의 배경색을 반환하는 예제입니다: 12345678910111213141516171819202122232425$(document).ready(function(){$("button").click(function(){alert("Background color = " + $("p").css("background-color"));});}); This is a heading T..
-
[jQuery] 16. CSS Classes - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:22
jQuery - Get and Set CSS Classes jQuery에서, CSS 요소를 조작하는 것은 쉽습니다. 1. jQuery Manipulating CSS jQuery는 CSS 조작을 위해서 몇 가지 메소드를 가지고 있습니다. - addClass() - removeClass() - toggleClass() - css() 2. Example Stylesheet 아래 나오는 스타일시트는 이번 페이지의 모든 예제에 사용될 것 입니다. 12345678.important { font-weight: bold; font-size: xx-large;}.blue { color: blue;}cs 3. jQuery addClass() Method 아래 예제는 다른 요소에 class 속성을 추가하는 방법을 보여줍니다..
-
[jQuery] 3. 선택자(selector) - jQuery 강좌Web/jQuery 2015. 6. 13. 11:13
jQuery Selectors jQuery 선택자(selector)는 jQuery 라이브러리의 가장 중요한 부분 중 하나입니다. 1. jQuery Selectors jQuery 선택자는 HTML 요소를 선택하고 조작할 수 있게 허용합니다. jQuery 선택자는 요소들의 id, classes, types, attributes, attribute의 값 등을 기반으로 HTML 요소를 찾습니다. 이것은 CSS 선택자를 기반으로 하였습니다. jQuery의 모든 선택자는 달러 마크와 괄호로 시작됩니다: $() 2. The element Selector jQuery 요소 선택자는 요소 이름(element name)을 기반으로 요소를 선택합니다. 페이지 내의 모든 요소를 선택하기 위해 아래와 같이 할 수 있습니다: 1..