전체 글 (444) 썸네일형 리스트형 [SASS] 5강 SASS의 @import - OSSAM강좌 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/T8Dq_GJ7IPU 1. 사스파일 가져오기 - SASS도 CSS처럼 @import구문을 지원, 다른 SASS파일을 불러온다. - CSS는 @import를 사용할 때마다 HTTP요청을 추가해서 작업하지만 SASS는 CSS로 바로 처리하기 때문에 HTTP호출이 필요하지 않다. 1) 구문 @import 파일명; - TIP : 파일 확장자를 지정할 필요가 없다. SASS에서는 당연히 파일명.scss를 가져온다고 가정하기 때문이다. css파일을 가져오고 싶은 경우는 확장자를 지정하면 된다. 2) 예시 - D드라이브에 [sassTest]폴더에 [test.scss]와 [test.css]를 만들었다고 가정 - [var.scss]도.. [SASS] 4강 SASS의 중첩규칙과 속성 ** 영상으로 보실분은 아래 주소를 클릭해주세요! https://youtu.be/9c59Mhr2Zu0 ** CSS를 풀어서 보기위해 앞으로 스타일은 expanded를 사용 sass --watch scss파일명:css파일명 --style expanded --sourcemap=none ** D드라이브에 [sassTest]폴더에 [test.scss]와 [test.css]를 만들었다고 가정 sass --watch test.scss:test.css --style expanded --sourcemap=none ** 위의 방법들은 [VS CODE]의 [LIVE SASS COMPILER]를 사용하면 위 작업은 하지 않아도 된다. 1. CSS 선택자를 중첩하여 작성 - 태그가 자손 혹은 후손인 경우 { } 코드블록으로 .. [SASS] 3강 SASS의 CSS작성스타일 설정 1. 기본 watch를 써서 CSS로 변환하는 경우 코드 기록 - SASS로 스타일을 변환시 평소 적던 CSS처럼 적혀지지 않아서 코드가 지저분해질 수 있다. - 코드를 추가하여 CSS코드를 깔끔하게 정리해보자 2. SASS의 CSS기록 스타일 변환 코드 sass --watch scss파일명:css파일명 --style 스타일종류 - 종류는 nested, expanded, compact, compressed 이렇게 4가지 방법이 있다. 1) nested - 문법 sass --watch scss파일명:css파일명 --style nested - cmd에서의 코드 sass --watch test.scss:test.css --style nested - test.css 코드 - 기본값과 같이 처리됨 h1 { col.. [SASS] 2강 SASS의 변수 - OSSAM강좌 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://youtu.be/9NttTBCu2P8 ** SASS주석 처리 //CSS로 컴파일되지 않는 주석 /* CSS로 컴파일되는 주석 */ 1. SASS에서의 변수 1) 정의 : 변수는 추후에 재사용할 값을 저장하기 위한 용도로 사용 2) 변수 문법 $변수명: 값; 3) 변수에서 사용가능한 값 - 문자열, 숫자, 색상, 불표현식(booleans), 리스트, null 2. 다양한 변수를 활용 1) cmd에서 사용할 폴더를 선택(여기서는 D드라이브의 [sassTest]폴더 선택) d: cd sassTest [VS CODE]의 [LIVE SASS COMPILER]를 사용하면 위 작업은 하지 않아도 된다. 2) [index.html]에 요소 생성 및 .. [SASS] 1강 SASS소개 및 설치 - OSSAM강좌 1. SASS(Syntactically Awesome StyleSheets)란? 1) 정의 : CSS pre-processor(전처리기)로서 CSS반복을 줄여 시간을 절약할 수 있도록 해주는 CSS언어의 확장언어 2) 장점 : 변수 및 조건문 등의 새로운 문법을 통해 CSS를 구조화하여 작업할 수 있다. 3) 단점 : 코드가 지저분해질 수 있고, 코드가 많아질수록 유지보수가 어렵다. 2. SASS 확장자 및 CSS언어로의 변환이유 1) SASS의 확장자 : 파일명.scss 2) 브라우저 사용여부 : 브라우저에서는 css만 인식하기 때문에 [파일명.scss]를 인식하지 못한다. 따라서 [파일명.scss]를 [파일명.css]로 변환해주는 작업을 해야한다. 매번 바꿔야하는 불편함이 있는 것은 아니고, 프로그램.. [Adobe XD] 15강 그룹에 고정된 패딩설정 1. 그룹에 텍스트 고정패딩설정 - [홈]화면에서 사용자 정의 크기로 300x300짜리 아트보드 생성 - [사각형툴]로 사각형을 드래그 - 크기를 w: 150, h: 60으로 설정 - 모서리를 10으로 둥글게 처리 - 테두리 : 체크해제 - 채우기색을 변경 - 텍스트툴로 텍스트를 작성 - 글자 크기를 30으로 변경 - 글자색도 흰색으로 변경 - 사각형과 글자를 모두 선택하여 그룹으로 설정([ctrl]+[g] - 그러고 나면 옵션패널에 패딩이 설정이 생성된다. - 패딩의 옵션을 on처리 - 패딩설정이 완료 : 패딩을 균등하게 설정 : 패딩의 4방면을 각각 설정 - [Alt]+ 드래그를 눌러 텍스트상자를 한개 더 복제 - 아래 텍스트상자를 더블클릭 눌러 글자를 변경하면 그게 맞게 상자크기가 변경 - 크기가 .. [Adobe XD] 14강 마우스 오버 상태 활용 1. 마우스 오버 상태 만들기 ★ 마우스 오버시 글자색 변경 - [홈]화면에서 사용자 정의 크기로 300x300짜리 아트보드 생성 - 옵션 패널에서 구성요소 옆의 [+]아이콘을 클릭 - 그럼 기본상태로 바뀌면서 구성요소 마스터 내부로 들어가게 된다. - 이때 [+]아이콘을 또 누르면 [마우스 오버상태]창이 뜬다. - [마우스 오버상태]의 구성요소가 생성된다. - 이때 아트보드의 글자를 더블클릭해서 글자색상을 변경 - 다시 구성요소 상태를 기본상태로 변경 - [플레이]버튼을 누르면 프로토타입상태로 마우스를 올리면 색상이 바뀌는 것을 확인할 수 있다. ★ 마우스오버시 이미지크게 처리 - [홈]화면에서 사용자 정의 크기로 300x300짜리 아트보드 생성 - 사각형 도형을 w: 150, H: 115로 제작 - .. [Adobe XD] 13강 반복그리드 활용하기 - [img.zip]파일을 첨부 - 이미지는 모두 pixabay에서 가져온 무료 이미지입니다. https://pixabay.com/ko/ 1. 사각형 반복그리드 처리 ★ 사각형 반복 그리드 처리 - [홈]화면에서 사용자 정의 크기로 300x300짜리 아트보드 생성 - 사각형 도형을 그린 후 옵션패널에서 크기와 위치 설정 - 가로: 80, 세로: 80, X축: 10, Y축 10 - 옵션 패널에서 [반복 그리드]버튼 클릭 - [반복그리드]가 설정되면 오른쪽과 아래쪽에 녹색의 위젯이 생성 - 저 부분은 드래그하면 반복그리드가 설정 - 반복그리드 위젯을 드래그시 여백이 보임 - 여백을 드래그하면 여백도 조정 가능 ★ 반복그리드에 이미지를 한번에 마스크처리 - 제공된 이미지에서 [cat01.jpg]부터 [cat0.. 이전 1 ··· 51 52 53 54 55 56 다음
