CSS에 해당되는 글 2건

css & selector & 상속

학습정리/by Min

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, 클래스로 나눌수 있다. 하지만 이보다 훨씬더 복잡하고 다양한 선택자가 있다는것을 알아야한다.



선택자(Selector)

선택자는 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

}

 

rgba(R,G,B,A) / hsla(H,S,L,A)

기존 방식은 16진수 6자리를 이용하여 두자리씩 #00/00/00 나누어 표기하는 방식을 사용했었는데, CSS3에서는 rgba(R,G,B,A) 형식의 10진수(0~255)를 통한 RGB표현 그리고 A(투명도)를 표시하거나 HSLA(색상각도,채도,명도,투명도)로 표기할 수 있다.

Source
div{
  padding:10px;
  color: rgba(0,0,0,1);
  color: hsla(180,0%,0%,1);
  background-color: rgba(150,100,80,.5);
  background-color: hsla(220,64%,69%,.5);
}
속성사용방법
color: ①rgba(0,0,0,1);
color: ②hsla(180,0%,0%,1);
background-color: ①rgba(150,100,80,.5);
background-color: ②hsla(220,64%,69%,.5);
같은 기능을 하지만 두 가지 모두 테스트 해보고 차이점을 파악해 보자.
① – (R,G,B,투명도) ② – (색상각도,채도,명도,투명도)
좀 더 디테일하게 적용 할 수 있는 속성들
color:
background-color:

