둘러보기 메뉴
검색
바뀐글
임의글
개인 도구
가입하기
로그인
도움말
도움말
질문게시판
자주 묻는 질문
커뮤니티
실시간 채팅방
가입인사게시판
자유게시판
뉴스게시판
제재안게시판
최근 토론
페미위키
공지사항
개선 요청
바뀐글
임의글
파일 올리기
다면 분류 목록
특수 문서 목록
페미위키:포크 프로젝트/리브레 위키/CSS 문서 원본 보기
이름공간
문서
토론
주시
도구
여기를 가리키는 문서
가리키는 글의 최근 바뀜
문서 정보
위키베이스 항목
행위
보기
읽기
원본 보기
역사 보기
←
페미위키:포크 프로젝트/리브레 위키/CSS
문서 편집 권한이 없습니다. 다음 이유를 확인해주세요.
요청한 명령은 다음 중 하나의 권한을 가진 사용자에게 제한됩니다:
사용자
,
Seeders
.
문서를 고치려면 이메일 인증 절차가 필요합니다.
사용자 환경 설정
에서 이메일 주소를 입력하고 이메일 주소 인증을 해주시기 바랍니다.
문서의 원본을 보거나 복사할 수 있습니다.
CSS는 Cascading Style Sheets의 약자로, [[웹 페이지]]의 각 구성요소의 여백 및 폭/높이, 색상, [[글꼴]] 등의 시각적인 효과를 주는 [[프로그래밍 언어|언어]]다. [[확장자]]로는 <code>.css</code>를 사용한다. == 문법 == CSS는 기본적으로 다음과 같이 생겼다. <syntaxhighlight lang="css"> div.wiki#libre { padding: 10px; color: #663399; } </syntaxhighlight> 여기서 <code>div.wiki#libre</code>는 선택자(Selector)로, 해당 선택자에 맞는 요소에 스타일이 적용된다. 여기선 "div태그 중에 class가 wiki이고, id가 libre인 요소"를 의미한다. 중괄호(<code>{}</code>) 사이에는 속성(attribute) 이름과 값이 연속으로 나오는 데, 여기서 해당 요소에 어떤 속성을 지정하는 지를 표기한다. 최신 CSS(CSS3)에는 미디어 쿼리(Media Query) 및 애니메이션 등의 기능이 추가되어 문법이 다소 복잡해졌다. === 선택자 === 선택자는 CSS에서 "어떤 요소"에 스타일을 적용할 지를 표현하는 요소이다. 위의 예제코드에서 <code>div.wiki#libre</code>에 해당하는 부분이다. CSS에서 쓰는 선택자의 종류는 다음과 같다. ==== 기본 선택자 ==== {| class="wikitable" ! 문법 ! 설명 |- | <code>*</code> | 모든 요소 선택 |- | <code>Element</code> | Element 요소 선택<br /> <small>div, body같은 태그 선택</small> |- | <code>#ID</code> | 특정 ID를 가진 요소 선택 |- | <code>.Class</code> | 특정 클래스를 가진 요소 선택 |} <code>*</code> 모든 요소를 선택한다. 함부로 사용하면 웹 페이지의 로딩 속도를 느리게 할 수 있으므로 꼭 필요할 때 사용한다. <code>Element</code> div, body, span 같은 HTML 태그를 직접 선택한다. 지정하지 않고 아래의 선택자만 사용하면 모든 태그에 해당한다. <code>.Class</code> Class는 한 페이지당 여러 개의 요소를 선택할 수 있다. <code>#ID</code> ID는 HTML문서 한 곳에만 지정 할 수 있다. class와 달리 한 페이지의 한 요소에만 스타일 지정을 할 수 있다. class처럼 HTML페이지에 같은 ID 여러 개를 쓰면 맨 처음의 ID만 스타일 적용이 되고 그 다음은 무시되니 그 때는 class를 쓰자. ==== 속성 선택자 ==== 요소의 속성값은 <code><a href="#libre" target="_blank"></code>같은 태그가 주어줬을 때, <code>href</code>나 <code>target</code>같은 부분을 뜻한다. 단, <code>id</code>나 <code>class</code>는 (위에 나와있듯이) 따로 문법이 있다. {| class="wikitable" ! 문법 ! 설명 |- | <code>[속성이름]</code> | 특정 속성을 가진 요소 선택 |- | <code>[속성이름='값']</code> | 특정 속성값이 해당 값과 일치하는 요소 선택 |- | <code>[속성이름^='값']</code> | 특정 속성값이 해당 값으로 시작하는 요소 선택 |- | <code>[속성이름$='값']</code> | 특정 속성값이 해당 값으로 끝나는 요소 선택 |- | <code>[속성이름*='값']</code> | 특정 속성값에 해당 값이 들어 있는 요소 선택 |- | <code>[속성이름~='값']</code> | (여러 단어가 띄어쓰기로 구분된) 특정 속성값에 해당 값이 들어 있는 요소 선택 |- | <code><nowiki>[속성이름|='값']</nowiki></code> | 특정 속성값이 해당 값과 일치하거나 해당 값 + 하이픈(-)으로 시작하는 요소 선택 |} ==== 조합 선택자 ==== 두 가지 이상의 선택자를 조합한다. 주로 특정 요소 다음에 오는 요소나, 자식 요소를 선택하는 데 쓴다. {| class="wikitable" ! 문법 ! 설명 |- | <code>선택자1, 선택자2</code> | 선택자1 또는 선택자2 선택 |- | <code>선택자1선택자2</code> | 선택자1과 선택자2를 동시에 만족하는 요소 선택 |- | <code>선택자1 선택자2</code> | 선택자1의 자식 요소 중 선택자2 요소 선택 |- | <code>선택자1 > 선택자2</code> | 선택자1의 바로 밑에 있는 자식 요소 중 선택자2 요소 선택 |- | <code>선택자1 + 선택자2</code> | 선택자1 바로 다음에 오는 선택자2 요소 선택 |- | <code>선택자1 ~ 선택자2</code> | 선택자1 다음에 오는 모든 선택자2 요소 선택 |} ==== 특수 선택자 ==== ===== 가상 클래스 선택자 ===== === 속성 정의 === 선택자로 선택한 요소를 "어떻게 보일지"를 정의하는 부분이다. 문법은 <code>속성: 값;</code>의 연속으로 구성되어 있다. ==== 단위 ==== CSS의 값에는 뒤에 단위가 붙는 경우가 있다. CSS에서 사용할 수 있는 단위는 다음과 같다. ===== 길이(절대값) ===== {| class="wikitable" ! 단위 ! 이름 ! 길이 |- | <code>cm</code> | 센티미터 | 1cm = 96px / 2.54 |- | <code>mm</code> | 밀리미터 | 1mm = 1cm의 1/10 |- | <code>q</code> | 쿼터-밀리미터 | 1q = 1cm의 1/40 |- | <code>in</code> | 인치 | 1in = 2.54cm = 96px |- | <code>pc</code> | 피카 | 1pc = 1인치의 1/6 |- | <code>pt</code> | 포인트 | 1pt = 1인치의 1/72 |- | <code>px</code> | 픽셀 | 1px = 1인치의 1/96 |} ===== 길이(상대값) ===== {| class="wikitable" ! 단위 ! 길이 |- | <code>%</code> | 부모 요소에서 퍼센트 값 |- | <code>em</code> | 요소의 글자크기 |- | <code>ex</code> | x-높이 (알파벳 x의 글자크기 기준) |- | <code>ch</code> | 0 (숫자 영)의 글자폭 |- | <code>rem</code> | 루트 요소의 글자크기 |- | <code>vw</code> | 뷰포트의 폭 1% |- | <code>vh</code> | 뷰포트의 높이 1% |- | <code>vmin</code> | 뷰포트의 좁은 쪽 1% |- | <code>vmax</code> | 뷰포트의 넓은 쪽 1% |} ===== 기타 ===== * 각도에선 <code>deg</code>(원=360deg),<code>grad</code>(원=400grad),<code>rad</code>(원=2πrad),<code>turn</code>(원=1turn)을 사용한다. * (애니메이션 등에서 쓰이는) 시간의 단위로는 <code>s</code>(초)와 <code>ms</code>(밀리초)가 있다. * 주기를 나타내는 단위로 <code>Hz</code>와 <code>kHz</code>가 있다. ==== 색상 ==== CSS에선 색상을 나타내는 표기법이 여러 가지 있다. * 16진법 표기: <code>#A2CCA3</code>, '#' 이후에 두 글자씩 각각 Red, Green, Blue를 나타낸다. 이 표기법이 가장 자주 쓰인다. 만약 <code>#AABBCC</code> 각각의 RGB 값이 모두 같은 두 글자라면 <code>#ABC</code>와 같이 줄여서 작성 할 수도 있다. * 10진법 RGB 표기: <code>rgb(162, 204, 163)</code>, 세 숫자가 각각 Red, Green, Blue를 나타낸다. * 10진법 % 표기: <code>rgb(64%, 80%, 64%)</code>, 위와 같으나 백분율을 사용해 표기한다. * HSL 표기: <code>hsl(119, 29%, 72%)</code>, 세 숫자가 각각 Hue(색조), Saturation(채도), Lightness(명도)를 나타낸다. * HSV 표기: <code>hsv(119, 21%, 80%)</code>, 세 숫자가 각각 Hue(색조), Saturation(채도), Value(명도)를 나타낸다. HSL과 차이가 있음에 유의할 것. * 색상 이름: <code>lightgreen</code>, 직접 색상의 이름을 넣을 수 있다. 전체 색상 목록은 [http://www.w3.org/TR/css3-color/#svg-color CSS 스펙 문서]를 참고할 것. CSS3엔 알파 값(투명도) 개념이 추가되어서, RGB/HSL/HSV의 4번째 값에 알파 값을 쓸 수 있다. 단, 앞에 소문자 a를 붙여야 하며, 0은 완전 투명, 1은 불투명이다. (예: <code>rgba(162, 204, 163, 0.8)</code>) 16진수 표기법에서는 뒤에 투명도를 두글자로 적으면 된다. (<code>#AABBCCDD</code>의 형식) === 미디어 쿼리(Media query, @media) === CSS3에 새로 추가된 기능으로, 특정 기기나 해상도 등에 따라 다른 효과를 줄 때 사용하며, 반응형 웹 디자인의 핵심 기능 중 하나이다. CSS 내에서 미디어 쿼리를 사용한 문법은 다음과 같다. <syntaxhighlight lang="css"> @media screen and (min-width: 768px) { div.wiki#libre { font-size: 10pt; } } </syntaxhighlight> 또한, <code><link></code>태그로 CSS를 적용할 때에도 <code>media</code>속성에 미디어 쿼리를 다음과 같이 사용할 수 있다. <syntaxhighlight lang="html5"> <link rel="stylesheet" media="screen and (min-width: 768px)" href="stylesheet.css" /> </syntaxhighlight> === 웹 폰트 (@font-face) === CSS3에 새로 추가된 기능으로, 현재 컴퓨터(또는 스마트폰)에 설치되어 있지 않은 글꼴을 내려받아 적용하는 기능이다. 파일 형식으로는 <code>woff2</code>, <code>woff</code>를 주로 쓰며, 구형 브라우저를 위해 <code>ttf</code>, <code>svg</code>, <code>eot</code>도 쓰인다. 웹 폰트는 다음과 같이 사용한다. <syntaxhighlight lang="css"> @font-face { font-family: 'LibreWiki Font'; /* 글꼴의 이름 */ src: url('webfont.eot'); /* IE9 */ src: local('LibreWiki Font'), /* 해당 글꼴이 이미 설치되어 있으면 그걸 사용한다. */ url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6 - IE8 */ url('webfont.woff2') format('woff2'), /* WOFF 2.0 */ url('webfont.woff') format('woff'), /* WOFF 1.0 */ url('webfont.ttf') format('truetype'), /* 트루타입 */ url('webfont.svg#svgFontName') format('svg'); /* 구형 iOS */ } div.wiki#libre { font-family: 'LibreWiki Font', sans-serif; } </syntaxhighlight> == 웹 페이지에 적용 == 작성한 CSS를 [[HTML]] 웹 페이지에 적용하는 방법은 다음과 같이 크게 세 가지가 있다. * 인라인 스타일 : 해당 요소의 style속성에 직접 입력하는 방법. !important를 빼고 중요도가 가장 높은데 인라인 속성에 <code>background:black</code>이 지정되면 내부 스타일에서 지정한 <code>background:white</code>가 무시된다. * 내부 스타일 : CSS를 <code><style></code>태그 안에 넣는 방법. 인라인 스타일 다음으로 중요도가 높다. * 외부 스타일 : 외부 파일로 만들어 <code><link rel="stylesheet" href="(주소)"></code>태그를 적용하는 방법. 중요도가 가장 낮다. 최근에는 HTML의 용량을 줄이기 위해 CSS와 HTML을 분리하는 경향이 많아져 내부 스타일 보다는 외부 스타일을 더 많이 쓴다. == [[전처리기]] == CSS가 가지고 있는 한계를 극복하기 위해 기존 CSS에 없는 문법과 기능(예를 들면, 변수나 산술식, 상속 등)을 추가한 언어를 만들어, 이를 CSS로 출력하는 프로그램을 만들어 쓰는데, 이를 가리켜 CSS 전처리기(Preprocessor)라고 한다. === Sass/SCSS === [http://sass-lang.com/ Sass 공식 홈페이지] Hampton Catlin이 만들었다. 공식 구현체는 [[루비]]로 작성했으나, [[C++]]구현체인 [https://github.com/sass/libsass libsass]가 나오면서 이를 이용해 [[파이썬]]([https://github.com/dahlia/libsass-python libsass-python])이나 [[Node.js]]([https://github.com/sass/node-sass node-sass])등에서도 사용할 수 있다. SCSS는 CSS와 같은 중괄호 문법을, Sass는 파이썬과 같은 들여쓰기 문법을 사용한다. 현재 Bootstrap과 Foundation에서 쓰고 있다. === Less === [http://lesscss.org/ Less 공식 홈페이지] Alexis Sellier가 만들었다. 최초엔 루비로 작성했으나, 이후 [[자바스크립트]]로 대체했다., 서버측(Node.js나 Rhino)뿐만 아니라, 클라이언트측(웹 브라우저)에서 직접 사용할 수 있다. Bootstrap에서 쓰고 있었으나, 버전 4 이후로 Sass로 바꿨다. === Stylus === [https://learnboost.github.io/stylus/ Stylus 공식 홈페이지] 문법을 상당히 간소화 시켜서, 중괄호는 물론, 콜론도 세미콜론도 필요없다. [[Node.js]]에서 돌아간다. == 바깥 고리 == * [https://developer.mozilla.org/en-US/docs/Web/CSS CSS 문서 모음 (MDN)] * [http://www.w3schools.com/css/default.asp W3Schools/CSS] [[분류:인터넷]] [[분류:컴퓨터 언어]]
페미위키:포크 프로젝트/리브레 위키/CSS
문서로 돌아갑니다.
다른 언어