CSS

Choi Soon Sil[편집]

최순실의 이니셜.

Cascading Style Sheet[편집]

주의. 이 문서는 공머생들이 좋아하는 주제 혹은 공머생 그 자체에 대해 다룹니다.
본 문서가 다루는 내용에 지나치게 탐닉할 경우 필연적으로 여성들과 멀어지게 됩니다.
이는 조무위키가 책임지지 않습니다.

Cascading Style Sheet의 약자로 웹에서 빠져도 되지만 빠지면 섭섭한 역할을 담당하고 있다(디자인).

디시위키에서 CSS속성을 쓰려면 html태그에다가 style 속성을 박자. (예:<span style="color:blue">디시위키</span> -> 디시위키)

디키에서 {{#CSS:}} <-이게 안되서 이렇게 써야한다. 어쩔 수가 없다.

ㄴ 이제 지원된다.

리눅스는 웹 말고도 사용자 인터페이스에서 쓰이는 경우가 있는데, 그놈의 그놈 쉘 테마, 시나몬 테마, GTK3 이후 버전의 GTK 테마 등 GTK 인터페이스에 쓰이는 요소들은 CSS로 구성되어 있다. 즉, CSS를 좀 다룰 줄 안다면 기존의 GTK 테마를 본인 입맛에 맞게 색상을 바꿔줄 수 있다.

만든 곳[편집]

W3C

만든 이유[편집]

웹땔깜들이 디자인은 디자이너에게 맡기게하려고 해서 만들어졌다. 또 html 코드가 난잡해져서 만든거다.

당장 디시위키에서 표 코드만 봐도 욕이 절로나온다. 시발 css 좀 빨리 넣으라고 문의만 한 날이 언제냐? 한 5월부터 문의했는데도 10월 말인데도 적용이 안됐다. 아니 좀 이거랑 math 태그좀 써보자

ㄴ ㄹㅇ {{#CSS:}} <-이게 지원되면 animation 이나 transition 속성 써서 고퀄문서를 뽑아낼 수 있는데 진짜 왜 안해주는지 의문이다.

ㄴ 디시위키는 미디어위키로 만들었으니까 디시위키에 문의하지 말고 위키미디어 재단에 문의해라.

ㄴ 이제 지원된다.

ㄴ 몇몇 반달러들이 악용중이다. 반면 반달러들을 막아내는 방패로도 쓰이고 있다. 참 아이러니함

ㄴ 반달충들 때문에 다시 막혔다ㅠㅠ

진짜 좆같은 언어다. 자동완성과 멀티커서를 이빠이 써야될만큼 의미없는 작업량이 많다. 같이 프로젝트하는 대학 동기나 친구들중에 float를 남발하는 사람이 있다면 페니와이즈에게 찾아가자.

CSS 검사 및 코드[편집]

파일:지식이늘었다.gif

이 문서는 유용한 정보가 담긴 문서입니다.
이 문서는 디시위키답지 않게 정말로 유용하거나 자세한 정보를 가득 담고 있습니다. 지식이 늘었다!

브라우저마다 CSS가 약간 다르다. 예로 파폭은 display:ruby 설정이 가능하지만 크롬은 불가능하고, 파폭은 글씨크기를 자유롭게 설정가능하지만 크롬은 글씨크기를 아주 작게 줄일수가없다.

요소 검사

웹사이트에서 CSS검사기를 켜는 방법은 Ctrl+Shift+C or 우클릭-요소검사 클릭하면 열수있다.
검색에서 제외시킬 요소가 너무 많다면 해당 요소들의 상위 요소를 삭제하면 깔끔하게 검색할수있다.
단축키 - 다시실행: Ctrl+Y = Ctrl+Shift+Z
문제가있는 CSS코드를 찾기 어렵다면 전체 코드 중 의심되는 부분을 삭제하여 적용시켜보고 그부분에 문제가 맞다면 다시 복구후 그부분에서 다시 일부분을 삭제해서 적용시키는것을 반복하면 문제가되는 코드를 쉽게 찾을수있다.
화면크기가 줄어들어 문제가 생긴다면 검사기창의 우측상단 삼점을 눌러서 "분리된창"으로 보도록 한다.
커서가 영역을 벗어나거나 일정시간이 지나면 요소검사창에서 지멋데로 사라지는 좆같은 요소(일부 드랍다운창 등)가 있는데 그중 일부는 처음 요소검사 직후 키보드 방향키, Tab키를 이용해 코드를 확인할수 있다.

- 필터 : 정확히 일치하는 단어만 찾는다면 단어 앞뒤에 `를 추가하면 된다. 예: `color`를 필터로 지정시 background-color, border-color등은 표시되지 않는다.

요소와 스타일

Element/Selector(요소/선택자) {Property(스타일 속성):Value(스타일 값)}

요소/선택자 종류

a: HTML Tag요소. / #a: ID요소. / .a: Class요소. / [a]: 속성 요소. / :a: 가상 요소. / *: 전체 요소. a b: 자손(후손) 선택자. / a>b: 자식 선택자. / a~b: 동생 선택자. / a+b: 첫째 동생 선택자. ㄴ조상,부모,형 선택자는 왜 없노??

가상 클래스 (Pseudo-Classes)

a:first-child: a가 형제 중 첫째. / a:last-child: a가 형제 중 막내. / :root: 문서의 최상위 태그(html) 선택?(적용안됨..)

:nth-child(): 처음 순서로 선택.(nth:~번째) / :nth-last-child(): 마지막 순서로 선택. / (1): :first/last-child와 동일. / (n+2): 둘째부터 모두 선택.(n은 0과 양의 정수) / (3n+1): 1부터 3씩 증가하며 선택(1,4,7..)(n이 항상앞에잇어야함. 예:1+3n는 적용불가) / (odd)=(2n+1): 홀수 선택. / (even)=(2n): 짝수 선택.

a:only-child: a의 부모 자식이 하나뿐인 경우 선택. / a:only-of-type: a의 부모 자식들중 a타입이 하나뿐인 경우 선택.(?) / :empty: 내용(공백 포함)+자손이 없는 a요소 선택.

:is(a): a인 요소 선택. (:where와 동일) 가상요소 적용불가. / :is(a,b): a or b인 요소 선택. / :is()가 무작위 요소일 경우(예:a :is) 속성값 안에 하위 요소를 자유롭게 추가할수 있다.(예:a :is(b>c, d e>f))

:not(a): a가 아닌 요소 선택. (적용우선순위 높음) / :not(a,b): a,b가 아닌 요소 선택. (not 갯수가 많을수록 우선순위가 더 높아지므로 이런식으로 하나로 묶는것이 좋다)<ref>우선순위가 높고 짧은것으로 :not(#ii) 추천.</ref>

상태 가상클래스

a:link: 아직 방문 안한 상태의 링크. a[href] 요소에 사용된다. (a[href='#']의 경우 링크가 아니라 '펼치기/숨기기'같은 기능의 버튼으로 :link, :visited 적용불가)

ㄴlink를 안붙여도 방문 안한 상태와 같지만, 사이트의 해당 링크 기본설정이 !important로 설정되 있으면 ":link"를 붙여야 적용됨.

a:visited: 방문한 생태의 링크.

ㄴa를 뺴고 class나 id 등 다른 요소를 대신 적용해도 되지만 해당웹사이트에서 해당요소에 스타일값을 적용시킨 상태인경우 적용안되므로 a를 빼지않는것을 추천.

ㄴ하위요소에 동생(+,~)은 적용 불가능(예: a:visited+b)
:hover: 커서가 머물고 있는 상태. (커서 댈시=커서를 갖다 대고있는 상태)

:active: 버튼 누른 상태. (hover+active 둘다 적용할 경우 hover가 active 앞에있어야 active가 적용됨)

:focus: 입력란을 선택한 상태. input,textarea 등 특정 요소에만 적용됨. / :target: 이건뭐꼬?

가상 요소 (Pseudo-Elements)

가상요소는 맨 뒤에 배치해야 적용된다. 만약 가상요소 뒤에 다른 요소(가상클래스 등)가 붙을경우 적용 안된다.
:before: 앞 공간 선택. / :after: 뒷 공간 선택. / :first-letter: 첫글자 선택. 특정 CSS에만 적용됨.
가상요소는 가상 클래스와 같이 적용 불가능.(예::is(:after))
::marker: 마커 표시. 특정 CSS에만 적용됨. / ::selection: 마우스로 드래그하여 선택한 영역.
※marker, selection는 콜론(:)이 2개여야 적용된다.

속성 선택

[id]: "id"속성을 가진 요소를 선택. 속성 뒤에 ~, |, ^, $, *기호를 붙이면 입력한 속성값(a)과 그 뒤나 앞에 추가로 붙은 속성값(b,c)이 있는 요소를 선택가능해진다.

[id~=a]: a b / [id|=a]: a-b / [id^=a]: a b, a-b, ab / [id$=a]: b a, b-a, ba / [id*=a]: a b, b-a, c a-b, cab..

속성값에 공백과 일부 특수문자 ?/:;.#%(-_제외)가 포함된 경우나 숫자만있거나 첫문자가 숫자인 경우나 아무것도 없는경우 속성값 양옆에 따옴표(')를 붙여야 적용된다. (예: [id='a b'] / [id='a/b'] / [id='a.b'] / [id='1a'] / [id=])

속성값안에 공백이 있다면 반드시 공백을 포함시켜야 적용된다. (예: [style='display: block;'] 여기서 'display:block;' 이런식으로 붙이면 적용안됨)

함수

calc(100% - 1px) = 꽉찬 영역에서 1px만큼 줄임. (-,+ 양옆에 한칸뛰워야 적용됨) (auto 사용불가)

색상

색상 종류 = 검정:000, 흰색:fff, 빨강:f00, 초록:0f0, 파랑:00f, 노랑:ff0, 하늘:5bd-0ff, 보라:a4d~c0f, 핑크:e7a~f9b, 주황:e80~fa0, 연두(라임):af0~cf7, 민트:0fa~9fd, 갈색:b86

※1:17, 2:, 3:, 4:, 5:, 6:, 7:119, 8:, 9:153, a:170, b:187, c:204, d:221, e:238, f:255

{color:}: 글자 색상. / {background:}: 배경 색상(-color)+이미지(-image). / {fill:}: 아이콘+그래프+text글자 등 색상. / {stroke:}: fill과 유사한듯.

{:rgba(0,0,0,.5)}: 반투명한 검정색. (숫자 위치 - 첫번째: 빨강 / - 두번째: 초록 / - 세번째: 파랑 / - 네번째: 투명도(.01~.99)(.01=1%))

{:rgba(255,0,0,.1)} = {:rgba(26,0,0,1)} = {:#1a0000}
{:rgba(255,0,0,.2)} = {:rgba(51,0,0,1)} = {:#300}
{:rgba(255,0,0,.3)} = {:rgba(77,0,0,1)} = {:#4d0000}

{background:0}: 배경 투명화+이미지 제거.

{background-attachment:}: 배경 이미지의 스크롤 여부 정함. scroll:기본값, No:상속+애니.
{opacity:.5}: 투명화. 0=완전투명(=제거), 0.5=반투명, 1=투명화 미적용(초기값), 최소단위=0.01
ㄴ투명화(1보다 낮은 값)가 되면 선택우선순위가 지멋데로 높아져서인지 다른 영역과 겹쳐지거나 해당 요소(이미지)안에 있는 다른 요소(버튼) 선택/클릭이 안되는 등 문제가 생길수있으니 주의.
ㄴ0으로하면 해당 요소 자체가 제거되버리므로 0.01로 설정한다.

필터

{filter:invert(100%); text-shadow:none}: 색상 반전. (글자에 적용시킨경우 글자그림자도 반전되버리므로 그림자 제거필요) 

{filter:brightness(80%)}: 밝기 20% 줄임. 해당 이미지안에 있는 버튼이 사라지는 문제가 생길수있으니 주의.
{filter:blur(5px)}: 흐려짐.

{filter:drop-shadow(0 0 1px rgba(0,0,0,.9))}: 글자 그림자. (text-shadow와 유사함)
{filter:none}/:unset: 우선순위가 낮아지는 현상이 발생하므로 주의.(마치 z-index를 0으로 설정한것같은 효과발생)

글자/문장

{font-size:}: 글자 크기 / {font-weight:}: 글자 두께. (보통:~400, 두꺼움:600~)

{text-decoration:underline}: 밑줄. / line-through: 취소선.

{text-shadow:0 0 3px #000, 0 0 2px #000}: 글자 그림자. 그림자를 좀 더 진하게 하고싶다면 값을 더 추가한다. (연함:1~3개, 진함:5~7개)

{text-overflow:clip}: 표시영역을 초과한 글 끝부분 상태. / clip, :"": 점표시 없음. (-webkit-line-clamp가 있다면 none설정) / ellipsis: 삼점(…/...)으로 표시. / "-": -로 표시. / 적용안되는 경우 display:flex 추가.
{letter-spacing:-1px; word-spacing:-1px}: 글자/단어 사이 간격: -1px만큼 축소.

{-webkit-line-clamp:3; -webkit-box-orient:vertical; white-space:normal; display:-webkit-box}: 문장을 표시할 줄의 갯수: 3줄.

{white-space:nowrap; display:inline}: 글이 내부 공간을 초과해도 글이 짤리거나 건너뛰지않고 외부 공간 우측으로 계속 표시됨.

{line-height:1.3}: 줄 간격. 소수점 한자리 까지 적용됨. 1.1/1.3/1.5/15px/17px/19px(홀수값해야 위아래공간 균형이룸)가 적당하다. 값을 너무 줄이면 복잡해서 보기불편하고 너무 늘리면 스압이 심해진다.
{hyphens:}: 글이 내부 공간을 초과시 아래줄로 이동배치 여부. / auto:함. / none:안함.(우측으로 계속 표시됨)

표시/위치

{display:none}: 표시 안함.(항목 제거) / {display:block ruby}: 표시영역이 아래로 확장되는것을 방지함.(파폭엔 적용되지만 크롬엔 적용불가) / {display:flex; flex-direction:column}: 정해진 크기안에서 하위요소가 빠져나오지않게함.

{overflow:visible}: 초과한 영역 보이기.(기본값) / hidden: 숨기기. / visible을 일부 요소에 적용시 심한 렉을 유발하기도하므로 주의한다. / 페이지 내용이 화면을 초과직전 상태일때 내용을 추가 표시시키는 hover기능이 있으면 커서가 움직일때마다 스크롤바가 나타났다 사라졌다를 자주 반복하면서 화면이 좌우로 흔들거려 보기불편해지므로 이런경우 해당페이지에 html>body{overflow:scroll}코드를 추가한다.

{position:relative}: 정해진 공간 지정, 표시 우선순위가 높아져서 다른 요소에의해 가려지지 않음. (z-index적용가능해짐, {position:absolute}가 있는 하위요소를 정해진 공간안에 넣음)

{position:fixed}: 화면에 고정(페이지 스크롤해도 화면에 항상 보임). / absolute: 원래 위치에 고정(기본값).

{text-align:}: 문장+사진 위치 좌측배치. left / right / center / justify: 양쪽
{float:left} / :right}: 배치 위치: 좌/우
{align-items:}: 가로+세로 위치. end설정시 좌측하단 배치. / {justify-content:}: 가로 위치. ({display:flex} 필요)

{z-index:1}: 표시 우선순위. 값이 높을수록 표시 우선순위가 높아짐. (position설정을 해야 적용가능) / unset: 우선순위 설정 해제.

{column-count:2}: 2열 배치. (열:세로줄)
{list-style:a}: 번호 순서 매기기.(상위 요소) 하위 요소에 ::marker 필요.

표/박스

크기 적용 방향 순서: top, right, bottom, left(상,우,하,좌) / 크기 단위 px: 고정된 크기. / em,rem: 부모 요소의 배율을 조정한 크기.

{padding:}: 내부 공간. / {margin:}: 외부 공간. (위치 변경 가능)
{border:} / {outline:}: 테두리/커서 두께, 모양, 색상.
border-style=테두리모양. solid:선 / dotted:점선 / dashed:파선 / double:이중선
border-radius: 모서리 둥글게 다듬기. (5px추천) (50%=원형)

{box-shadow:}: 박스 그림자. / {box-shadow:rgba(0,155,0,.4) 0 0 15px, rgba(0,99,0,.5) 0 0 4px 1px}: 녹색 그림자. / {box-shadow:#800 0 0 0 1px}: 빨간 테두리. (border의 테두리와 동일한 효과를 볼 수 있고 공간을 차지하지않음)

ㄴ{box-shadow:#900 1px 0 0 0, #090 -1px 0 0 0, #990 0 1px 0 0, #999 0 -1px 0 0}: 우측 빨강, 좌측 초록, 하단 노랑, 상단 흰 테두리.

{display:block; width:100%}: 가로 영역 모두 채움. (메뉴 선택영역이 전체줄로 확장되서 누르기 편리해짐. 다른요소가 섞여있을경우 해당요소에 {position:absolute; margin-left:50px} 추가)

{display:table-cell}: 가로 영역 필요한만큼 채움. (margin 적용불가)

애니메이션

{transform:scale(2) translate(-5px,0)}: 2배확대+상단이동 / scale(2,3): 가로2배,세로3배 확대. / translate(5px): 우측이동. / translate(-5px,9px): 좌측5, 하단9px만큼 이동. / 다른 요소에 가려지지않게 하기위해선 {z-index:99; position:relative}을 같이 적용한다.

{transition:transform .1s ease-in}: transform의 0.1초간 자연스런 움직임 변화. / {transition:all ease-in 2s 0s}: 해당요소 전체 2초 움직임.(?)

linear:동일속도. / ease-in:처음 느림. / ease, ease-out:처음 빠름. / ease-in-out:처음+마지막 느림.

{animation:o2 1s linear infinite}@keyframes o2{50%{opacity:.2}}: 투명도 변화를 통한 깜빡임. / {animation:fi 1s linear infinite}@keyframes fi{50%{filter:invert(100%)}}: - 색상 반전을 통한 깜빡임(Blink). / @keyframes에 "!important"값을 넣으면 작동안됨.

마우스 선택 액션

{user-select:none}: 선택 불가능. / text: 선택 가능.(기본값) / auto: 부모 속성 상속. / all: 문장 전체 선택.(단어 한개만 클릭해도 자동으로 문장 전체가 선택됨) (-moz-user-select = 파폭에 적용?)
{pointer-events:none}: 클릭+hover 작동 불가.(이미지의 경우 우클릭메뉴에 저장항목사라짐) / all: 클릭 작동 가능.(기본값) (a링크,버튼 등 특정요소에만 적용됨)
{cursor:}: 해당 요소에 커서를 대면 바뀌는 커서 모양. / {touch-action:}: 클릭 액션? / {touch-action: manipulation} = 조작?
※initial: 초기값. / inherit: 부모 속성 상속. / revert: 이전 상태로 되돌림. / unset: 설정 안함.(auto랑 거의 같은 기능)

적용할 url주소 (Document) (-moz-document: 파이어폭스에 적용시킬때 앞에 -moz-필요)

@document domain(dcinside.com), url(https://dcinside.com/), url-prefix(https://wiki.dcinside.com/index), regexp('https?://(\w\.)?dcinside\.com/.*')

domain: 도메인. / url: 완전히 일치하는 url. / url-prefix: 앞부분이 일치하는 url. / media-document: video? 이건뭐지?..

regexp : 정규 표현식. 자세한 정보는 해당 문서 참고.CSS 적용 예시[편집]

게시판 = {min-width:400px; max-width:500px; max-height:20px; overflow:hidden; display:-webkit-inline-box}
{max-height:15px; display:block; position:relative; overflow:hidden}

CSS 정보 사이트[편집]

생활코딩 - CSS란? - CSS사전 / preprocessor
TCP School (코딩의시작) - CSS 개요
Coding Factory - CSS 강좌
가리사니 - 프로그래밍 - 검색:CSS
홈짱닷컴
W3Schools - CSS Tutorial (en)
MDN - CSS: Cascading Style Sheets (en)
Drafts CSS (en)
CSS-Tricks (en)

CSS 정보 위키사이트[편집]

나무위키 - CSS - 선택자
한글위키 - CSS
영문위키 - CSS (en)
WikiBooks - Cascading Style Sheets (en)

CSS 적용 프로그램[편집]스타일러스