coding
-
Sass 사용하기 - 출력스타일과 주석사용하기 / '&' 사용하여 상위 선택자 참조하기SASS (SCSS) 2019. 6. 26. 13:16
1. sass 출력 스타일 : sass는 4가지의 css 출력 스타일을 지원한다. 그 4가지는 1) 중첩(nested, 기본), 2) 확장(expanded), 3) 축약(compact), 4) 압축(compressed) 가 있다. 1) 중첩 (nested) : sass 출력스타일중 기본으로, 중첩된 형식이다. html 구조를 반영하기 위해 규칙마다 들여쓰는 스타일이다. 이런식으로 들여써지기 때문에 스타일 구조를 쉽게 알아 볼 수 있다. 2) 확장(expanded) : 직접 작성한 css 스타일과 유사하다. 기본 중첩 스타일 대신 확장 스타일을 사용하려면 sass 파일을 감시하라는 명령어에 플래그를 추가하면 된다. $ sass --watch --style expanded style.scss:style.cs..
-
Sass 사용하기 - 중첩규칙 , 네임페이스 속성 중첩카테고리 없음 2019. 6. 26. 13:08
1. 중첩 규칙 (Nesting Rules) : SASS를 사용하면 선택자를 서로 다른 선언문에서 게속 반복해서 쓰지않고, 선언문 안에 서로 중첩해 쓸 수 있다. 또한 선택자에서 각 엘리먼트를 반복하지 않고 게층 구조를 나타내는 중첩 방식으로 코드를 간다하게 만든다. 글만 보면 이게 뭔가 싶다. 바로 예제를 보자. 예를 들어서 로고가 있고 옆에 헤더 타이틀이있고 헤더를 기준으로 아래에 줄이있는 그런 화면을 만들어본다고 가정하자. 이런식으로 (아래에도 내용이나 이미지가 있다고 가정하자. 예제를 위해서 영역을 나타내는 모양만 해놓았다.) 다음과 같이 쓸 수 있다. html에서 썼던 계층구조가 그대로 css에도 옮겨진 느낌이다. 만약 이것을 일반 css로 썼다면 다음과 같이 쓸 수 있을 것이다. 확실히 불필요..
-
Sass 사용하기 - 들어가기 전에SASS (SCSS) 2019. 6. 26. 13:02
한 번도 써본적 없는 사람은 있어도 한 번만 써본 사람은 없다는 SASS에 대해서 이제부터 공부하고자한다. 기존 CSS 라면 중복도 많이되고 수정하기도 어려운것을 SASS를 사용하면 짧은 코드로 편하게 쓸 수 있다고한다. 간단히 말해 SASS는 CSS3가 확장된 것이며, SCSS문법은 CSS3의 상위 집합이라고 할 수 있다. SASS 웹사이트에서는 SASS에 대해서 다음과 같이 서술하고있다. SASS는 CSS 상위에 있는 메타언어입니다. 단조로운 CSS에 강력한 힘을 주며, CSS 문서의 스타일을 깔금하고 구조적으로 묘사하는데 사용됩니다. SASS는 보다 간결하고 격식을 갖춘 CSS 문법을 제공하며, 스타일시트를 쉽게 관리할 수 있는 다양한 기능을 구현합니다. 사실 이렇게 봐도 처음볼때 나는 이게 뭔소리..
-
Swift 로 iOS 앱 만들기 - 03 : Auto Layout 과 SnapKitSwift 2019. 6. 26. 12:42
[예제] SnapKit을 이용하여 Label, TextField, Button 을 만들어보자. - 01 01. Auto Layout 과 Snapkit Auto Layout 이란, 기존의 Frame-Based Layout과 다른 View들 간의 관계를 이용하여 View의 위치와 크기를 자동으로 결정하는 Layout System 이다. View간의 관계를 이용하여 해당되는 View의 위치와 크기를 자동으로 결정하는 Layout System으로 관계는 Constraint로 설정이 가능하다. 다양한 사이즈의 해상도가 나오면서 다른 크기의 화면에서도 같은 화면을 똑같이 보여주기 위해서 Auto Layout을 사용한다. Auto Layout을 쉽게 적용할 수 있게 코드를 작성하여 직접 코딩 할 수 있게 하는 라이브..
-
Swift 로 iOS 앱 만들기- 02 : 기본 셋팅Swift 2019. 6. 26. 11:57
Window를 만드는 법 01. 디버그로 window 확인해보기 전 강의까지의 상태에서 런을 한 후 디버깅을 해보면 다음과 같이 빈 화면이 나온다. 디버깅은 상단 패널 중 아래 부분을 나타내는 아이콘을 클릭한 후 Debug View Hierarchy 아이콘을 클릭하면 된다. 그러면 다음과 같이 빈 화면이 나오는 것을 볼 수 있는데, 이것은 우리가 메인 스토리보드를 날리고, 아직 윈도우를 만들어 주지 않았기 때문이다. 02. window 만들기 그럼, 이제 window를 만들어서 저 화면을 채워보자. window를 만들어주기 위해 AppDelegate.swift 파일로 돌아간다. 그리고 다음과 같이 입력한다. 들어가기에 앞서, Swift 문법에 대해서 살짝 보자면, 객체를 만들 때는 () class는 무조..
-
Swift 로 iOS 앱 만들기 - 01 : 기본 셋팅Swift 2019. 6. 25. 17:49
App을 만드는 방법 Storyboard + Code 장점 : 시간 단축 단점 : 유지보수의 어려움, 중복되는 코드를 쓸 때나, 중복되는 부분을 수정할 때 불필요한 동작 반복. Only Code 장점 : 유지보수가 쉬움, 불필요한 동작이 없음. 단점 : 스토리보드에 비해 시간이 오래걸림 Xcode를 사용하여 새로운 product 만들기 1. command + shift + n 새로운 프로젝트 생성 2. Single View App 선택 3. Product 정보 입력 Product Name : 프로젝트의 이름으로 프로젝트 생성 이후 따로 설정하지 않으면 이 값이 앱의 이름으로 사용된다. Organization Identifier : 아래 Bundle Identifier을 생성하는데 사용됨. 주로 회사이름을..