%% * inline : 항목 또는 요소 전/후로 딱 필요한 만큼만 사용하는 태그 * %%%% * %%%% 이런 성향의 요소를 다른 방식으로 출력하게 만들 수 있다. %%




  



li 요소들을 메뉴처럼 좌->우 방향으로 배열한다:


HTML
CSS
JavaScript
XML


span을 사용해도 줄바꿈이 되도록, display속성을 변경한다.
Nirvana
Record: MTV Unplugged in New York
Year: 1993
Radiohead
Record: OK Computer
Year: 1997

===== z-index ===== [[{}https://www.w3schools.com/cssref/pr_pos_z-index.asp|z-index (w3school)]] ''z-index'' z order를 결정하여 오브젝트간의 가림 상태를 정한다. 사용하기 위해서는 조건이 필요하다. * ''position''으로 위치를 정하거나 * ''position: absolute'', ''position: relative'', ''position: fixed'', ''position: sticky'' * ''display:flex'' 사용된 오브젝트의 자식 오브젝트 * 일반적인 경우라면, ''position: relative'' 사용하고 ''z-index''를 쓰면 될 것 같다. CSS Syntax z-index: auto|initial|inherit| (number); JavaScript syntax object.style.zIndex="-1" ===== Positioning ===== * 구성요소(element)를 배치할 수 있는 기능. * 다른 엘리먼트 뒤에 놓거나 표시할 컨텐츠가 너무 클때 어떻게 보일 것인지 변경 할 수 있다. * 배치는 top/bottom/left/right 를 가리키는 속성(프로퍼티^Properties)이 있고, * 배치명령어에 따라 다르게 동작한다. ==== Static ==== html 엘리먼트의 기본 값. 일반적인 문서 배치 흐름에 따라 자연 배열 된다. (좌->우, 위->아래) top/bottom/left/right 프로퍼티가 적용되지 않는다. ==== Fixed ==== 브라우져 화면을 기준으로 고정된 위치에 위치시킨다.








Some more text
 

Note: IE7 and IE8 supports the fixed value only if a !DOCTYPE is specified.
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text

==== Relative ==== relative 요소는, 엘리먼트가 원래 배치 되어야 할 위치를(Static 타입으로 배치될 위치) 기준으로 배치된다.



  


This is a heading with no position
원래 위치에서 -40px
원래 위치에서 +50px

==== Absolute Positioning ==== 브라우져 화면상의 절대 좌표값으로 배치된다. 브라우져 화면을 기반이 아니라, 최초의 엘리먼트를 기준으로 배치 되는데 그게 %%%% 태그이기 때문에 브라우져 스크린을 기준으로 한다고 봐야 한다.



  


This is a heading with an absolute position
2nd head (h2+.sub)
With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.

==== Overlapping Elements ==== *z-index* 속성을 사용해서, 엘리먼트를 겹치게 보이게 할 수 있다.



  


This is a heading

Because the image has a z-index of -1, it will be placed behind the text.

{{:language:css:css-advanced-positining-1.png|결과}} ===== Floating ===== html 요소^{엘리먼트,element}를 좌우로 이동시키거나, 다른 요소를 둘러 쌓을 수도 있다. 이미지를 배치하는 작업에 자주 사용되며, 레이아웃에 대한 작업을 할 때도 요긴하게 사용된다. [[{}http://www.w3schools.com/css/css_float.asp|원문,css_float]] ==== 어떻게 동작하는가? ==== 엘리먼트는 평행하게 플롯^float하게 되는데, 위/아래 배치는 되지 않는다. float 속성이 정해진 엘리먼트는 가능한 가장 왼쪽, 가장 오른쪽에 배치 된다. * float 속성이 있는 엘리먼트 다음의 엘리먼트는 float-엘리먼트 중심으로 둘러쌓이게 된다. * float 속성이 있는 엘리먼트 이전의 엘리먼트는 영향을 받지 않는다.








In the paragraph below, we have added an image with style float:right. The result is that the image will float to the right in the paragraph.


This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.

결과 {{:language:css:css-advanced-float-1.png}} ==== Floating 엘리먼트를 여럿 배치할때 ==== 화면상에 여유 공간이 있는한 float 정해진 방향으로 배열된다. 아래 코드는, .thumbnail 클래스를 정의하고 이미지 속성에 반영하는데 * 이미지 태그 각각 사이즈를 정해도 변경되지 않고, .thumbnail 크기로만 변경 된다. * float:left 속성 때문에 가능한 왼쪽으로 가려고 배열을 좌->우로 진행된다.








Image Gallery
Try resizing the window to see what happens when the images does not have enough room.

==== float 속성 제거 ==== 한번 float 속성이 반영되면, 다음 엘리먼트들이 그 주위를 둘러 쌓으려고 하는 속성이 있다. 이런 float 속성 효과를 제거하려면 clear 프로퍼티를 사용해서 한번 정리할 수 있다.


.text_line { clear:both; }

예제



  


  Image Gallery
    Try resizing the window to see what happens when the images does not have enough room.
    
    
    
    
  Second row

결과 * Second row 부분에서 float 효과가 사라지고, 엘리먼트 배열이 새롭게 시작되었다. {{:language:css:css-advanced-float-2.png}} ===== Align ===== * block 엘리먼트를 수평으로 어떻게 정렬하는지 알아봅 * h1, p, div 와 같은 태그가 block_{full-width에 줄바꿈 기능이 있는} 엘리먼트를 만든다. * 코드와 결과 화면만 정리. ==== Center Aligning Using the margin Property ==== | {{:language:css:css-advanced-align-1.png}} | ==== Left and Right Aligning Using the position Property ==== | {{:language:css:css-advanced-align-2.png}} | ==== Left and Right Aligning Using the float Property ==== | {{:language:css:css-advanced-align-3.png}} | ===== Navigation Bar ===== ===== Image Gallery ===== ===== Image Opacity ===== ===== Image Sprite ===== ===== Media Types ===== ===== Attribute Selectors ===== class, id 외에도 **"html 엘리먼트" 의 속성**까지 포함한 일부분을 스타일 변경 키워드로 인식해서 사용할 수 있다. ==== Attribute Selector ==== title 이라는 속성을 가진 엘리먼트를 모두 스타일 적용 대상으로 본다. | {{:language:css:css-advanced-attr-selector-1.png}} | ==== Attribute and Value Selector ==== title 속성에 "W3Schools" 라는 값이 들어가 있으면 ( title="W3Schools" ) 모두 적용 대상으로 본다. | {{:language:css:css-advanced-attr-selector-2.png}} | ==== Attribute and Value Selector - 다중 선택 ==== title 속성에 hello가 들어가 있으면 모두 선택 | {{:language:css:css-advanced-attr-selector-3.png}} | lang 속성에 en이 들어가 있으면 모두 선택 | {{:language:css:css-advanced-attr-selector-5.png}} | ==== Styling Forms ==== form 을 스타일링하는데 input 폼에서 type 이 "text"인 것과 "button"인 것에 대해서 스타일을 변경한다. | {{:language:css:css-advanced-attr-selector-6.png}} |

Center-aligned heading

This heading will not be affected

This is a visible heading

This is a hidden heading1

This is a hidden heading2

Nirvana

Radiohead

This is a heading with no position

원래 위치에서 -40px

원래 위치에서 +50px

This is a heading with an absolute position

2nd head (h2+.sub)

This is a heading

Image Gallery

Image Gallery

Second row