language:css:basic
차이
문서의 선택한 두 판 사이의 차이를 보여줍니다.
양쪽 이전 판이전 판다음 판 | 이전 판 | ||
language:css:basic [2013/06/06 15:33] – [Floating] kieuns | language:css:basic [2024/04/23 22:44] (현재) – 바깥 편집 127.0.0.1 | ||
---|---|---|---|
줄 1: | 줄 1: | ||
+ | ~~Title: CSS 시작 정보~~ | ||
+ | ====== 레퍼런스 ====== | ||
+ | |||
+ | * 참고 사이트 : [[http:// | ||
+ | |||
+ | ====== 구문 형식 ====== | ||
+ | |||
+ | {{: | ||
+ | |||
+ | |||
+ | ====== 주석 ====== | ||
+ | |||
+ | <code css> | ||
+ | /* ~ */ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ====== 포함 시키는 방법 ====== | ||
+ | |||
+ | **외부 파일을 읽어오는 방식** | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | **html 내부에 선언하는 방식** | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | hr { color: | ||
+ | p { margin-left: | ||
+ | body { background-image: | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | **인라인 방식** | ||
+ | |||
+ | <code html> | ||
+ | <p style=" | ||
+ | </ | ||
+ | |||
+ | |||
+ | ====== 요소 선택 ====== | ||
+ | |||
+ | ===== id 선택 ===== | ||
+ | |||
+ | * css에서 id는 '#' | ||
+ | |||
+ | * html 요소 중에 id 속성을 가진 것(들)을 선택한다. | ||
+ | * 한개 또는 하나 뿐인 요소를 선택한다. | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | #para1 { text-align: | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | <p id=" | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ===== class 선택 ===== | ||
+ | |||
+ | * css에서 클래스는 ' | ||
+ | |||
+ | * 몇개의 요소를 동시에 선택할때 사용한다. | ||
+ | * html 상의 많은 요소에 같은 class를 정의해서 한번에 선택한다. | ||
+ | |||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | .center { text-align: | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | <h1 class=" | ||
+ | <p class=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | * 특정 html 요소만을 선택해, 변경할 수도 있다. | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | p.center { text-align: | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | <h1 class=" | ||
+ | <p class=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Multiple Style Sheets ===== | ||
+ | |||
+ | ==== 중복되었을때의 규칙 ==== | ||
+ | |||
+ | * 외부 css 파일에 읽어온다. | ||
+ | * html 내부에도 css 를 선언하였다. | ||
+ | * 결과 : **외부 css 내용에 내부 css내용이 덮어 쓰여진다.** | ||
+ | |||
+ | ==== 예시 ==== | ||
+ | |||
+ | - 외부 파일에 선언된 css <code css> | ||
+ | h3 { | ||
+ | color:red; | ||
+ | text-align: | ||
+ | font-size: | ||
+ | - html 내부에 선언된 css <code css> | ||
+ | h3 { | ||
+ | text-align: | ||
+ | font-size: | ||
+ | - 최종 결과물 2번이 1번을 덮어썻다. <code css> | ||
+ | color:red; | ||
+ | text-align: | ||
+ | font-size: | ||
+ | |||
+ | ==== 중복되는 CSS의 순서 ==== | ||
+ | |||
+ | - 브라우져 내장 | ||
+ | - 외부 파일로 선언된 css | ||
+ | - head 섹션에 추가된 css | ||
+ | - 인라인(각 html 태그에 추가된 css) | ||
+ | |||
+ | 중복되는 순서를 이해하고 있어야 어느 css가 적용될지 예상할 수 있다. | ||
+ | |||
+ | ====== CSS Advanced ====== | ||
+ | ===== CSS 그룹핑과 Nesting (중첩) ===== | ||
+ | |||
+ | 셀렉터를 한번에 모아서 선택할 수 있다. | ||
+ | |||
+ | <code css> | ||
+ | h1,h2,p { | ||
+ | color: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | 중첩( Nesting ) | ||
+ | |||
+ | 셀렉터가 이미 있는 셀렉터에 대해서 스타일 변경이 가능하다. | ||
+ | |||
+ | <code css> | ||
+ | /* (1) p 태그에 대한 스타일 정의 */ | ||
+ | p { | ||
+ | color:blue; text-align: | ||
+ | } | ||
+ | /* (2) id=" | ||
+ | .marked { | ||
+ | background-color: | ||
+ | } | ||
+ | /* (3) p 태그를 사용하면서, | ||
+ | .marked p { | ||
+ | color: | ||
+ | } | ||
+ | </ | ||
+ | 샘플 html | ||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | | ||
+ | <div class=" | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | <p>p elements inside a " | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ===== Dimension ===== | ||
+ | 이런 키워드가 있다는 것만 알고 가도 될듯. | ||
+ | {{: | ||
+ | |||
+ | ===== Display, Visibility ===== | ||
+ | |||
+ | ==== 요소 감추기 : display: | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | h1.hidden {visibility: | ||
+ | h2.hidden {display: | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | <h1 class=" | ||
+ | < | ||
+ | | ||
+ | <h2 class=" | ||
+ | < | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ==== Block, Inline 요소 ==== | ||
+ | |||
+ | * Block : 항목 또는 요소 전/후로 줄바꿈 기능 또는 화면 전체 너비를 사용하는 태그 | ||
+ | * %%< | ||
+ | * %%< | ||
+ | * %%< | ||
+ | * inline : 항목 또는 요소 전/후로 딱 필요한 만큼만 사용하는 태그 | ||
+ | * %%< | ||
+ | * %%< | ||
+ | |||
+ | 이런 성향의 요소를 다른 방식으로 출력하게 만들 수 있다. | ||
+ | |||
+ | %%< | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | li{display: | ||
+ | span{display: | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | |||
+ | <p>li 요소들을 메뉴처럼 좌->우 방향으로 배열한다:</ | ||
+ | <ul> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ul> | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ===== z-index ===== | ||
+ | |||
+ | [[{}https:// | ||
+ | |||
+ | '' | ||
+ | |||
+ | z order를 결정하여 오브젝트간의 가림 상태를 정한다. | ||
+ | |||
+ | 사용하기 위해서는 조건이 필요하다. | ||
+ | |||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | |||
+ | * 일반적인 경우라면, | ||
+ | |||
+ | CSS Syntax | ||
+ | |||
+ | z-index: auto|initial|inherit| (number); | ||
+ | |||
+ | JavaScript syntax | ||
+ | |||
+ | < | ||
+ | |||
+ | ===== Positioning ===== | ||
+ | |||
+ | * 구성요소(element)를 배치할 수 있는 기능. | ||
+ | * 다른 엘리먼트 뒤에 놓거나 표시할 컨텐츠가 너무 클때 어떻게 보일 것인지 변경 할 수 있다. | ||
+ | * 배치는 top/ | ||
+ | * 배치명령어에 따라 다르게 동작한다. | ||
+ | |||
+ | ==== Static ==== | ||
+ | |||
+ | html 엘리먼트의 기본 값. 일반적인 문서 배치 흐름에 따라 자연 배열 된다. (좌-> | ||
+ | |||
+ | top/ | ||
+ | |||
+ | ==== Fixed ==== | ||
+ | |||
+ | 브라우져 화면을 기준으로 고정된 위치에 위치시킨다. | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | p.pos_fixed { | ||
+ | position: | ||
+ | top:60px; right:65px; | ||
+ | background: red; | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | |||
+ | <p class=" | ||
+ | |||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ==== Relative ==== | ||
+ | |||
+ | relative 요소는, 엘리먼트가 원래 배치 되어야 할 위치를(Static 타입으로 배치될 위치) 기준으로 배치된다. | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | h2.pos_left { | ||
+ | position: | ||
+ | left:-40px; | ||
+ | } | ||
+ | h2.pos_right { | ||
+ | position: | ||
+ | left:50px; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | <h2 class=" | ||
+ | <h2 class=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ==== Absolute Positioning ==== | ||
+ | |||
+ | 브라우져 화면상의 절대 좌표값으로 배치된다. 브라우져 화면을 기반이 아니라, 최초의 엘리먼트를 기준으로 배치 되는데 그게 %%< | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | h2 { | ||
+ | position: | ||
+ | left:100px; | ||
+ | top:150px; | ||
+ | } | ||
+ | h2.sub { | ||
+ | position: | ||
+ | left:40px; | ||
+ | top:50px; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | <h2 class=" | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ==== Overlapping Elements ==== | ||
+ | |||
+ | *z-index* 속성을 사용해서, | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | img { | ||
+ | position: | ||
+ | left:0px; top:0px; | ||
+ | z-index:-1; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | <img src=" | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | |||
+ | ===== Floating ===== | ||
+ | |||
+ | html 요소< | ||
+ | |||
+ | 이미지를 배치하는 작업에 자주 사용되며, | ||
+ | |||
+ | [[{}http:// | ||
+ | |||
+ | ==== 어떻게 동작하는가? | ||
+ | |||
+ | 엘리먼트는 평행하게 플롯< | ||
+ | |||
+ | float 속성이 정해진 엘리먼트는 가능한 가장 왼쪽, 가장 오른쪽에 배치 된다. | ||
+ | |||
+ | * float 속성이 있는 엘리먼트 다음의 엘리먼트는 float-엘리먼트 중심으로 둘러쌓이게 된다. | ||
+ | * float 속성이 있는 엘리먼트 이전의 엘리먼트는 영향을 받지 않는다. | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | img { float: | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <p>In the paragraph below, we have added an image with style < | ||
+ | <p> | ||
+ | <img src=" | ||
+ | This is some text. This is some text. This is some text. | ||
+ | This is some text. This is some text. This is some text. | ||
+ | </p> | ||
+ | < | ||
+ | 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.</ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | |||
+ | 결과 | ||
+ | {{: | ||
+ | |||
+ | ==== Floating 엘리먼트를 여럿 배치할때 ==== | ||
+ | |||
+ | 화면상에 여유 공간이 있는한 float 정해진 방향으로 배열된다. | ||
+ | |||
+ | 아래 코드는, .thumbnail 클래스를 정의하고 이미지 속성에 반영하는데 | ||
+ | * 이미지 태그 각각 사이즈를 정해도 변경되지 않고, .thumbnail 크기로만 변경 된다. | ||
+ | * float:left 속성 때문에 가능한 왼쪽으로 가려고 배열을 좌-> | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | .thumbnail | ||
+ | { | ||
+ | float:left; | ||
+ | width: | ||
+ | height: | ||
+ | margin:5px; | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <img class=" | ||
+ | <img class=" | ||
+ | <img class=" | ||
+ | <img class=" | ||
+ | <img class=" | ||
+ | <img class=" | ||
+ | <img class=" | ||
+ | <img class=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ==== float 속성 제거 ==== | ||
+ | |||
+ | 한번 float 속성이 반영되면, | ||
+ | <code css> | ||
+ | .text_line { clear:both; } | ||
+ | </ | ||
+ | 예제 | ||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | .thumbnail { | ||
+ | float:left; | ||
+ | width: | ||
+ | margin:5px; | ||
+ | } | ||
+ | .text_line { | ||
+ | clear:both; margin-bottom: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <img class=" | ||
+ | <img class=" | ||
+ | <img class=" | ||
+ | <img class=" | ||
+ | <h3 class=" | ||
+ | <img class=" | ||
+ | <img class=" | ||
+ | <img class=" | ||
+ | <img class=" | ||
+ | </ | ||
+ | </ | ||
+ | 결과 | ||
+ | * Second row 부분에서 float 효과가 사라지고, | ||
+ | {{: | ||
+ | |||
+ | ===== Align ===== | ||
+ | * block 엘리먼트를 수평으로 어떻게 정렬하는지 알아봅 | ||
+ | * h1, p, div 와 같은 태그가 block< | ||
+ | * 코드와 결과 화면만 정리. | ||
+ | |||
+ | ==== Center Aligning Using the margin Property ==== | ||
+ | | {{: | ||
+ | ==== Left and Right Aligning Using the position Property ==== | ||
+ | | {{: | ||
+ | ==== Left and Right Aligning Using the float Property ==== | ||
+ | | {{: | ||
+ | ===== Navigation Bar ===== | ||
+ | ===== Image Gallery ===== | ||
+ | ===== Image Opacity ===== | ||
+ | ===== Image Sprite ===== | ||
+ | ===== Media Types ===== | ||
+ | ===== Attribute Selectors ===== | ||
+ | |||
+ | class, id 외에도 **" | ||
+ | |||
+ | ==== Attribute Selector ==== | ||
+ | title 이라는 속성을 가진 엘리먼트를 모두 스타일 적용 대상으로 본다. | ||
+ | | {{: | ||
+ | |||
+ | ==== Attribute and Value Selector ==== | ||
+ | title 속성에 " | ||
+ | | {{: | ||
+ | |||
+ | ==== Attribute and Value Selector - 다중 선택 ==== | ||
+ | title 속성에 hello가 들어가 있으면 모두 선택 | ||
+ | | {{: | ||
+ | lang 속성에 en이 들어가 있으면 모두 선택 | ||
+ | | {{: | ||
+ | |||
+ | ==== Styling Forms ==== | ||
+ | form 을 스타일링하는데 input 폼에서 type 이 " | ||
+ | | {{: |