죠노이 노트

[생활코딩][CSS] inline block

개발/[언어] CSS2016. 12. 6. 23:06

같은 줄에 있는 <태그 inline> - 앞 뒤로 줄바꿈이 되지 않는다.

한 라인 전체를 다 사용하는 <태그 block> - 앞 뒤로 줄 바꿈이 된다.

요소는 inline 인데 내부는 block 처럼 표시 <태그 inline-block> - 박스 모양이 inline 처럼 옆으로 늘어섬!


'개발 > [언어] CSS' 카테고리의 다른 글

[생활코딩][CSS] 캐스케이딩 cascading  (0) 2016.12.06
[생활코딩][CSS] 다양한 선택자들 CSS 선택자  (0) 2016.12.05
[생활코딩][CSS] px vs em vs rem  (0) 2016.12.05
[css] 이미지에 색 필터 넣기  (0) 2016.11.13
[css] input text속성  (0) 2016.11.10

[생활코딩][CSS] 캐스케이딩 cascading

개발/[언어] CSS2016. 12. 6. 22:48

3cascading 우선 순위


1. html 소스의 style 속성

2. id selector

3.class selector

4.tag selector


-> 강제로 우선순위 올리는 방법은 {} 안에 !important;를 사용


왜 우선순위를 가지고 있을까?

- 뭐가 더 구체적이고 명시적인가에 따라 우선순위를 가지고 있다.


그냥 보면 이해가 안될 수 있으니 

color:white > color:blue > color:green > color:red 순으로 적용된다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
  <head>
    <style>
      li{color:red;}
      #idsel{color:blue;}
      .classsel{color:green;}
    </style>
  </head>
  <body>
    <ul>
      <li>html</li>
      <li id="idsel" class="classsel" style="color:white;">css</li>
      <li>javascript</li>
    </ul>
    <ol>
      <li>style attribute</li>
      <li>id selector</li>
      <li>class selector</li>
      <li>tag selector</li>
    </ol>
  </body>
</html>
Colored by Color Scripter
cs
 
cs


'개발 > [언어] CSS' 카테고리의 다른 글

[생활코딩][CSS] inline block  (0) 2016.12.06
[생활코딩][CSS] 다양한 선택자들 CSS 선택자  (0) 2016.12.05
[생활코딩][CSS] px vs em vs rem  (0) 2016.12.05
[css] 이미지에 색 필터 넣기  (0) 2016.11.13
[css] input text속성  (0) 2016.11.10

[생활코딩][CSS] 다양한 선택자들 CSS 선택자

개발/[언어] CSS2016. 12. 5. 13:09

게임으로 선택자 공부 : http://flukeout.github.io/


.class {} class 속성

#id {} id 속성

* {} 모든 속성

A, B {} A,B의 속성


A + B {} A옆에 인접한 B가 선택이된다! (옆 하나만됨)

A ~ B {} A옆에 인접한 B가 선택이된다! (옆 마지막까지 선택)


child selector : element의 직계 child만

A > B {} 모든 A 안의 A바로 밑에있는 B만 선택한다.


First ChildA :first-child B {} 모든 A 밑에 있는 첫번째 child B만


Only child pseudo-selector(level 16 of 26)

* :only-child B {} 단독으로 차일드 있는 B만 (차일

드 두개이면 선택 안됨)


last child pseudo-selector(level 17 of 26)

.table>*:last-child {} table 제일 끝에있는 child값만


Nth child selector(level 18 of 26)

A:nth-child(3) {} A 의 3번 째 차일드


Nth Last child selector(level 19 of 26)

:nth-last-child(4) {} 역순으로 4번째 차일드 


First of Type selector(level 20 of 26)

A:first-of-type {}  A가 제일 처음 나오는 타입!


Nth of Type Selector(level 21 of 26)

A:nth-of-type(even) {} A중에서 짝수 번째 타입만 add = 홀 수


Nth of Type Selector with Formula(level 22 of 26)

A:nth-of-type(Bn+C) {} n은 변수가 들어가는데 컴퓨터가 넣어줌 (0, 1, 2, ...)


Only of Type Selector (level 23 of 26)

A:only-of-type {} A타입 중에 자신과 타입이 같은 없이 없는 element를 선택 (자기 자신과 같은 타입 시빌링이 존재 하지 않는것 형제나 자매가 없는 경우)


Last of Type Selector (level 24 of 26)

A:last-of-type {} A타입을 가지고 있는 것중 마지막 타입


empty Selector (level 25 of 26)

A:empty {} A 타입으로 안에 다른것이 아무것도 가지고 있지않는것!


Native Pseudo-class  (level 26 of 26)

