조건문 - @if, @else if, @else

Uncategorized SASS

SASS는 조건문을 지원합니다. 큰 규모의 사이트를 만들 때나 여러 사이트 디자인을 동시에 할 때 유용하게 사용할 수 있습니다.

1 문법
2 예제

문법

@if condition1 {
  A
} @else if condition2 {
  B
} @else {
  C
}

condition1을 만족하면 A를, condition1을 만족하지 않고 condition2를 만족하면 B를, condition1과 condition2를 모두 만족하지 않으면 C를 사용합니다. @else if는 여러 번 사용할 수 있습니다.

예제

변수 jb-type의 값에 따라 문단의 색을 다르게 만드는 예제입니다. jb-type의 값이 jb-red이면 빨간색으로, jb-blue이면 파란색으로, jb-red나 jb-blue가 아니면 검정색으로 만듭니다.

$jb-type: jb-blue;
p {
  @if $jb-type == jb-red {
    color: red;
  } @else if $jb-type == jb-blue {
    color: blue;
  } @else {
    color: black;
  }
}

다음처럼 코딩해도 결과는 같습니다.

$jb-type: jb-blue;
@if $jb-type == jb-red {
  p {
    color: red;
  }
} @else if $jb-type == jb-blue {
  p {
    color: blue;
  }
} @else {
  p {
    color: black;
  }
}

JavaScript / Object / Math.floor(), Math.ceil(), Math.round()

Math.floor() Math.floor()는 어떤 수보다 크지 않은 최대의 정수를 반환합니다. 문법 Math.floor( Number ) Number에는 숫자가 들어갑니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; ...

CSS / 상대적인 크기를 정하는 em 단위와 rem 단위의 차이

CSS의 길이 단위 중 em과 rem은 상대적으로 크기를 정합니다. em - 상위 요소 기준 em 단위는 상위 요소 크기의 몇 배인지로 크기를 정합니다. 예를 들어 font-size: 1.5em; 은 글자 크기를 상위 요소 크기의 1.5배로 하겠다는 뜻입니다. 간단한 예제를 만들어보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

HTML / a / 링크(link) 만들기

링크(link)는 <a> 태그로 만든다. 링크의 대상은 웹페이지, 파일, 이메일 등이 될 수 있다. 기본 문법 <a href="xxx">Label</a> href 속성의 값에는 웹페이지, 이미지, 동영상, 파일 등의 주소를 넣는다. 웹페이지로 이동하거나, 동영상 플레이어가 실행되거나, 파일이 다운로드 되는 등 웹브라우저의 설정에 따라 처리된다. <a href="">Label</a>처럼 href 속성에 값이 없으면, 현재 페이지로 이동하는 링크가 만들어진다. 주요 속성 a 태그에 추가할 ...

SQL Server / Query / GO

예를 들어 DB라는 데이터베이스를 만들고, ID라는 열을 갖는 TB라는 테이블을 만든다고 하자. 쿼리로 만드는 경우 다음과 같이 할 수 있는데... CREATE DATABASE DB; USE DB; CREATE TABLE TB ( ID int ); 다음과 같은 에러가 난다. 데이터베이스 'DB'이(가) 없습니다. 이름을 제대로 입력했는지 확인하십시오. 이런 경우 GO를 사용한다. GO를 기준으로 해서 GO 위의 쿼리 실행을 마친 후 ...

Bootstrap 4 / Badge / New, 숫자 등 작은 라벨 만들기

Badge 새 글일 경우 New를 붙이거나, 글 목록에 댓글 개수를 보여주는 것을 보신 적이 있을 겁니다. Bootsrap의 Badge를 이용하면 쉽게 모양을 꾸밀 수 있습니다. 기본 클래스에 'badge badge-primary' 등을 붙이면 배지가 만들어집니다. 글자 크기는 em 단위로 정해져 있어서, 주위 글자 크기에 맞게 조정됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Plugin / 유용한 플러그인 모음

Slider bxSlider slick Uncategorized Smooth Scroll : 한 페이지에 있는 링크 사이를 부드럽게 이동하게 해주는 플러그인 jQuery Actual : 보이지 않는 요소의 크기를 가져오는 플러그인 vTicker : 아래에서 위로 스크롤되는 티커

MariaDB / 샘플 데이터베이스 employees 설치하기

데이터베이스를 다루는 공부를 할 때 데이터가 들어있는 데이터베이스가 있으면 좋다. 데이터베이스를 직접 만드는 방법도 있지만, 공개된 샘플 데이터베이스를 이용하면 편하다. MariaDB라면 test_db를 사용하면 된다. 다음은 MariaDB에 test_db를 설치하는 방법이다. GitHub에 있는 test_db 페이지에 접속한다. Clone or download를 클릭한 다음 다운로드한다. 서버에 업로드한 다음 압축을 푼다. employees.sql가 있는 폴더에서 다음과 같이 명령하여 데이터베이스를 설치한다. mysql -u root ...

MariaDB / DATABASE / 만들기, 삭제하기, 이름 변경하기

데이터베이스 조회 데이터베이스 목록을 조회한다. SHOW DATABASES; 데이터베이스 만들기 test라는 이름의 데이터베이스를 만든다. CREATE DATABASE test; 이미 존재하는 데이터베이스와 같은 이름의 데이터베이스를 만들려고 하면 에러가 난다. 같은 이름의 데이터베이스가 존재하지 않을 때만 만들고 싶다면 IF NOT EXISTS를 추가한다. CREATE DATABASE IF NOT EXISTS test; 마침표 등 특별한 문자를 포함하는 경우에 에러가 난다. 억음 부호로 이름을 감싸면 에러가 나지 않는다. CREATE DATABASE ...

SQL Server / Query / 주석

주석으로 처리하면 해당 문자열은 실행되지 않습니다. 코드에 설명을 달거나 특정 쿼리를 잠시 실행시키고 싶지 않을 때 사용합니다. 주석에는 한 줄 주석과 여러 줄 주석이 있습니다. 한 줄 주석은 --로 만듭니다. -- 뒤에 있는 문자열이 주석이 됩니다. -- Commnet SELECT * FROM myDB; -- Comment 여러 줄 주석을 만들고 싶다면 /*와 */로 감쌉니다. 그 사이에 있는 ...

CSS / font-weight / 글자 굵기 정하는 속성

CODING FACTORY

SASS / 문법 / 조건문 - @if, @else if, @else

문법

예제

Related Posts