gradient
배경에 그라데이션을 적용 할 수 있고 한가지 색상뿐 아니라 여러 색상표현이 가능하다.
Source
div{
  padding:10px;
  border:solid 5px #66CCFF;
  border-radius: 20px;
  background:-webkit-gradient(linear, 80% 20%, 10% 20%, from(#ACE8E8), to(#E1F7F7));
  background:gradient(linear, 80% 20%, 10% 20%, from(#ACE8E8), to(#E1F7F7));
}
opacity
요소에 투명도 값을 지정하는 속성이며 요소 전체에 효과가 적용된다.
Source
div{
  padding:10px;
  opacity:.5;
  background:#<| class="nu0">777|>;
}
text-shadow
일반 텍스트 컨텐츠에 그림자를 입히는 속성이다.
Source
div{
  text-shadow:4px 4px 4px #aaa;
  font-size:5em;
  font-family: arial;
}
마크업에서 텍스트를 “Clear:both;” 라고 변경하고 진행하면 된다.
View
속성사용방법

text-shadow: ①4px 4px ②4px ③#aaa;
① – 가로,세로 그림자거리 ② – 그림자 blur 크기
③ – 그림자 색상
text-overflow
텍스트 컨텐츠가 넘칠 때 줄여주거나 숨기거나 하는 속성이다.
Source
div{
    padding:10px;
    width:300px;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
    border:5px solid #ccc;
}

css는 엘리먼트가 보여지는 방법을 제어하기 위해 박스 모델을 사용한다. 박스는 콘텐츠 영역과 선택 가능한 패딩, 테두리 그리고 마진으로 구성되어 있으며, 콘텐츠 영역은 엘리먼트의 콘텐츠를 포함한다.

패딩은 콘텐츠 영역 주위에 시각적인 빈 공간을 생성하는데 사용되며, 패딩과 콘텐츠를 둘러싸는 테두리는 콘텐츠를 시작적으로 분리하는 방법을 제공한다.

마진은 테두리와 패딩 그리고 콘텐츠를 둘러싸며, 엘리먼트와 다른 엘리먼트 사이에 빈 공간을 추가한다.
패딩과 테두리, 마진은 모두 선택이 가능하며, 엘리먼트의 배경은 콘텐츠 밑에 보이며, 패딩은 마진 밑에서 보이지 않는다. 패딩과 마진의 크기는 픽셀 혹은 비율로 설정하며, 테두리의 넓이는 픽셀이나 thin, medium, thick 키워드를 사용해서 설정한다.

하나의 그룹으로 엘리먼트에 대한 스타일을 합치기 원할때는 class 속성을 사용하며, 엘리먼트에 유일한 이름을 주기 위해서는 id속성을 사용하며, 유일한 스타일을 제공할 경우에도 id속성을 사용한다. 주어진 id가 있는 페이지에서는 오직 하나의 엘리먼트만 올 수 있다.

하나의 엘리먼트는 오직 하나의 id만 가질 수 있지만, 많은 클래스에 속할 수 있으며, XHTML에서 한개 이상의 스타일 시트를 사용 할 수 있다. 두 개의 스타일 시트가 속성 정의에서 충돌할 경우, XHTML 파일의 가장 마지막에 잇는 스타일 시트가 우선 순위를 가진다.

<div> 엘리먼트들은 논리적인 구간 안으로 서로 연관된 엘리먼트들이 합쳐져 그룹화 되는데 사용 된다. 논리적인 구간을 생성하는 것은 페이지의 주요 콘텐츠 영역과 머리글 그리고 바닥글을 식별하는데 도움을 줄 수 있다.
평이한 스타일을 필요로 하는 엘리먼트들을 함께 묶기 위해 <div> 엘리먼트를 사용하며 스타일링과 명쾌함을 위해 파일에 더 많은 구조를 추가하려면 중첩된<div> 엘리먼트를 사용하고, 그럴 필요가 없다면 추가 하지 않는다.
중첩된 <div>에 있는 border 속성을 사용하여 하나의 엘리먼트 그룹 주위에 테두리를 추가 할수 있다. 
width속성은 엘리먼트의 콘텐츠 영역의 너비를 설정한다. 엘리먼트의 전체 너비는 콘텐츠 영역의 너비와 패딩, 테두리 그리고 추가한 마진의 너비를 합한 너비가 되며, 일단 엘리먼트의 너비를 설정하게 되면 브라우저 윈도우의 전체 너비에 맞추기 위해 확장할 필요가 없다. 

Text-align은 블록 엘리먼트를 위한 속성이며, 블록 엘리먼트에 있는 모든 인라인 엘리먼트를 가운데로 놓는다. 어떤 중첩된 블록 엘리먼트에 의해 서도 상속된다. 다른 엘리먼트 내에 중첩된 엘리먼트를 선택하기 위해 자손 선택자를 사용할수 있으며, 자손 선택자는 div h2 {....} 엘리먼트에 중첩된 모든 <h2>를 선택할수 있다.

<span> 인라인 멜리먼트는 <div> 엘리먼트와 비슷하다. 그것은 연관된 인라인 엘리먼트들과 텍스트를 하나로 묶는데 사용된다. <div>처럼 클래스를 꾸미기 위해 <span>엘리먼트를 클래스(혹은 유일한 id를 가진 <span>엘리먼트)에 추가할수 있다.

블록 엘리먼트들은 엘리먼트들 사이에 라인 브레이크를 넣고 위에서 아래로 흐르며, 드폴트로 각각의 블록 엘리먼트는 브라우저 윈도우의 전체 너비를 점유한다. 인라인 엘리먼트는 하나의 블록 엘리먼트 내부에서 왼쪽 위에서 오른쪽 아래 방향으로 흐르며, 한 줄 이상이 필요하게 되면, 브라우저가 새로운 줄을 생성하고 인라인 엘리먼트를 포함하기 위해 세로 방향으로 블록 엘리먼트를 확장한다.
통상적인 페이지 흐름에 있는 두 개의 블록 엘리먼트에 근접해 있는 top과 bottom 마진은 둘 중 더 큰 마진의 크기로 합쳐지거나 같은 크기를 가진다면 한쪽 마진의 크기로 합쳐진다.
떠다니는 엘리먼트들은 보통의 흐름 밖으로 옮겨지며, 왼쪽 혹은 오른쪽에 위치하게 된다. 따다니는 엘리먼트들은 블록 엘리먼트의 맨위에 있으며 그들의 흐름에 영향을 주지 않는다. 인라인 콘텐츠는 떠있는 엘리먼트의 경게를 존중하며, 그것 주위로 흘러간다.
clear 속성은 떠다니는 엘리먼트가 블록 엘리먼트의 왼쪽 혹은 오른쪽에 오지 않도록 명시하는데 사용된다. clear가 설정된 블록 엘리먼트는 그것의 한쪽에서 블록 엘리먼트가 자유로와 질때까지 아래로 내려갈 것이다.

- liquid 레이아웃 : 브라우저 윈도우를 확장할때 페이지를 맞추기 위해 페이지의 콘텐츠를 확장한다.
장점 : 브라우저의 크기가 어떻든 보기에 좋은 모양으로 출력 된다.
단점 : 코딩이 복잡하다. 원하는데로 완력하게 구현하기 어렵다.

- frozen 레이아웃 : 콘텐츠의 너비가 고정되고 브라우저 윈도우의 크기에 따라 확장되거나 축소되지 않는다. 이것은 디자인에 대한 제어권을 좀더 제공한다는 장점이 있으나, 효과적으로 브라우저의 너비를 사용하지 못한다.
장점 : 코딩하기 편하다. 보기 좋게 코딩해 두면 그 모양을 계속 유지할 수 있다.
단점 : 사용자가 한번에 화면을 다 볼수 없어 ㅅ크롤 바를 움직여야 하는 경우가 종종 있다.
화면에 완벽하게 메우기는 어렵고, 또 화면에 완벽하게 메우면 화면을 보기가 너무 불편해서 대부분 800px정도로 토딩하는걸 고려 했을때, 화면의 왼쪽에 딱 붙어서 출력 되기 때문에 화면을 완전히 확장해도 보기에 이상한 화면이 된다.

- jello 레이아웃 : 콘텐츠 너비가 고정되어 있지만 마진은 브라우저 윈도우와 함께 확장되고 축소된다. 보통 페이지의중앙에 콘텐츠를 위치 시키며, 이것은 frozen 레이아웃이 가진 장점과 같지만 더 매력적이다.  
콘텐츠 크기는 고정되어 있되 콘텐츠를 가운데로 정렬하여 약간의 불편함은 있으나 화면이 많이 확장 되어도 보기에 나쁘지 않는 상태를 유지 한다.

position 속성에 설정할 수 있는 값은 static, absolute, fixed, relative의 총 4가지가 있다. 

static 포지셔닝 
 - position 속성의 디폴트 값이며, 페이지의 일반적인 흐름에 엘리먼트를 위치 시킨다.

absolute 포지셔닝
 -  페이지의 어느곳에라도 엘리먼트를 위치 시킬수 있다. 디폴트로 절대 위치를 잡은 멜리먼트들은 페이지의 가장자리에 상대적으로 위치하게 된다. 절대적으로 위치한 엘리먼트들은 z-index 속성을 사용하여 서로의 위로 층층이 높여질 수 있다. 
- 고정된 위치에 있는 엘리먼트들은 항상 페이지가 스크롤 될 때 움직이지 않고 브라우저 윈도우에 상대적으로 위치해 있는다. 페이지에 있는 다른 콘텐츠들은 이러한 엘리먼트 밑으로 스크롤 된다. 
- 상대적으로 위치한 엘리먼트들은 먼저 일반적으로 페이지로 흘러 들어가며, 명시된 양에 의해 상쇄되고 통상적으로 위치해 있는 공간을 비어 있게 남겨 둔다. 
position - fixed
- 일반적으로 absolute 와 같은 성질을 가진다. 다른 점이라면 fixed 는 스크롤을 내려도 브라우저 상에서 위치가 변하지 않고 고정된다.
background-attachment 의 효과와 동일하다

relative 포지셔닝
 - left, right, top, bottom 일반적으로 흐름에 잇는 엘리먼트들의 위치로부터의 상쇄된 양을 참조한다.

float 
- 여러개의 컬럼을 가진 레이아웃을 위한 유연한 해결책을 제공하며, absolute 포지셔닝으로는 할수 없는 엘리먼트를 정리 한다.

- 박스 이동, 정렬(float 속성)

•속성 : float
•값 : left, right, none, inherit
•기본값 : none
•적용대상 : position 속성의 값이 'static' 인 요소(content 속성으로 생성된 내용 제외)

속성 값에 대한 의미는 다음과 같다. 

float: left : 그 요소를 왼쪽으로 float된 블록 박스로 만든다.

float: right : 그 요소를 오른쪽으로 float된 블록 박스로 만든다.

float: none : 그 요소를 float 하지 않는다. 

float 속성을 적용하는 요소는 어떠한 형태로든 폭을 지정해야 하는 규칙이 있다. 

float는 뒤에 이어지는 다른 블록 레벨 요소의 박스에서도 유효하며 float가 헤제되지 않는다.(clear 속성으로 해제 가능) 

- 박스 이동, 정렬 해제(clear 속성)

•속성 : claer
•값 : left, right, none, both, inherit
•기본값 : none
•적용대상 : 블록 레벨 요소

속성 값에 대한 의미는 다음과 같다. 

clear: none : float에 대하여 박스의 위치를 제약하지 않고 float는 계속해서 유효, float는 해제되지 않는다.

clear: left : 왼쪽으로 float된 박스보다 아래에 새로운 박스를 생성하여 표시, 왼쪽 float 해제

clear: right : 오른쪽으로 플로트된 박스보다 아래에 새로운 박스를 생성하여 표시, 오른쪽 float 해제

clear: both : 좌우로 float된 박스보다 아래에 새로운 박스를 생성하여 표시, 좌우 양측 float 해제

clear 속성은 float 된 박스 뒤에 이어지는 박스가 인접하지 않게 배치하는 속성이다. 

- 겹쳐지는 순서(z-index 속성)

•속성 : z-index
•값 : auto, 정수, inherit
•기본값 : auto
•적용대상 : position 속성의 값이 'static' 이외의 요소

속성 값에 대한 의미는 다음과 같다. 

z-index: auto : 그 박스의 겹쳐지는 순서는 부모 요소와 같다. 새로운 순서를 지정하지 않는다.

z-index: 정수 : 그 박스의 겹쳐지는 순서를 명시하며 기준이 되는 '0'이 자동으로 지정된다. 값이 큰 박스가 값이 작은 박스보다 항상 앞에 표시된다. 마이너스 값도 지정이 가능하다. 같은 값의 박스는 XHTML 에서 뒤에 출현하는 요소가 앞에 표시된다.

- M I N -
 


저작자표시

'학습정리 > by Min' 카테고리의 다른 글

안드로이드 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
by 알 수 없는 사용자 2013. 6. 26. 16:42

HTML & CSS

학습정리/by aking

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









시맨틱 웹이이란?

 

들어가기 앞서 시맨틱 웹과 현재 웹의 차이를 알아보자.

 

  • 현재 웹상은 컴퓨터가 해석할 수 없는 시각정보에 대한 메타데이터와 자연어로 기술된 문장으로 가득 차 있다.
  • 예를 들어 <em>원숭이</em> 엉덩이는 <em>빨갛다.</em> 라는 예에 볼 수 있듯 <em> 태그는 단지 원숭이 엉덩이는 빨갛다. 라는 단어를 강조하기 위해 사용된다.
  • 이 HTML을 받아서 처리하는 컴퓨터는 원숭이라는 개념과 빨갛다. 라는 개념이 어떤 관계를 가지는지 해석할 수 없다.
  • 단지 <em> 태그로 둘러싸인 구절을 다르게 표시하여 시각적으로 강조할 뿐이다.
  • 게다가 원숭이 엉덩이는 빨갛다. 라는 것을 서술하는 예의 문장은 자연어로 작성되었으며 기계는 단순한 문자열로 해석하여 화면에 출력한다.

 

  • 시멘틱 웹은 XML에 기반한 시맨틱 마크업 언어를 기반으로 한다.
  • 하지만 XML로 정의한 태그는 사람이 이해하기 어렵지 않으나 기계가 자동적으로 그 의미를 이해하기는 어렵다.
  • 특히 태그 사이의 의미 연관성을 추론하기란 매우 어렵다.
  • 임의로 만든 태그의 사용법은 알 수 있어도 어떤 의미를 담고 있는 태그인지 파악하기는 어려운 것이 XML의 단점인 것이다.
  • 이런 문제를 해결하기 위해 제시된 기술이 있는데 그것이 바로 RDF (Resource Description Framework)이다.
  • RDF는 특정 자원에 대한 메타데이터를 설명하는 XML기반의 프레임워크이다.
  • RDF는 자원, 속성, 속성값을 묶어서 하나의 단위로 취급하는 기술로 정보를 구성하는 자원에 대한 좀 더 세밀한 설명과 관계파악을 쉽게 해준다.
  • 현재 시맨틱 웹의 구조는 RDF와 같은 기술에 크게 의지하고 있다.

 

시맨틱 웹을 좀 더 알아보자.

  • 시맨틱 웹이란 단어를 풀어보자면 ‘의미를 가지는 웹’, 또는 ‘의미론적인 접근’. 좀 더 풀어보자면 ‘뜻을 살린 웹’을 뜻한다.
  • 이는 컴퓨터가 사람을 대신하여 정보를 읽고 이해하고 가공하여 새로운 정보를 만들어 낼 수 있도록 하는 차세대 지능형 웹을 의미한다.
  • 시맨틱 웹의 궁극적인 목적은 웹에 있는 정보를 컴퓨터가 좀 더 이해할 수 있도록 표준 및 기술을 개발하여 의미적 검색, 데이터 통합, 네비게이션, 업무의 자동화 등을 지원하는 것이다.

 

 

 

 

- a.k.a. aking -


 

 

저작자표시

'학습정리 > by aking' 카테고리의 다른 글

사이트정리  (0) 2013.07.21
안드로이드 NFC  (0) 2013.07.19
Java Script  (0) 2013.07.09
(수정중) GIT Server 구축 및 Log4J 설정  (0) 2013.06.24
by 알 수 없는 사용자 2013. 6. 25. 20:50
| 1 |

티스토리툴바