'STUDY' 카테고리의 글 목록

SCSS Mixin(믹스인); 활용

: 브라우저마다 지원하기 위해 활용 | border-radius @mixin rounded($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } | box-shadow @mixin shadows($x, $y, $blur, $color) { -webkit-box-shadow: $x, $y, $blur, $color; -moz-box-shadow: $x, $y, $blur, $color; box-shadow: $x, $y, $blur, $color; } | linear-gradientx @mixin linear-gradient($from, $to) { //하위 브라우저 background..

STUDY/HTML5 CSS3 2021. 1. 18. 11:00

SCSS Mixin(믹스인); 기본편

| 정의 - 스타일 블록을 정의하고 재사용 - 지시자 @mixin - 참조 시 @include @mixin title(){ margin: 0 0 20px 0; font-size: 20px; font-weight: bold; text-transform: uppercase; } head.main h3{ @include title; color: red; } | 믹스인 인자 - 호출하면서 인자를 전달 가능 - 다중 인자; 쉼표(,)로 구분하여 여러 인자 전달 가능 @mixin size($width, $height) { width: $width; height: $height } div.box{ @include size(120px, 120px); } | 인자에 기본값 정의 - 인자 없이 호출하면 해당하는 인자의 기..

STUDY/HTML5 CSS3 2021. 1. 15. 17:00

SCSS 변수

| 정의 변수 설정은 $ 를 사용하며, CSS규칙과 똑같이 정의한다. $color-txt: #2a2a2a; $color-bg: #f5f5f5; $font-sans: "NanumSquare", Helvetica, Arial, sans-serif; body{ background-color: $color-bg; color: $color-txt; font-family: $font-sans; } | 활용 색상의 darken, lighten를 이용하여 다른 음영 컬러를 만들 수 있다. $color-mint: #00B992; div{ bakcground: darken($color-mint, 30%); } div{ bakcground: lighten($color-mint, 30%); } | 문서 루트 요소에 관한 CS..

STUDY/HTML5 CSS3 2021. 1. 14. 12:00

SCSS 기본 규칙

| 중첩 규칙 선언문 안에 서로 중첩하여 사용 - 계층 구조로 나타낸다. #menu{ ul{ list-style: none; li{ padding: 4px 8px; } } .logo{ margin: 0 auto 0; } } - 공통된 네임속성도 중첩이 가능 font, text, background 등등 font { size: 24px; font-family: 'NanumSquare', sans-serif; weight: bold; } | 부모 선택자 참조 (&) a { color: gray; &:hover { color: blue; border-color: blue; } }

STUDY/HTML5 CSS3 2021. 1. 12. 12:00

SASS/SCSS에 대해..

| CSS전처리기 Sass, LESS, Stylus와 같이 전처리기 언어로 작성된 코드를 CSS로 변환 [.scss] >>> Sass >> [.css] | 예시 색상, 폰트 사이즈를 일괄 바꿔야 한다면, 모두 찾아서 바꿔야 하는 번거로움이 있다. SCSS를 사용한다면, 한곳만 바꾸면 된다. a{ color: red; } li, p { color: red; } $txt-color: blue; a{ color: $txt-color; } li, p { color: $txt-color; } | SASS문법 (.sass / .scss) .sass는 중괄호, 세미콜론이 없고 들여쓰기를 한 문법이다. 아마 파이썬을 접한사람은 더 친숙할 것이다. - SASS $carkred: #8B0000; $font-size: 16..

STUDY/HTML5 CSS3 2021. 1. 11. 12:00

[개인공부] Git

Git 거의 혼자 개발해서 그런지, 버전관리를 따로 안해도 문제가 없었다. (나만의 생각..) 개발이 완료되면, 그 완료된것만 올리는 정도가 다였다. 점점 회사가 커지면서 개발자가 점점 늘어나고 협업하는 일이 생기면서 버전관리 공유의 중요성을 느꼈다. 강의를 찾아보며 나름 정리하면서 작성한 내용입니다. 참고한 사이트는 아래를 참고해주세요. - 생활코딩 (https://opentutorials.org/course/3838) - 유튜브 영욱스튜디오 (https://www.youtube.com/watch?v=JZJQ4_8XoPM) - 유튜브 노마드 코더 (https://www.youtube.com/watch?v=YFNQwo7iTNc) 환경설정 1. git 다운로드 https://git-scm.com/ Git ..

STUDY 2019. 10. 13. 23:29

객체(Object), JON 에서 원하는 값으로 찾기

| .filter() 객체(Object), JON 에서 원하는 값으로 찾기 | 예시 var marvel = [ { "title": "Iron Man 3", "hero": "Iron Man" }, { "title": "Captain America Civil War", "hero": "Captain America" }, { "title": "Thor Ragnarok", "hero": "Thor"}, { "title": "Thor Ragnarok", "villain": "HELA"}, ]; var movie = marvel.filter(function (name) { return name.hero == "Thor" }); console.log(movie); //[{title: "Thor Ragnarok", h..

STUDY/SCRIPT 2019. 6. 13. 14:42