전체 글
-
[100DaysOfCode] 25강Front-end/100DaysOfCode 2022. 8. 18. 22:53
오늘 배운 내용 1️⃣ CSS 변수 2️⃣ 루트, html, * 선택자 비교 3️⃣ css transform, transition 1️⃣ CSS 변수 1. 선언 방법 --변수명: 값; 2. 사용 방법 속성: var(--변수명); ** 디폴트값 선언 가능 var(--변수명, default 값); 3. 예시 --color-grey-100: rgb(236, 236, 236); background-color: var(--color-grey-100); 2️⃣ 루트, html, * 선택자 비교 html html 요소를 선택한다(html 파일의 최상위 루트 요소) CSS 규칙은 html 및 html의 다른 요소에도 상속된다 :root (가상 선택자) 문서의 최상위 루트 요소를 선택한다 최상위 요소 안에 포함된 요소에..
-
[100DaysOfCode] 23강 - 24강Front-end/100DaysOfCode 2022. 8. 17. 23:52
💡 반응형 웹사이트 만들기 미디어 쿼리 미디어쿼리 작성법 @media (min-width or max-width: 1200px) { p { font-size: 2rem; } } max-width Desktop 먼저 작업 후 Mobile 작업 min-width Mobile 먼저 작업 후 Desktop 작업 반응형웹 & 햄버거 메뉴를 만들어보자! HTML 태그 WEBFOOD Browse Meals My Orders Browse Meals My Orders CSS 태그 /* *************************************************************** */ /* ham menu */ .menu-btn { width: 2rem; height: 2rem; display: fle..
-
[Swift] Dice game에 Auto layout 추가하기iOS/project 2022. 8. 15. 19:19
💡 오늘 배울 내용 : Auto layout, constraints, stack view Challenge 1 화면을 돌리면 배경이 짤리는 문제 pin constraints 배경에 pin constraints 속성을 추가해주었다 alignment constraints 주사위 이미지에 alignment constraints 속성을 추가해주었다 화면을 돌려도 짤리지 않는 것을 확인할 수 있다 만약 화면을 돌렸을 때 위의 사진처럼 사이즈가 유지된다면 View - Content Mode를 Aspect Fit에서 Redraw로 변경해주면 된다! Challenge 2 Stack View를 활용해보자 영역을 3개로 나누어서 Constraints를 이용하고자 할 때 Stack View를 사용할 수 있다! Top, Mi..
-
[Swift] 모나드(Monad)iOS/Swift 2022. 8. 15. 15:45
모나드 값을 어딘가에 포장하는 개념에 대한 이해에서 출발한다 함수객체(Functor)와 모나드(Monad)는 특정 기능이 아닌 디자인 패턴 혹은 자료구조라고 할 수 있다 모나드가 갖춰야하는 조건 3가지 타입을 인자로 받는 타입 특정 타입의 값을 포장한 것을 반환하는 함수가 존재 포장된 값을 변환하여 같은 형태로 포장하는 함수가 존재 모나드의 대표적인 예시: 🔥 옵셔널 - 값이 있을지 없을지 모르는 상태를 박스에 담아두는 것 옵셔널은 (1) Wrapped 타입을 인자로 받는 제네릭 타입이다 (2) Optional, init(2) 처럼 다른 타입의 값을 갖는 상태의 컨텍스트를 생성할 수 있다 (3) 옵셔널은 컨테이너와 값을 갖기 때문에 맵 함수를 사용할 수 있다 모나드를 이해하기 위해 필요한 개념 1. 컨텍..
-
[Swift] 맵, 필터, 리듀스(map, filter, reduce)iOS/Swift 2022. 8. 15. 14:57
고차 함수 매개변수로 함수를 갖는 함수이며, 맵, 필터, 리듀스는 고차함수의 일종이다. 맵(map) - 컨테이너 내부의 기존 데이터를 변형해서 새로운 컨테이너를 생성한다(컨테이너에 포장해서 반환) - for-in 반복문과 비슷하게 사용할 수 있지만 성능에서 차이가 존재한다 // MARK: map // 컨테이너 내부의 기존 데이터를 변형해서 새로운 컨테이너 생성(컨테이너에 포장해서 반환) // ex) // 배열 생성 let numbers: [Int] = [0, 1, 2, 3, 4] var doubleNumbers: [Int] var strings: [String] // MARK: for-in 구문 사용 doubleNumbers = [Int]() strings = [String]() for number in..
-
[100DaysOfCode] 21강Front-end/100DaysOfCode 2022. 8. 13. 23:08
💡 이번 모듈 목표: 반응형 웹사이트 만들기 먼저 반응형 웹사이트로 만들어보기 적합한 웹사이트를 퍼블리싱했다! (햄버거 먹고싶다) em? rem? %? 어떤 것을 사용해야 할까? 평소에 사용하던 익숙한 px 외에 다른 단위들을 서로 비교해보자 px % em rem 이해하기 쉽고, 절대적인 값이다 부모 요소에 상대적이다 폰트 사이즈에 상대적이다 root element(HTML, 브라우저)의 폰트 사이즈에 상대적이다 사용자 환경에 구애를 받지 않고, 사이즈가 바뀌지 않는다 폭포처럼 부모- 자식 간의 연속적인 속성 때문에 다루기가 어렵다 폭포처럼 부모- 자식 간의 연속적인 속성 때문에 다루기가 어렵다 만약 적용 가능한 경우 선호된다 구글 크롬 - 환경설정에서 브라우저의 기본 폰트 사이즈가 16임을 확인할 수 ..
-
[Swift] 옵셔널 체이닝(Optional Chaining)iOS/Swift 2022. 8. 11. 20:51
옵셔널 체이닝이란? 💡 옵셔널이 중첩되어 있을 때 유용하게 사용할 수 있는 옵셔널 내부 요소의 프로퍼티이다 - 중첩된 옵셔널 중 하나라도 값이 존재하지 않는다면 nil을 반환한다 // ============== ============== class Room { var RoomNum: Int init(RoomNum: Int) { self.RoomNum = RoomNum } } class Building { var name: String var room: Room? init(name: String) { self.name = name } } struct Address { var building: Building? var city: String init(city: String)..