:not(#id) {} id를 가지지 않는 모든 엘리멘트 
:not(:first-child) {}  first-child를 제외한 나머지


'개발 > [언어] CSS' 카테고리의 다른 글

[생활코딩][CSS] inline block  (0) 2016.12.06
[생활코딩][CSS] 캐스케이딩 cascading  (0) 2016.12.06
[생활코딩][CSS] px vs em vs rem  (0) 2016.12.05
[css] 이미지에 색 필터 넣기  (0) 2016.11.13
[css] input text속성  (0) 2016.11.10

[생활코딩][CSS] px vs em vs rem

개발/[언어] CSS2016. 12. 5. 11:55

오늘날에는 rem를 쓴다

why? 폰트크기를 조정할 수 있는 사용자의 권리 

사용자가 텍스트 사이즈를 조절할 수 있게 한다는점에서 사용함


px 사용자가 글꼴 크기 키웠을때 커지지 않는다. (rem은 커진다.)



'개발 > [언어] CSS' 카테고리의 다른 글

[생활코딩][CSS] 캐스케이딩 cascading  (0) 2016.12.06
[생활코딩][CSS] 다양한 선택자들 CSS 선택자  (0) 2016.12.05
[css] 이미지에 색 필터 넣기  (0) 2016.11.13
[css] input text속성  (0) 2016.11.10
CSS - Image 겹치기  (0) 2016.10.31

[css] 이미지에 색 필터 넣기

개발/[언어] CSS2016. 11. 13. 13:17

<div class="container-fulid" style="margin-top:50px; position:relative">

      <div style="position:absolute; background-color:rgba(0, 0, 0, 0.65); z-index:10; height:100%; width:100% "></div>

      <img src="b1.jpg" width="100%" alt="배경1" style="position:relative; z-index:1">

    </div>


필터의 부모 클래스에 position : relative 를 사용하고

필터값을 position:absolute; height: 100% ; width 100%해주고 원하는 색상(background-color)과 z-index값을 설정 뒤

이미지 z-index를 필터보다 작게 작아주면된다.

'개발 > [언어] CSS' 카테고리의 다른 글

[생활코딩][CSS] 캐스케이딩 cascading  (0) 2016.12.06
[생활코딩][CSS] 다양한 선택자들 CSS 선택자  (0) 2016.12.05
[생활코딩][CSS] px vs em vs rem  (0) 2016.12.05
[css] input text속성  (0) 2016.11.10
CSS - Image 겹치기  (0) 2016.10.31

[css] input text속성

개발/[언어] CSS2016. 11. 10. 21:52 
width: 100%;  /* 원하는 너비 설정 */ 
  height: auto;  /* 높이값 초기화 */
  line-height : normal;  /* line-height 초기화 */
  padding: .8em .5em; /* 원하는 여백 설정, 상하단 여백으로 높이를 조절 */
  font-family: inherit;  /* 폰트 상속 */
  border: 1px solid #999;
  border-radius: 0;  /* iSO 둥근모서리 제거 */
  outline-style: none;  /* 포커스시 발생하는 효과 제거를 원한다면 */
  -webkit-appearance: none;  /* 브라우저별 기본 스타일링 제거 */
  -moz-appearance: none;
  appearance: none;


'개발 > [언어] CSS' 카테고리의 다른 글

[생활코딩][CSS] 캐스케이딩 cascading  (0) 2016.12.06
[생활코딩][CSS] 다양한 선택자들 CSS 선택자  (0) 2016.12.05
[생활코딩][CSS] px vs em vs rem  (0) 2016.12.05
[css] 이미지에 색 필터 넣기  (0) 2016.11.13
CSS - Image 겹치기  (0) 2016.10.31

CSS - Image 겹치기

개발/[언어] CSS2016. 10. 31. 13:33

이미지를 겹치기 위해서 Style 프로퍼티의 Position을 이해해야 한다. 
position의 default 값은 static이며 이는 해당 document에 그려지는 element 순서대로 위치하게 한다. 
relative는 기본 위치에서 해당 element를 이동시켜준고 td 정렬 기준으로 div 전반부를 사용한다. 
absolute는 가장 가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 조정된다. 

코드의 구조가 td > div > img 로 되있었으므로 다음과 같이 작성하면 해당 td에 들어가는 이미지에 한해서 겹쳐지게 된다.

<td>
  <div style="position: relative;">
    <img style="position: absolute;"/>
  </div>
</td>


absolute 로 지정하면 td 정렬 기준으로 div 왼쪽 영역부터 채워지니 이점 고려해서 left, top, padding 프로퍼티 값을 부여해서 컨트롤 하면 원하는 위치로 img 태그를 놓을 수 있다.

'개발 > [언어] CSS' 카테고리의 다른 글

[생활코딩][CSS] 캐스케이딩 cascading  (0) 2016.12.06
[생활코딩][CSS] 다양한 선택자들 CSS 선택자  (0) 2016.12.05
[생활코딩][CSS] px vs em vs rem  (0) 2016.12.05
[css] 이미지에 색 필터 넣기  (0) 2016.11.13
[css] input text속성  (0) 2016.11.10

티스토리툴바