~~Title: CSS 시작 정보~~ ====== 레퍼런스 ====== * 참고 사이트 : [[http://www.w3schools.com/css/]] ====== 구문 형식 ====== {{:css:css-selector.gif}} ====== 주석 ====== /* ~ */ ====== 포함 시키는 방법 ====== **외부 파일을 읽어오는 방식** **html 내부에 선언하는 방식** **인라인 방식**

This is a paragraph.

====== 요소 선택 ====== ===== id 선택 ===== * css에서 id는 '#'으로 시작된다. * html 요소 중에 id 속성을 가진 것(들)을 선택한다. * 한개 또는 하나 뿐인 요소를 선택한다.

Hello World!

This paragraph is not affected by the style.

===== class 선택 ===== * css에서 클래스는 '.'으로 시작된다. * 몇개의 요소를 동시에 선택할때 사용한다. * html 상의 많은 요소에 같은 class를 정의해서 한번에 선택한다.

Center-aligned heading

Center-aligned paragraph.

* 특정 html 요소만을 선택해, 변경할 수도 있다.

This heading will not be affected

This paragraph will be center-aligned.

===== Multiple Style Sheets ===== ==== 중복되었을때의 규칙 ==== * 외부 css 파일에 읽어온다. * html 내부에도 css 를 선언하였다. * 결과 : **외부 css 내용에 내부 css내용이 덮어 쓰여진다.** ==== 예시 ==== - 외부 파일에 선언된 css h3 { color:red; text-align:left; font-size:8pt; } - html 내부에 선언된 css h3 { text-align:right; font-size:20pt; } - 최종 결과물 2번이 1번을 덮어썻다. color:red; text-align:right; font-size:20pt; ==== 중복되는 CSS의 순서 ==== - 브라우져 내장 - 외부 파일로 선언된 css - head 섹션에 추가된 css - 인라인(각 html 태그에 추가된 css) 중복되는 순서를 이해하고 있어야 어느 css가 적용될지 예상할 수 있다. ====== CSS Advanced ====== ===== CSS 그룹핑과 Nesting (중첩) ===== 셀렉터를 한번에 모아서 선택할 수 있다. h1,h2,p { color:green; } 중첩( Nesting ) 셀렉터가 이미 있는 셀렉터에 대해서 스타일 변경이 가능하다. /* (1) p 태그에 대한 스타일 정의 */ p { color:blue; text-align:center; } /* (2) id="marked" 로 ID가 선언된 부분에 대한 셀렉터 */ .marked { background-color:red; } /* (3) p 태그를 사용하면서, "marked"로 아이디가 선언된 항목에 대한 스타일 */ .marked p { color:white; } 샘플 html

This paragraph has blue text, and is center aligned.

This paragraph has not blue text.

p elements inside a "marked" classed element keeps the alignment style, but has a different text color.

===== Dimension ===== 이런 키워드가 있다는 것만 알고 가도 될듯. {{:language:css:css-advanced-dimension-1.png|}} ===== Display, Visibility ===== ==== 요소 감추기 : display:none (or) visibility:hidden ====

This is a visible heading

This is a hidden heading1

h1.hidden 속성은, 보이지 않게만 할뿐 공간은 그대로 차지 한다.

h2.hidden 속성은, 감추기도 하고 공간도 차지 하지 않는다.

==== Block, Inline 요소 ==== * Block : 항목 또는 요소 전/후로 줄바꿈 기능 또는 화면 전체 너비를 사용하는 태그 * %%

%% * %%

%% * %%

%% * inline : 항목 또는 요소 전/후로 딱 필요한 만큼만 사용하는 태그 * %%%% * %%%% 이런 성향의 요소를 다른 방식으로 출력하게 만들 수 있다. %%
  • %% 블럭 엘리먼트를 인라인 엘리먼트처럼 표시한다.

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

    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 와 같은 태그가 blockfull-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}} |