.removeClass() .removeClass()로 선택한 요소에서 클래스 값을 제거할 수 있습니다. 문법 .removeClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).removeClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 제거할 수 있습니다. $( 'h1' ).removeClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 제거되는 것이므로, 제거되기 전의 […]
.addClass() .addClass()로 선택한 요소에 클래스 값을 추가할 수 있습니다. 문법 .addClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).addClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 추가할 수 있습니다. $( 'h1' ).addClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 추가되는 것이므로, 추가되기 전의 […]
.addBack() .addBack()은 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하게 합니다. 문법 .addBack( [selector ] ) 예를 들어 $( 'ul' ).find( 'li' ).addBack() 은 ul의 하위 요소 중 li를 선택하고, 추가적으로 처음 선택했던 ul을 선택합니다. 예제 div 요소 안에서 클래스 값이 ip인 p 요소를 찾아 선택을 하고, 추가로 div 요소도 […]
.add() .add()는 어떤 요소를 추가로 선택할 때 사용합니다. 문법 .add( selector ) 예를 들어 $( 'ul' ).add( 'p' ) 는 ul 요소를 선택하고, 추가로 p 요소를 선택합니다. 예제 1 li 요소를 선택하고, 추가로 p 요소를 선택한 후 색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> […]
문법 다음은 가장 간단한 CSS 코드입니다. h1 { color: red } h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값이라고 합니다. 선택자(selector) : 무엇을 꾸밀지 정합니다. h1은 h1 요소를 꾸미겠다는 뜻입니다. 속성(property) : 어떤 모양을 꾸밀지 정합니다. color는 색을 꾸미겠다는 뜻입니다. 값(value) : 어떻게 꾸밀지 정합니다. red는 빨간색으로 […]
.length .length는 선택한 요소의 개수를 반환하는 속성입니다. 예를 들어 $( 'div' ).length 는 div 요소의 개수입니다. 예제 버튼을 클릭하면 li 요소의 개수를 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.11.0.js"></script> <script> $( document ).ready( function() { $( 'button' ).click( function() { var n = $( 'li' ).length; $( […]
:nth-child() :nth-child()는 형제 요소 중 an+b번째 요소들을 선택하는 선택자입니다. 문법 $( ':nth-child(an+b)' ) a와 b는 상수, n은 변수입니다. n에는 음이 아닌 정수(0, 1, 2, 3, ···)가 차례대로 대입됩니다. an+b 대신에 even, odd를 사용할 수 있습니다. 예제 $( 'ol li:nth-child(2)' ) ol 요소의 자식 요소인 li의 형제 요소 중에서 두 번째 […]
.prepend() .prepend()는 선택한 요소의 내용의 앞에 콘텐트를 추가합니다. 문법 .prepend( content [, content ] ) 예를 들어 <p>Lorem Ipsum Dolor</p> 가 있을 때 $( 'p' ).prepend( '123 ' ); 라고 하면 <p>123 Lorem Ipsum Dolor</p> 으로 출력됩니다. 예제 1 순서 없는 목록 처음에 Dolor를 추가합니다. <!doctype html> <html lang="ko"> <head> […]
.append() .append()는 선택한 요소의 내용의 끝에 콘텐트를 추가합니다. 문법 .append( content [, content ] ) 예를 들어 <p>Lorem Ipsum Dolor</p> 가 있을 때 $( 'p' ).append( ' 123' ); 라고 하면 <p>Lorem Ipsum Dolor 123</p> 으로 출력됩니다. 예제 1 순서 없는 목록 마지막에 Dolor를 추가합니다. <!doctype html> <html lang="ko"> <head> […]
:odd :odd은 홀수 인덱스 요소를 선택하는 선택자입니다. 문법 $( ':odd' ) 예를 들어 $( 'p:odd' ) 는 홀수 인덱스인 p 요소를 선택합니다. 주의할 점은 인덱스가 0부터 시작한다는 것입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( 'li:odd' ).css( 'color', 'red' […]
:has() :has()는 특정 요소를 포함하는 요소를 선택할 때 사용하는 선택자입니다. 문법 $( ':has(selector)' ) 예를 들어 $( 'p:has(span)' ) 은 span 요소를 가지고 있는 p 요소를 선택합니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( 'li:has( a )' ).css( 'border', […]
:even :even은 짝수 인덱스 요소를 선택하는 선택자입니다. 문법 $( ':even' ) 예를 들어 $( 'p:even' ) 은 짝수 인덱스 문단을 선택합니다. 주의할 점은 첫번째 요소 인덱스가 0부터 시작한다는 것입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $( document ).ready( function() { $( 'li:even' ).css( 'color', […]
:empty :empty는 내용이 없는 빈 요소를 선택하는 선택자입니다. 문법 $( ':empty' ) 예를 들어 $( 'div:empty' ) 는 div 요소 중 내용이 없는 것을 선택합니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> table { width: 100%; } td { border: 1px solid #bcbcbc; padding: 20px; text-align: center; […]
:contains() :contains()는 특정 문자열을 포함한 요소를 선택하는 선택자입니다. 문법 $( ':contains(text)' ) 문자열 포함 여부를 따질 때 대소문자를 구분한다는 점에 주의합니다. 예를 들어 $( 'p:contains("ab")' ) ab 문자열을 포함한 p 요소를 선택합니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.12.4.min.js"></script> <script> $( document ).ready( function() { $( […]
:button :button은 type이 button인 요소를 선택하는 선택자입니다. 문법 $( ':button' ) type이 button인 모든 요소를 선택합니다. $( '.xy:button' ) type이 button이면서 class 값으로 xy를 갖는 요소를 선택합니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( ':button' ).css( 'font-style', 'italic' ); […]
Font Awesome의 아이콘을 ul, li 등의 목록의 마커로 사용할 수 있습니다. 이미지를 사용하는 것보다 코드는 약간 복잡해지지만, 다양한 아이콘을 사용할 수 있고 색이나 크기를 자유롭게 변경할 수 있다는 장점이 있습니다. 아이콘 선택하기 마커로 사용할 아이콘을 선택하고, font-awesome.css 파일에서 선택한 아이콘의 코드를 찾습니다. 예를 들어 화살표 angle-right의 코드는 다음과 같습니다. .fa-angle-right:before { […]
HTML 문서에 연결하는 방법 Font Awesome 5는 Script 또는 CSS로 연결할 수 있고, 각 방법에 대하여 CDN을 이용하거나 다운로드 받은 파일을 이용할 수 있습니다. Script VS CSS Font Awesome에서는 CSS 방식보다 Script 방식을 더 추천하고 있습니다. SVG with JS Modern, easy and powerful with new features and the most backwards […]
HTML 문서에 연결하기 Font Awesome은 CDN을 이용할 수도 있고 다운로드 받아 사용할 수도 있습니다. 간편한 방법은 CDN이지만, 속도가 느리다면 다운로드 받아 사용합니다. CDN 이용하기 HTML 문서의 <head>와 </head> 사이에 다음의 코드를 추가합니다. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 4.7.0은 Font Awesome 버전으로, 숫자를 변경해서 원하는 버전을 사용할 수 있습니다. 다운로드 받아 사용하기 Font […]
if 설명 if로 조건을 만족할 때 실행할 작업을 정할 수 있습니다. 문법 if ( condition ) { statement; } condition이 TRUE이면 statement을 실행하고, FALSE이면 실행하지 않습니다. 중괄호 대신 콜론과 endif를 이용할 수도 있습니다. if ( condition ): statement; endif; 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>Coding Factory</title> <style> p […]
while 문법 while ( condition ) { statement; } condition을 만족할 때까지 중괄호 안에 있는 statement를 실행합니다. 중괄호 대신 콜론(:)과 endwhile을 사용할 수도 있습니다. while ( condition ) : statement; endwhile; 예제 <?php $i = 1; // 초기값 설정 while ( $i < 10 ) { […]
Mixin 정의하기 Mixin은 다음과 같은 형식으로 정의합니다. @mixin mixin-name { // code } 인자를 포함하여 다음과 같이 정의할 수도 있습니다. @mixin mixin-name( $arg1, $arg2, ... ) { // code } Mixin 사용하기 Mixin을 사용할 때는 다음과 같이 합니다. @include mixin-name; 인자가 있는 mixin이라면 다음과 같이 합니다. @include mixin-name( […]
외부 파일을 포함하는 함수 여러 파일에 공통적으로 사용하는 코드는 별도의 파일로 만든 후 각 파일에서 불러오는 것이 좋습니다. 코드의 양이 줄어들고, 수정이 용이하기 때문입니다. 외부 파일을 포함시키는 함수는 네가지가 있습니다. include 같은 파일 여러 번 포함 가능 / 포함할 파일이 없어도 다음 코드 실행 include_once 같은 파일 한 번만 포함 […]
CSS에서 @import로 다른 파일을 연결시킬 수 있습니다. SASS에서도 @import를 사용할 수 있는데, CSS의 @import와는 문법이나 작동 방식이 다릅니다. 문법 @import "path/filename"; 예를 들어 @import "inc/abc.scss"; 는 inc 폴더 안의 abc.scss 파일을 가져옵니다. CSS 파일 가져오기 CSS 파일을 가져오기 하면 CSS의 @import 형식으로 변환됩니다. SCSS @import "inc.css"; CSS @import url(inc.css); SCSS […]
SASS는 조건문을 지원합니다. 큰 규모의 사이트를 만들 때나 여러 사이트 디자인을 동시에 할 때 유용하게 사용할 수 있습니다. 문법 @if condition1 { A } @else if condition2 { B } @else { C } condition1을 만족하면 A를, condition1을 만족하지 않고 condition2를 만족하면 B를, condition1과 condition2를 모두 만족하지 않으면 C를 사용합니다. @else if는 여러 […]
설명 switch는 하나의 변수를 여러 값과 비교할 때 유용한 조건문입니다. 문법 switch ( $var ) { case value1: statement1; break; case value2: statement2; break; ... default: statement3; } $var의 값을 value1과 비교하여 value1과 같으면 statement1을 실행하고 조건문을 벗어납니다. $var의 값이 value1이 아니면 value2와 비교하여 value2와 같으면 statement2를 실행하고 조건문을 벗어납니다. […]
