ViewResolver(뷰를 찾아주는 해결사)란?
* 뷰의 이름과 로케일에 따라 적절한 타겟(뷰)을 찾아 인스턴스화하기 위해 스프링MVC가 사용하는 인터페이스로 Strategy패턴을 이용하여 작성되어 있다.
스프링은 여러가지 ViewResolver 인터페이스의 구현체를 제공하며, 모든 구현체들은 resolveViewName(String viewName, Locale locale) 메소드를 구현하고 있기 때문에 파라미터인 locale변수의 값에 따라 서로 다른 뷰를 반환하여 적절한(내가 원하는) 뷰를 찾아서 실행할 수 있다.
* 한줄요약: 특정한 뷰를 찾아서 실행시켜 주는 녀석
* spring에서 지원하는 다양한 뷰리졸버들.
UrlBasedViewResolver
(참조: spring 3.2 docs 17.5.4 ContentNegotiatingViewResolver)
<bean class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver">
<property name="viewResolvers">
<list>
<bean class="org.springframework.web.servlet.view.BeanNameViewResolver" />
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/view/" />
<property name="suffix" value=".jsp" />
</bean>
</list>
</property>
<property name="defaultViews">
<list>
<bean class="org.springframework.web.servlet.view.json.MappingJackson2JsonView" />
</list>
</property>
</bean>
* 보너스, JSON......?
난 자꾸 아래의 이분이 생각난다... 잘게잘게 썰어주시는 이분....
JSON (JavaScript Object Notation)은 경량의 DATA-교환 형식이다. 이 형식은 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이하다. JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999의 일부에 토대를 두고 있다. JSON은 완벽하게 언어로 부터 독립적이지만 C-family 언어 - C, C++, C#, Java, JavaScript, Perl, Python 그외 다수 - 의 프로그래머들에게 친숙한 관습을 사용하는 텍스트 형식이다. 이러한 속성들이 JSON을 이상적인 DATA-교환 언어로 만들고 있다....(참조: 위키)
라고 하는데... 예제 객체 하나 보는것이 더 빠른 이해가 될것 같다.
var json = {
name: "홓긿돟",
age: 20,
job: "thief"
}
이렇게 생긴 객체타입이다.....
| node.js, CORDOVA, PhoneGap (0) | 2013.07.11 |
|---|---|
| javaScript, jQuery 함수 (0) | 2013.07.08 |
| 6.25 (0) | 2013.06.25 |
| Mustache (0) | 2013.07.04 |
|---|---|
| RequireJS (0) | 2013.07.04 |
| Number Class (0) | 2013.07.04 |
|---|---|
| RequireJS (0) | 2013.07.04 |
| Number Class (0) | 2013.07.04 |
|---|---|
| Mustache (0) | 2013.07.04 |
자바 스크립트
문서 객체 모델 ( DOM, Document Object Model )
1. 문서 객체 모델 (DOM)
- 웹브라우저가 HTML페이지를 인식하는 방식
- document 객체와 관련된 객체의 집합
2. DOM 용어 정리
1) 태그 : HTML 페이지 내에 존재하는 element (ex>html, head, body...)
2) 문서 객체 : 태그를 자바스크립트에서 이용할 수 있는 객체로 만든 것.
3) 노드 : DOM 트리에서 각각의 요소들 / 요소노드(Element Node)와 텍스트노드(Text Node)로 구분
ex> <h1> 안녕하세요. 저는 텍스트 노드입니다.</h1>
=> h1 : 요소 노드 // 안녕하세요. 저는 텍스트 노드입니다. : 텍스트 노드
<!DOCTYPE html>
<html> -> 요소 노드
<head> -> 요소 노드
<title>INDEX</title> -> title :요소 노드 , 'INDEX' :텍스트 노드
</head>
<body> -> 요소 노드
<h1>Text Node</h1> ->h1 : 요소 노드, 'Text Node' : 텍스트 노드
<img src="image.jpg"/> -> 요소 노드
</body>
</html>
* '동적으로 문서 객체를 생성한다' 의미는 ?
=> 자바 스크립트를 사용해 원래 HTML페이지에는 없던 문서 객체를 생성하는 것.
3. 문서 객체 만들기
1) 요소 노드와 텍스트 노드를 생성
2) 생성한 요소 노드와 텍스트 노드를 연결(텍스트 노드를 요소 노드에 붙여줌)
3) 생성한 문서 객체를 body 문서 객체에 연결(화면에 문서 객체를 출력하기 위해서)
* document 객체의 노드 생성 메서드 -> 1)과정
createElement(tagName) |
요소 노드를 생성 |
createTextNode(text) |
텍스트 노드를 생성 |
* 문서 객체의 연결 메서드 ->2) , 3) 과정
appendChild(code) |
객체에 노드를 연결 |
* 예제 코드
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function () {
// 변수를 선언합니다.
var header = document.createElement('h1'); ->요소 노드 생성
var textNode = document.createTextNode('Hello DOM'); -> 텍스트 노드 생성
// 노드를 연결합니다.
header.appendChild(textNode); -> 요소 노드와 텍스트 노드 연결
//appendDChild를 해줘야 h1안으로 텍스트가 들어간다.
// 화면에 출력은 아직 안됨.
document.body.appendChild(header); -> 생성한 문서 객체를 body
//document 는 브라우저에 제공해주는 객체 문서 객체에 연결
//DOM tree에 추가되어야 출력될 수 있음
};
</script>
</head>
<body>
</body>
</html>
4. 문서 객체 만들기 (2) - 변수의 속성 지정
-> 텍스트 노드를 갖지 않는 노드를 생성하는 방법
=> 대표적으로 img 태그.(이미지 태그를 넣기 위해서는 src 속성을 지정해야 함.)
-> 문서 객체의 속성 지정 방법 (2가지)
1) 변수를 선언한 후,
변수.속성 = '값'으로 넣기
=> 웹표준이 정의하거나 웹브라우저가 지원하는 태그의 속성에서만 사용가능
* img.속성명 = 값;
- 속성은 반드시 해당 엘리먼트에 존재하는 속성이어야 한다.
- 만약, 존재하는 속성이 아닌 경우에는 추가할 수 없다.
- img['data-property']=350; //기존에 있는 속성이 아니라서 추가 안됨
2) 문서 객체의 속성 메서드 이용
=> 웹 브라우저가 지원하지 않은 속성도 넣을 수 있음.
setAttribute(name,value) |
객체의 속성을 지정 |
getAttribute(name) |
객체의 속성을 가져옴 |
1)의 예제
<script>
window.onload = function () {
// 변수를 선언합니다.
var img = document.createElement('img');
//이미지 태그의 속성 설정
img.src = 'Penguins.jpg';
img.width = 500;
img.height = 350;
// 노드를 연결합니다.
document.body.appendChild(img);
};
</script>
2)의 예제
<script>
window.onload = function () {
// 변수를 선언
var img = document.createElement('img');
//setAttribute로도 속성값을 설정
img.setAttribute('src', 'Penguins.jpg');
img.setAttribute('width', 500);
img.setAttribute('height', 350);
// setAttibute() 메서드를 사용하지 않으면 불가능
img.setAttribute('data-property', 350);
// 노드를 연결합니다.
document.body.appendChild(img);
};
</script>
5. 문서 객체 만들기 (3) -> innerHTML 속성을 사용하는 것.
- 3,4 번 문서 객체 생성 방법 -> 노드를 만들고 연결하는 방법
- 5번 방법 -> 문서 객체의 innerHTML 속성을 사용하는 것. (더 쉬운...)
- 문서 객체의 innerHTML - 태그의 내부를 의미하는 속성
- 문자열을 선언하고 body 문서 객체의 innerHTML 속성에 넣기만 하면 문서 객체 생성 !
<h1> |
hello~!! |
</h1> |
태그 |
innerHTML속성 |
태그 |
예제>
<script>
window.onload = function () {
// 변수를 선언
var output = '';
output += '<ul>';
output += ' <li>JavaScript</li>';
output += ' <li>jQuery</li>';
output += ' <li>Ajax</li>';
output += '</ul>';
// innerHTML 속성에 문자열을 할당합니다.
document.body.innerHTML = output;
};
</script>
6. 문서 객체 가져오기(1)
-> 웹 페이지에 존재하는 HTML 태그를 자바스크립트로 가져오는 방법
* document 객체의 노드 추출 메서드
getElementById(id) |
태그의 id 속성이 일치하는 id와 일치하는 문서 객체를 가져옴. |
- script 부분 -> vaar header = document.getElementById('header1') =>header1의 객체 h1의 문서 객체 가
져옴
- body부분 -> <h1 id="header1">hello</h1>
* innerHTML을 이용하여 속성 변경
예제>
<head>
<script>
window.onload = function () {
// 문서 객체를 가져옵니다.
var header1 = document.getElementById('header_1');
// 문서 객체의 속성을 변경합니다.
header1.innerHTML = 'with getElementById()';
};
</script>
</head>
<body>
<h1 id="header_1">Header</h1>
</body>
7. 문서 객체 가져오기(2) -> 한번에 여러개의 문서 객체를 가져오기.(복수형 : Elements)
* document 객체의 노드 추출 메서드
getElementsByName(name) |
태그의 name속성이 name과 일치하는 문서 객체를 배열로 가져옴 |
getElementsTagName(tagName) |
tagName과 일치하는 문서 객체를 배열로 가져옴 |
- 배열로 순서대로 들어감 -> 반복문 사용시,' for in' 반복문 사용 불가 (브라우저에 따라 속성과 메서드 종류에 차이가 있음)
-> '단순 반복 for문' 사용
- 예제) getElementsByTagqName()메서드를 사용하여 복수형 문서 객체를 가져와 속성을 변경
<head>
<title>Index</title>
<script>
window.onload = function () {
// 문서 객체를 가져옴
var headers = document.getElementsByTagName('h1');
for (var i = 0; i < headers.length; i++) {
// 문서 객체의 속성을 변경
headers[i].innerHTML = 'hey~';
}
};
</script>
</head>
<body>
<h1>Header</h1>
<h1>Header</h1>
</body>
8. 문서 객체의 스타일 조작
- 문서 객체의 style 속성을 사용하여 문서 객체의 스타일 변경
1) getElementById()메서드를 사용해 문서 객체를 가져옴
2) 문서객체의 style 속성을 지정 <문서객체.style.속성 = '값'>
예제>
<head>
<script>
// 아이디를 찾아서 스타일을 설정
window.onload = function () {
// 문서 객체를 가져옴
var header = document.getElementById('header');
// 문서 객체의 스타일을 바꿔줌
//style의 이름은 css와 비슷
// ex> border -> border
// font-family->fontFamily ,background-color =>backgroundColor (자바스크립트에서 식별자에 '-'사용 불가)
// header객체에 스타일 적용
header.style.border = '2px Solid Black';
header.style.color = 'Orange';
header.style.fontFamily = 'Helvetica';
};
</script>
</head>
<body>
<h1 id="header">Header</h1>
</body>
9. 문서 객체 제거
* 문서 객체 제거 메서드
removeChild(child) |
문서 객체의 자식 노드를 제거 |
예제)
<head>
<script>
window.onload = function () {
// 문서 객체를 가져옴
var willRemove = document.getElementById('will_remove');
// 문서 객체를 제거.
document.body.removeChild(willRemove);
//body-> 반드시 부모를 찾아서 지워야 한다.
};
</script>
</head>
<body>
<h1 id="will_remove">Header</h1>
</body>
-> 부모 노드.removeChild(제거하고자 하는 자식 노드);
// 부모노드로 이동하여 자식 노드를 제거
- C.S.Y -
CSS
<!--[if !supportEmptyParas]--> <!--[endif]-->
CSS는 스타일을 일괄적으로 정의하는 것을 의미한다.
<!--[if !supportEmptyParas]--> <!--[endif]-->
html과 css는 html4 부터 분리되었으며 따라서 이 표준을 따라줘야한다.
<!--[if !supportEmptyParas]--> <!--[endif]-->
CSS는 OPP처럼 상속의 개념이 있다. 기본적으로 CSS의 자료구조는 DOM과 같이 '트리'이다.
<!--[if !supportEmptyParas]--> <!--[endif]-->
스타일의 대상이 되는 것은 <body> 엘리먼트 안에 있는 엘리먼트들이며 여기서 <body>가 루트 엘리먼트, 즉 최상위 부모 엘리먼트가 되는 것이다. 그리고 내가 CSS에서 선택자를 통해 body엘리먼트에 스타일을 정의하면 body 하위에 있는 모든 엘리먼트들에게도 적용된다. 자식의 자식, 그 자식의 자식에게 까지 말이다. 하지만 body 안에 있는 엘리먼트들을 개별적으로 디자인 하는 경우가 더 많다. 이럴때는 바로 '오버라이딩' 기능을 쓰면 된다. 선택자를 이용해 엘리먼트를 선택하고 스타일을 정의하면 그것은 부모 엘리먼트로 부터 상속받은 디자인은 무시하고 오버라이딩한 디자인이 적용되는 것이다.
먼저 트리구조로 엘리먼트를 나열하고 상속 개념을 이용하여 CSS파일을 작성해야한다.
<!--[if !supportEmptyParas]--> <!--[endif]-->
기본적으로 선택자는 엘리먼트 이름, id, 클래스로 나눌수 있다. 하지만 이보다 훨씬더 복잡하고 다양한 선택자가 있다는것을 알아야한다.
선택자는 Type(element),Universal(*),class/id,attribute(속성),가상요소/가상클래스,선택자결합(하위,자식,인접) 등으로 구성된다.
| Pattern | Meaning | S5 | C8 | F3.6 | O11 | I9b | I8 | I7 | I6 |
|---|---|---|---|---|---|---|---|---|---|
| #id | id로 지정된 요소 선택 | O | O | O | O | O | O | O | O |
| .class | class로 지정된 요소 선택 | O | O | O | O | O | O | O | O |
| E | E 요소를 선택 | O | O | O | O | O | O | O | O |
| E:link | 방문하지 않은 E를 선택 | O | O | O | O | O | O | O | O |
| E:visited | 방문한 E를 선택 | O | O | O | O | O | O | O | O |
| E:hover | 마우스가 올라가 있는 동안 E를 선택 | O | O | O | O | O | O | O | O |
| E:active | 마우스 클릭 또는 키보드(enter)가 눌린 동안 E를 선택 | O | O | O | O | O | O | O | X |
| E:focus | focus가 머물러 있는 동안 E를 선택 | O | O | O | O | O | O | X | X |
| E:first-line | E 요소의 첫 번째 라인 선택 | O | O | O | O | O | O | O | X |
| E:first-letter | E 요소의 첫 번째 문자 선택 | O | O | O | O | O | O | O | X |
| * | 모든 요소 선택 | O | O | O | O | O | O | O | O |
| E[foo] | ‘foo’ 속성이 포함된 E를 선택 | O | O | O | O | O | O | O | X |
| E[foo="bar"] | ‘foo’ 속성의 값이 ’bar’와 일치하는 E를 선택 | O | O | O | O | O | O | O | X |
| E[foo~="bar"] | ‘foo’ 속성의 값에 ’bar’가 포함되는 E를 선택 | O | O | O | O | O | O | O | X |
| E[foo|="en"] | ‘foo’ 속성의 값이 ’en’ 또는 ’en-’ 으로 시작되는 E를 선택 | O | O | O | O | O | O | O | X |
| E:first-child | 첫 번째 자식 요소가 E라면 선택 | O | O | O | O | O | O | O | X |
| E:lang(fr) | HTML lang 속성의 값이 ’fr’로 지정된 E를 선택 | O | O | O | O | O | O | X | X |
| E::before | E 요소 전에 생성된 요소 선택 | O | O | O | O | O | O | X | X |
| E::after | E 요소 후에 생성된 요소 선택 | O | O | O | O | O | O | X | X |
| E>F | E 요소의 자식인 F 요소 선택 | O | O | O | O | O | O | O | X |
| E+F | E 요소를 뒤의 F 요소 선택 | O | O | O | O | O | O | O | X |
| E[foo^="bar"] | ‘foo’ 속성의 값이 ’bar’로 정확하게 시작하는 요소 선택 | O | O | O | O | O | O | O | X |
| E[foo$="bar"] | ‘foo’ 속성의 값이 ’bar’로 정확하게 끝나는 요소 선택 | O | O | O | O | O | O | O | X |
| E[foo*="bar"] | ‘foo’ 속성의 값에 ’bar’를 포함하는 요소 선택 | O | O | O | O | O | O | O | X |
| E:root | 문서의 최상위 루트 요소 선택 | O | O | O | O | O | X | X | X |
| E:nth-child(n) | 그 부모의 n번째 자식이 앞으로부터 지정된 순서와 일치하는 E 라면 선택 | O | O | O | O | O | X | X | X |
| E:nth-last-child(n) | n번째 자식이 뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택 | O | O | O | O | O | X | X | X |
| E:nth-of-type(n) | E 요소 중 앞으로부터 순서가 일치하는 n번째 E 요소 선택 | O | O | O | O | O | X | X | X |
| E:nth-last-of-type(n) | E 요소 중 끝으로부터 순서가 일치하는 n번째 E 요소 선택 | O | O | O | O | O | X | X | X |
| E:last-child | E 요소 중 마지막 자식이라면 E 선택 | O | O | O | O | O | X | X | X |
| E:first-of-type | E 요소 중 첫번째 E 선택 | O | O | O | O | O | X | X | X |
| E:last-of-type | E 요소 중 마지막 E 선택 | O | O | O | O | O | X | X | X |
| E:only-child | E 요소가 유일한 자식이면 선택 | O | O | O | O | O | X | X | X |
| E:only-of-type | E 요소가 같은 타입이면 선택 | O | O | O | O | O | X | X | X |
| E:empty | 텍스트 및 공백을 포함하여 빈 자식을 가진 E를 선택 | O | O | O | O | O | X | X | X |
| E:target | E의 URI의 대상이 되면 선택 | O | O | O | O | O | X | X | X |
| E:enabled | 활성화된 폼 컨트롤 E요소 선택 | O | O | O | O | O | X | X | X |
| E:disabled | 비활성화된 폼 컨트롤 E요소 선택 | O | O | O | O | O | X | X | X |
| E:checked | 선택된 폼 컨트롤(라디오버튼,체크박스)을 선택 | O | O | O | O | O | X | X | X |
| E:not(s) | s가 아닌 E 요소 선택 | O | O | O | O | O | X | X | X |
| E~F | E 요소가 앞에 존재하면 F를 선택 | O | O | O | O | O | O | O | X |
<표 1> CSS 버전에 따른 선택자의 종류와 브라우저별 지원여부 – CSS1 – CSS2 – CSS3
참조:
CSS에서 상속이란 특정 속성들이 부모 요소로부터 자식 요소로 전달되는 개념입니다. 이것은 유전학에서 말하는 상속과 매우 흡사합니다. 부모의 눈이 파란색이라면, 자식들의 눈 또한 파란색일 확률이 높습니다.
모든 CSS 속성들이 상속되는 것은 아닙니다. 상속된다면 좀 이상한 것들이 있기 때문이죠. 예를 들어, 마진은 상속되지 않습니다. 자식 요소가 부모와 동일한 마진을 가지는 경우는 많지 않기 때문입니다. 대부분의 경우, 상식적으로 생각하면 어떤 속성들이 상속되고 어떤것들이 그렇지 않을 지 쉽게 짐작할 수 있습니다. 좀 더 구체적인 내용을 원한다면, CSS 2.1 명세의 속성 요약 테이블을 보면 될 것입니다.
그러면 CSS는 왜 상속이라는 메커니즘을 가지고 있을까요? 가장 쉬운 답안은, 상속이라는 시스템이 없었다면 어땠을지 생각해 보는 것입니다. 상속의 개념이 없었다면 글꼴, 글씨크기, 글색상 같은 것은 모든 요소들에 대해서 전부 각각 지정했어야 했을 것입니다.
html 요소나 body 요소에서 글씨 속성을 정하고 모든 요소들이 그것을 물려받게끔 할 수 있습니다. 특정한 컨테이너 요소에서 배경색과 전경색을 정하면, 그 컨테이너에 들어 있는 모든 자식 요소들이 전경색과 배경색을 물려받습니다. 원래 배경색은 상속되지 않는것이 맞지만 각 요소들의 기본 배경색이 투명하기 때문에 컨테이너가 가진 배경색이 그대로 비쳐 보이는 것입니다. 이 효과는 마치 배경색이 상속되는 것 처럼 보이지만 그렇지는 않습니다. 만약 배경 이미지가 상속된다면 그 결과는 아주 이상할 것입니다.
HTML의 모든 요소들은 부모로부터 상속할 수 있는 속성은 전부 상속합니다. 유일한 예외라면 html 요소입니다. 부모가 없으니 당연하지요.
물려받은 속성이 적용될지 아닐지는 다른 것들과의 관계에서 설정됩니다. 나중에 캐스케이딩을 다루면서 다시 살펴볼 것입니다. 지금은 그냥, 어머니가 파란 눈을 가졌더라도 아이가 갈색 눈을 가질 수 있는 정도로만 이해하세요.
Descendant Selector
하위 선택자. 부모를 지정해주면 그 아래있는 자손만 선택
부모를 앞에 쓰고 그 뒤에 자식을 쓰면 된다.
li a {속성: 값;} li 안에 위치한 자손 a 를 선택함
p strong {속성: 값;} p 안에 위치한 자손 strong을 선택함
html body p {속성: 값;} html 안에 위치한 body 안에 위치한 자손 p 를 선택함
자식 선택자 child Selector / 꺾음 괄호( > )사용
자손 선택자와 비슷하게 자식 선택자로 사용하여 자식을 선택할 수 있다. 꺾음 괄호( > ) 사용
어느 부모의 어느 자식인지 정확히 지정할 수 있는 선택자.
#nav>p 아이디 nav (부모)의 자식 p를 모두 선택함
p>strong p(단락:부모)내부의 자식 strong을 모두 선택함
인접 형제 선택자 / ( + ) 플러스 기호 사용
부모의 가장 가까운(인접한) 형제를 찾는 선택자.
h1 + p h1(부모)의 가장 가까운 자식 p 를 선택함
(h1 아래 자식 p가 많을 경우 가장 h1에 인접한 단 하나의 p만 선택됌)
일반 형제 선택자 / ( ~ ) 물결 기호 사용
위의 인접 형제에서는 h1에 가장 인접한 단하나의 자식 p만 찾는 반면에,
이 일반 형제 선택자는 h1의 자식들 p를 모두 선택한다.
h1 ~ p h1 자식의 p를 모두 선택
body {
/* font-family: 폰트, 폰트, 폰트, 폰트 패밀리;
1. Serif(명조체) : Times, 궁서체, 바탕체
2. Sans-serif(고딕체) : Arial, 굴림체, 돋움체, 맑은고딕
3. Monospace(고정 폭; 모든 알파벳 폭이 똑같다.): Courier, Monaco
4. Cursive(흘림체): Comic Sans
5. Fantasy: impact
*/
font-family: Verdana, Geneva, Arial, Sans-serif;
/*
Verdana 먼저 찾고, 없으면 Geneva. 없으면 Arial. 없으면 sans-serif 를 찾는다.
1. 가장 많이 웹페이지보는 운영체제에 적합한 폰트를 정의한다.
2. 없으면 그 다음 적합한 폰트를 정의.
3. 위와 같다.
4. Sans-serif는 브라우저가 디폴트로 사용하기로한 폰트를 찾아 보여준다.
*/
<!--[if !supportEmptyParas]--> <!--[endif]-->
/* font-size: 폰트의 높이
1. px : 픽셀 단위로 지정 가능하다.
2. % : 기존 다른 폰트 크기를 기준으로 설정
3. em: 배수. 기존 다른 폰트 크기를 기준으로 설정
4. 상수: xx-smail ~ xx-large
-> body에서 폰트의 기본 크기 값을 설정한다.
-> 가능하면 상수값으로 설정한다.
-> body의 기본 값을 기준으로 나머지 엘리먼트들은 % 또는 em으로 설정한다.
<!--[if !supportEmptyParas]--> */
}
<!--[if !supportEmptyParas]--> <!--[endif]-->
상속
스타일 중 일부는 자손에게 상속된다.
예시) font
<!--[if !supportEmptyParas]--> <!--[endif]-->
상속안되는 것
예시) border
<!--[if !supportEmptyParas]--> <!--[endif]-->
!부모로부터 상속받는 key가 있고, 상속받지 않는 key가 있다는 걸 알고 있자.
<!--[if !supportEmptyParas]--> <!--[endif]-->
italic: 폰트에서 제공하는 기울림체 사용
oblique: 폰트에 기울림체가 없더라도 소프트웨어적으로 처리. 폰트가 미려하지 않다. 계단현상 발생.
벡터 폰트: 창을 늘였다가 줄여도 폰트 크기는 유지된다. 단점은 출력이 느리다.
<!--[if !supportEmptyParas]--> <!--[endif]-->
<!--[if !supportEmptyParas]--> <!--[endif]-->
* Box
□
배경안에 색, 그림을 넣을 수 있다.
border안에 내용물이 들어온다.
<!--[if !supportEmptyParas]--> <!--[endif]-->
padding - 박스 안쪽 폭
margin - 박스 바깥쪽 폭
width - 박스 안에 내용물의 너비
<!--[if !supportEmptyParas]--> <!--[endif]-->
margin 설정 시 두 개 박스 사이에 간격은 겹친다.
<!--[if !supportEmptyParas]--> <!--[endif]-->
□
↕ 두 박스 사이에 마진은 겹침
□
실제너비 = width + border(경계선 좌/우 너비) + padding(좌/우) + margin(좌/우)
웹 페이지 크기는 1024.
<!--[if !supportEmptyParas]--> <!--[endif]-->
<!--[if !supportEmptyParas]--> <!--[endif]-->
#guarantee {
line-height: 1.9em;
font-style: italic;
background-color: #a7cece;
border-color: white;
border-style: dashed;
border-width: 5px;
padding: 25px;
padding-left: 80px;
margin: 30px;
margin-right: 250px;
background-image: url(images/background.gif);
background-position: bottom right;
background-repeat: no-repeat;
width: 100px;
}
아이디 guarantee로 되어있는 것에 대해 스타일을 바꿔준다.
<!--[if !supportEmptyParas]--> <!--[endif]-->
line-height: 1.9em;
/* 라인 폭넓이를 1.9배로 늘린다. */
<!--[if !supportEmptyParas]--> <!--[endif]-->
font-style: italic;
/* 글자 스타일을 '기울임'으로 바꾼다. */
<!--[if !supportEmptyParas]--> <!--[endif]-->
color: #444444;
/* 글자 색상을 설정한다. */
<!--[if !supportEmptyParas]--> <!--[endif]-->
font-family: Georgia, "Times New Roman", Times, serif;
/* 글꼴 그룹 지정하는 것으로, Times New Roman같은 경우에는 이름 사이에 공백이 있기 때문에 쌍따옴표로 감싸줘야 한다. 각각의 폰트는 하나로만 되어 있는 것이 아니라 세트로 구성되어 있다. 위 font-family 참조. */
<!--[if !supportEmptyParas]--> <!--[endif]-->
padding: 25px;
/* 해당 엘리멘트 박스 안쪽에 너비를 조절한다.
상 / 우 / 하 /좌 너비를 25px로 늘린다. */
<!--[if !supportEmptyParas]--> <!--[endif]-->
padding-left: 80px;
/* 해당 엘리멘트 박스 안쪽에서 왼쪽 너비를 80px만큼 더 늘린다. */
<!--[if !supportEmptyParas]--> <!--[endif]-->
margin: 30px;
/* 해당 엘리멘트 박스 바깥쪽 모든 너비를 30px만큼 더 늘린다.
padding과 마찬가지로 상 / 우 / 하 / 좌 너비로 순으로 간다. */
<!--[if !supportEmptyParas]--> <!--[endif]-->
margin-right: 250px;
/* 해당 엘리멘트 박스 바깥쪽 우측 너비를 250px만큼 늘린다. */
<!--[if !supportEmptyParas]--> <!--[endif]-->
border-style: dashed;
/* 테두리(경계)선 스타일을 dashed로 설정한다 */
<!--[if !supportEmptyParas]--> <!--[endif]-->
border-width: 5px;
/* 테두리(경계)선 굵기를 5px만큼 늘린다. */
<!--[if !supportEmptyParas]--> <!--[endif]-->
border-color: red;
/* 테두리(경계)선 색상을 red로 설정한다. */
<!--[if !supportEmptyParas]--> <!--[endif]-->
background-color: #a7cece;
/* 해당 엘리멘트 박스 배경색상을 설정한다. */
<!--[if !supportEmptyParas]--> <!--[endif]-->
background-image: url(images/background.gif);
/* 해당 엘리멘트 박스 배경그림을 설정한다. */
<!--[if !supportEmptyParas]--> <!--[endif]-->
background-repeat: no-repeat;
/* 해당 엘리멘트 박스 안에 배경 이미지를 반복해주는데, no-repeat 은 반복하지 않고 한 번만 출력한다. */
<!--[if !supportEmptyParas]--> <!--[endif]-->
background-position: bottom right;
/* 해당 엘리멘트 박스 안에 배경 이미지 위치를 잡아준다. 우측 하단으로 설정한다. */
<!--[if !supportEmptyParas]--> <!--[endif]-->
width: 100px;
/* 해당 엘리멘트 박스 가로 크기를 100px로 설정한다. */
<!--[if !supportEmptyParas]--> <!--[endif]-->
<!--[if !supportEmptyParas]-->
div - block
span - in line
<!--[if !supportEmptyParas]--> <!--[endif]-->
웹 브라우저는 HTML 문서에 기록된 순서대로 출력한다.
출력하다가 화면의 오른쪽 경계에 부딪히면 다음 라인으로 넘어간다.
만약, 출력하다가 오른쪽이나 왼쪽에 공중부양된 엘리멘트가 있다면 그 엘리멘트의 경계면을 따라서 출력한다.
왜냐하면 콘텐츠는 보여야 되기 때문이다.
<!--[if !supportEmptyParas]--> <!--[endif]-->
1. div
- UI 컴포넌트를 묶는 역할. 여러 개의 UI 컴포넌트를 하나의 단위로 다루기 위함.
- block 형식. 라인 전체를 점유한다.
<!--[if !supportEmptyParas]--> <!--[endif]-->
HTML에서 쓰지 말아야 할 태그
<b>, <i>, <center> 의미를 나타내지 않고 모양을 나타내는 것.
*float
속성: left, right, none, inherit
순서가 아래와 같이 있다면 1번이 빠지고 뒤에 있던 숫자들이 앞으로오고 1번은 우측이나 좌측으로 빠져서 같이 있다.
<!--[if !supportEmptyParas]--> <!--[endif]-->
① ②, ①
② ③
③ - > ④
④ ⑤
⑤
<!--[if !supportEmptyParas]--> <!--[endif]-->
footer에서 주로 사용되는 것은 clear이다.
footer는 하단에 copyright를 쓰이는데에 사용된다.
2. span
- 콘텐츠의 일부를 논리적으로 구분하기 위함.
- inline 형식.
<ul>
<li><span class="cd">Buddha Bar</span>,
<span class="artist">Claude Challe</span></li>
<!--[if !supportEmptyParas]--> <!--[endif]-->
<li><span class="cd">When It Falls</span>,
<span class="artist">Zero7</span></li>
<!--[if !supportEmptyParas]--> <!--[endif]-->
<li><span class="cd">Earth 7</span>,
<span class="artist">L.T.J. Bukem</span></li>
<!--[if !supportEmptyParas]--> <!--[endif]-->
<li><span class="cd">Le Roi Est Mort, Vive Le Roi!</span>,
<span class="artist">Enigma</span></li>
<!--[if !supportEmptyParas]--> <!--[endif]-->
<li><span class="cd">Music for Airports</span>,
<span class="artist">Brian Eno</span></li>
</ul>
<!--[if !supportEmptyParas]--> <!--[endif]-->
body {
background-color: #b5a789
font-family: Georgia, "Times New Roman", Times, serif /* 글씨체중에 띄어쓰기가 있는 글씨체는 “ ” 안에 넣어준다.
font-size:10pt
/* margin: 0px 0px 0px 0px; */
/* margin: 0 0 0 0; */
/* 첫번째(위/아래) 두번째(좌/우) */
/* margin: 0px 0px; */
margin: 0px /* 상/하/좌/우 */
}
.beanheading img {
position: relative /* 출력 순서를 지키며 상/하/좌/우 이동 */
left: 120px
}
기존 방식은 16진수 6자리를 이용하여 두자리씩 #00/00/00 나누어 표기하는 방식을 사용했었는데, CSS3에서는 rgba(R,G,B,A) 형식의 10진수(0~255)를 통한 RGB표현 그리고 A(투명도)를 표시하거나 HSLA(색상각도,채도,명도,투명도)로 표기할 수 있다.
| 안드로이드 nfc 사이트 (0) | 2013.07.18 |
|---|---|
| AOP(Aspect-oriented programming) (0) | 2013.07.12 |
| nodejs (0) | 2013.07.11 |
| 박스 모델 (0) | 2013.06.25 |
| 폰트와 색으로 장식하기 (0) | 2013.06.25 |
CSS 시작하기
HTML의 본연의 목적인 구조화된 문서로써 제 역할을 수행하기 위해 디자인적인 요소는 HTML과 완전히 분리시켜
‘구조화된 HTML을 만들어보자‘ 라는 것이 주된 목적이었다.
거기에 따라 HTML에서 디자인에 관련된 요소들은 전부 사용을 지양할 것을 권고하고 있다.
구조화된 HTML?
그럼 구조화된 HTML이란 무엇인가? 구조화된 HTML은 HTML태그 본연의 용도에 맞게 사용한다는 것으로
예를 들면 최상위 제목을 뜻하는 <h1> 태그는 문서의 제목 수준으로 쓰이며, 본문 내용은 <p> 태그로 사용한다.
이렇게 역할을 나뉘게 되면 디자인적 요소가 대부분 배제되기 때문에 HTML을 알아보기 훨씬 쉽다.
분담 역할
이렇게 역할을 분담하게 되면 디자인에 필요한 부분은 CSS가 전담하기 때문에
웹 디자이너와 웹 개발자간의 협업이 훨씬 용이해진다.
게다가 CSS는 별도의 파일 형태로 다른 문서에서도 동일한 CSS를 호출할 수 있기 때문에
트래픽을 줄이는 효과도 있다.
좀 더 Stylish한 것을 원하나요?
이러한 문제들 때문에 등장한 것이 바로 css (Cascading Style Sheets)입니다.
css는 세밀하게 디자인할 수 있는 명령어 집단이라고 생각하시면 됩니다.
css는 실제로 HTML보다 스타일 정보를 명시하는데 있어 훨씬 잘 들어맞는다.
약간의 css를 사용하는 것만으로도, HTML의 스타일에 꽤 큰 효과를 줄 수 있습니다.
또한 여러 페이지들의 스타일을 한 번에 처리하는데 있어서도 css가 훨씬 더 나은 방법이라는 것을 알게 될 것이다.
HTML 구조
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
<title>브라우저 타이틀바 제목</title>
<style type=“text/css”>
/* 태그명으로 찾기 */
h1 {
text-align: center; /* 글자 가운데 정렬 */
color: red; /* 글자 빨간색 */
}
/* 아이디로 찾기 */
#p1 {
border-style: dotted; /* 테두리선 스타일을 도트로 설정 */
border-width: 5px; /* 테두리선 상하 좌우 5px로 설정 */
/* 상 / 우 / 하 / 좌 / 로 시계방향으로 설정 */
border-color: blue; /* 테두리선 색상을 블루로 설정 */
}
/* 클래스(분류)로 찾기 */
.desc {
background-color: yellow; /* 배경색상을 노랑색으로 설정 */
}
/* 동일한 태그와 해당 아이디로 찾기 */
p#intro {
color: rgb(0,255,0); /* 글자색을 RGB로 설정 */
font-family: 궁서; /* 글씨체 궁서체로 설정 */
}
</style>
</head>
<body>
<h1 id=“header1” class=“desc”>이것은 태그명과 클래스로 만들어놓은 style 적용됨.</h1>
<p id=“intro”>이 문장은 p태그와 id 값이 intro이 같아야 스타일 설정이 됩니다.</p>
</body>
</html>
<BONUS> 디자인하는데 필요한 색상 RGB!
R | G | B | |||||||||||||||||||||
0 | 0 | f | f | 0 | 0 | ||||||||||||||||||
0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
<- 1byte -> | <- 1byte -> | <- 1byte -> | |||||||||||||||||||||
0 | 255 | 0 | |||||||||||||||||||||
시맨틱 웹이이란?
들어가기 앞서 시맨틱 웹과 현재 웹의 차이를 알아보자.
시맨틱 웹을 좀 더 알아보자.
- a.k.a. aking -
| 사이트정리 (0) | 2013.07.21 |
|---|---|
| 안드로이드 NFC (0) | 2013.07.19 |
| Java Script (0) | 2013.07.09 |
| (수정중) GIT Server 구축 및 Log4J 설정 (0) | 2013.06.24 |
박스 모델
박스 모델은 좁은 범위로 보면 HTML로 구조화된 콘텐츠를 다른 콘텐츠와 구분하고 조화롭게 배치하기 위한 개념이며, 큰 범위로 보면 모든 HTML 요소가 갖는 블럭 개념입니다.
블럭 레벨 요소 뿐만 아니라, 인라인 레벨 요소 또한 박스 모델을 갖습니다. 다만, 지정할 수 있는 속성이 제한되어 있습니다.
박스 모델의 구성 요소
넓이 : 컨텐츠의 가로 크기
높이 : 컨텐츠의 세로 크기
패딩 : 컨텐츠와 테두리 사이의 간격, 테두리를 경계로 안쪽 여백이라고도 함. 배경이 표시됨
테두리 : 패딩과 마진의 경계
마진 : 인접한 박스와 간격, 테두리를 경계로 바깥 여백이라고도 함.
박스 모델의 크기
가로 크기 : "왼쪽 마진 + 왼쪽 테두리 + 왼쪽 패딩 + 컨텐츠 넓이 + 오른쪽 패딩 + 오른쪽 테두리 + 오른쪽 마진"의 크기를 모두 더한 값이다.
세로 크기 : "위쪽 마진 + 위쪽 테두리 + 위쪽 패딩 + 컨텐츠 높이 + 아래쪽 패딩 + 아래쪽 테두리 + 아래쪽 마진"의 크기를 모두 더한 값이다.
박스모델의 속성
- M I N -
| 안드로이드 nfc 사이트 (0) | 2013.07.18 |
|---|---|
| AOP(Aspect-oriented programming) (0) | 2013.07.12 |
| nodejs (0) | 2013.07.11 |
| css & selector & 상속 (0) | 2013.06.26 |
| 폰트와 색으로 장식하기 (0) | 2013.06.25 |
폰트와 색으로 장식하기
- 대부분의 컴퓨터에서는 특정한 폰트들만이 설치되며, 따라서 사용할 폰트를 선택하는데 있어서 신중해질 필요가 있다.
폰트 패밀리(font family)란?
일반적인 특성을 공유하는 폰트의 집합체를 담고 있으며, 산세리프(snas-serif), 세리프(serif). 모노스페이스(monospace), 흘림체(cursive) 그리고 판타지(tantasy)의 총 5개가 존재한다.
※ 폰트들은 컴퓨터에 따라서 다르게 보일 수 있다. 사실 사용 가능한 폰트들의 집합은 컴퓨터에 실치 된 폰트와 어플리케이션뿐만 아니라 운영체제에 따라 바뀔 수 있다. 따라서 컴퓨터에 있는 폰트들은 사용자들의 컴퓨터에서 사용 가능한 폰트들과 다를 수 있다는 점을 기억해야한다.
css는 font-family, font-weight, font-size, font-style 같은 속성들을 포함하여 폰트가 보이는 모습을 제어한다.
font-size 속성을 사용하여 폰트의 크기를 제어 할 수 있다.
px, em, %혹은 키워드로 명시 한다.
폰트 크기를 픽셀로 명시하는 것은 문자의 높이를 구성하는데 얼마나 많은 픽셀이 사용되는지 브라우저에가 말해주는 것이며,
키워드를 사용하는 것은 body 규칙에 있는 기본 폰트 크기로 설정하는 것이다. 따라서 사용자들이 텍스트를 좀더 크게 혹은 작게 만들기를 원한다면 모든 브라우저에서 폰트 크기를 조절이 가능하다.
예) body { font – size: 14px; }
body {
/* font-family: 폰트, 폰트, 폰투, 폰트패밀리;
1. Serif(명조체) : times, 궁서체, 바탕체
2. Sans-serif(고딕체) : Arial, 굴림체, 돋움체, 맑은고딕
3. Monospace : Courier, Monaco
4. Cursive(흘림체) : Comic Sans
5. Fantasy : impact
*/
font-family: Verdana, Geneva, Arial, sans-serif;
/* font-size : 폰트의 높이
1. px : 픽셀
2. % : 기존의 크기를 기준으로 설정
3. em : 배수, 기존의 크기를 기준으로 설정
4. 상수 : xx-small ~ xx-large
=> body에서 폰트의 기본 크기 값을 설정한다. 가능하면 상수값으로 설정한다.
=> body의 기본 값을 기준으로 나머지 엘리먼트들은 % 또는 em으로 설정한다.
*/
font-size: small;
color: blue;
background-color: gray;
}
h1 {
font-size: 170%;
}
h2 {
font-size: 1.3em;
}
#p1{
color: red;
border: 1px solid green;
}
/* italic : 폰트에서 제공하는 기움림체 사용
oblique : 폰트에서 기움림채가 없더라도 소프트웨어적으로 처리. 폰트가 미려하지 않다. 계단현상 발생
*/
blockquote {
font-family: Didot;
font-style: italic;
}
color 속성을 사용하여 텍스트에 색을 추가한다.
css는 검정색, 흰색, 빨강, 파랑, 녹색을 포함한 17가지의 미리 정의도니 색을 가지고 있다.
색의 비율이나 0에서 255까지의 숫자 값, 혹은 hex 코드를 사용하여 사용자가 원하는 색을 명시 할 수 있다.
예) body { font-weigth: bold; }
/* color (빛의 삼원색 사용 Red, Green, Blue) R B G
1. rgb(255,255,255)
2. rgb(20%, 30%, 100%)
3. #ffffff
4. #ffffffff (투명도 포함)
*/
h1, h2 {
font-weight: normal;
color: #ff0000;
border-bottom: thin dotted #888888;
background-color: rgba(255,255,255,0.5); a는 투명도이다. 0~1사이로 소수점으로 지정할 수 있다.
}
text-decoration 속성을 사용하여 텍스트에 더 많은 스타일을 추가 한다
밑줄이나 윗줄, 가운데 줄과 일부 브라우저에서 동작하는 깜박거리는 텍스트 같은 텍스트에 장식적인 효과를 추가하는 역할을 한다.
예) body { text-decoration: underline; }
예) em { text-decoration: line-through; }
예) em { text-decoration: underline overline; }
원하지 않는 텍스트 데코레이션을 상속받았다면 속성값을 none으로 해서 장식을 하지 않을 수 있다.
예) em { text-decoration: none; }
- M I N -
| 안드로이드 nfc 사이트 (0) | 2013.07.18 |
|---|---|
| AOP(Aspect-oriented programming) (0) | 2013.07.12 |
| nodejs (0) | 2013.07.11 |
| css & selector & 상속 (0) | 2013.06.26 |
| 박스 모델 (0) | 2013.06.25 |
Number클래스.ppt
RECENT COMMENT