YoonStudyNote

이것은 로그인창을 만들때 굉장히 유용하다. panel-heading과 panel-body로 나누어져서 작성이 된다. bootstrapk.com/components/ 콤포넌트 · 부트스트랩 Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. bootstrapk.com 여기서 panel 부분을 찾아서 참고하..

bootstrapk.com/components/ 콤포넌트 · 부트스트랩 Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. bootstrapk.com 이것도 또한 부트스트랩 컴포넌트에 들어가서 확인하면된다. table부분을 찾아서 사용법을 참고하면 될것같다. 제목 작성일 삭제 안녕하세요 2019-03-2..

bootstrapk.com/components/ 콤포넌트 · 부트스트랩 Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. bootstrapk.com 이곳에서 컴포넌트를 어떻게 사용하는지 확인해본다. 일단, 가장 기본인 버튼을 사용하는걸 보겠다. 우선 link태그에서 bootstrap 3.4.1 버전을 ..

한줄은 12개 레이아웃으로 이루어져 있다. 1번 레이아웃 2번 레이아웃 3번 레이아웃 여기서 col-sm-6은 한줄에 6개씩 보이게 하겠다라는 뜻이다. 그래서 한줄에 "2번 레이아웃"까지 나오고 그 다음줄에는 "3번 레이아웃"이 출력되게 된다. col-sm-6에서 sm은 small device라는 뜻을 가지고 있다. md은 medium display라는 뜻을 가지고 있다. 그래서 sm을 사용했을떄 768px 크기보다 줄어들었을때 반응이 일어나는것이다. **한번 생각해보자** 레이아웃이 768px보다 작을때는 1개만 768px 이상에서는 2개 970px 이상에서는 3개가 보이게 만들어보자. 1번 레이아웃 2번 레이아웃 3번 레이아웃

@while @while은 조건이 false로 평가될 때까지 내용을 반복한다. while 문과 유사하게 잘못된 조건으로 인해 컴파일 중 무한 루프에 빠질 수 있다. 코드 길이가 단축된다는 장점이 있지만, 제대로 사용하지 않는다면 권장하지 않는다. @while 조건 { // 반복 내용 } $i: 6; @while $i > 0 { .item-#{$i} { width: 2px * $i; } $i: $i - 2; } .item-6 { width: 12px; } .item-4 { width: 8px; } .item-2 { width: 4px; } 주로 for 나 for-each를 사용하는걸 권장한다.

1. @each @each는 List와 Map 데이터를 반복할 때 사용한다. cf. List는 자바스크립트의 배열과 Map은 자바스크립트의 객체와 유사하다. for in 문과 유사하다. @each $변수 in 데이터 { // 반복 내용 } List 데이터를 반복해 보겠다. // List Data $fruits: (apple, orange, banana, mango); .fruits { @each $fruit in $fruits { li.#{$fruit} { background: url("/images/#{$fruit}.png"); } } } .fruits li.apple { background: url("/images/apple.png"); } .fruits li.orange { background: u..

@for @for는 스타일을 반복적으로 출력한다. Javascript for 문과 유사하다. @for는 through를 사용하는 형식과 to를 사용하는 형식으로 나뉜다. 두 형식은 종료 조건이 해석되는 방식이 다르다. // through // 종료 만큼 반복 @for $변수 from 시작 through 종료 { // 반복 내용 } // to // 종료 직전까지 반복 @for $변수 from 시작 to 종료 { // 반복 내용 } 차이점을 이해하기 위해 다음 예제를 살펴보자. 변수는 관례상 $i를 사용한다. * through와 to의 차이점 // 1부터 3번 반복 @for $i from 1 through 3 { .through:nth-child(#{$i}) { width : 20px * $i } } // ..

1. @if (지시어) @if 지시어는 조건에 따른 분기 처리가 가능하며, if 문(if statements)과 유사하다. 같이 사용할 수 있는 지시어는 @else, if가 있다. 추가 지시어를 사용하면 좀 더 복잡한 조건문을 작성할 수 있다. // @if @if (조건) { /* 조건이 참일 때 구문 */ } // @if @else @if (조건) { /* 조건이 참일 때 구문 */ } @else { /* 조건이 거짓일 때 구문 */ } // @if @else if @if (조건1) { /* 조건1이 참일 때 구문 */ } @else if (조건2) { /* 조건2가 참일 때 구문 */ } @else { /* 모두 거짓일 때 구문 */ } 조건에 ( )는 생략이 가능하기 때문에, ( ) 없이 작성하는 ..

1. 함수 이름 중복 위와 같이 함수는 @include 같은 별도의 지시어 없이 사용하기 때문에 내가 지정한 함수와 내장 함수(Built-in Functions)의 이름이 충돌할 수 있다. 따라서 내가 지정한 함수에는 별도의 접두어를 붙여주는 것이 좋다. 내장 함수란, 응용 프로그램에 내장되어 있으며 최종 사용자가 액세스 할 수 있는 기능이다. 예를 들어, 대부분의 스프레드 시트 응용 프로그램은 행이나 열의 모든 셀을 추가하는 내장 SUM 함수를 지원한다. 예를 들어, 색의 빨강 성분을 가져오는 내장 함수로 이미 red()가 있다. 같은 이름을 사용하여 함수를 정의하면 이름이 충돌하기 때문에 별도의 접두어를 붙여 extract-red() 같은 이름을 만들 수 있다. // 내가 정의한 함수 @functio..

1. 함수(Functions) 자신의 함수를 정의하여 사용할 수 있다. 함수와 Mixins은 거의 유사하지만 반환되는 내용이 다르다. Mixin은 위에서 살펴본 대로 지정한 스타일(Style)을 반환하는 반면, 함수는 보통 연산된(Computed) 특정 값을 @return 지시어를 통해 반환한다. // Mixins @mixin 믹스인이름($매개변수) { 스타일; } // Functions @function 함수이름($매개변수) { @return 값 } 사용하는 방법에도 차이가 있다. Mixin은 @include 지시어를 사용하는 반면, 함수는 함수이름으로 바로 사용한다. 그리고 함수는 시작할때도 "@"을 사용하고 return할때도 "@"을 사용한다 // Mixin @include 믹스인이름(인수); //..