기본 콘텐츠로 건너뛰기

1월, 2021의 게시물 표시

Part03 CSS - 04

 Sass(SCSS) Sass - 웹은 css만 동작하기에 전처리기(Less, Sass(SCSS), Stylus)라고 부름(컴파일하면 css로 나옴) Sass와 SCSS는 차이점 - Sass(Syntactically Awesome Stylus Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합, SCSS는 CSS와 거의 같은 문접으로 Sass 기능을 지원한다는 뜻, 가장 간단한 차이는 {}와 ;의 유무(Sass는 안씀, SCSS는 사용), Sass는 mixins 기능을 =,+로 사용하고 SCSS는 @mixin, @include로 사용 주석 - 컴파일되지 않는 주석(//)은 css로 변환되지 않음, 기본 주석(/* */)은 css로 변환이 됨 // 컴파일되지 않는 주석 /* 컴파일되는 주석 */ //Sass *줄이 잘 맞아야함 - SCSS상관 없음 /* 컴파일되는 * 여러 줄 * 주석 */ 데이터 종류 - null이 사용되면 컴파일하지 않음, Maps는 ()를 꼭 붙여야 함 중첩(Nesting) - 중첩 기능을 통하여 상위 선택자의 반복을 피하고 복잡한 구조를 편리하게 작성 가능 & Ampersand(상위 선택자 참조) - 중첩 안에서 & 키워드는 상위 선택자를 참조하여 치환 .btn { position : absolute ; & .active { color : red ; } } //&.active의 의미는 .btn.active { color : red ; } @at-root(중첩 벗어나기) - 중첩안에서 생성하되 중첩 밖에서 사용해야 할 경우 .list { $w : 100 px ; $h : 50 px ; li { width : $w ; height : $h ; } @at-root .box { width : $w ; height...

Part03 CSS - 03

      Grid CSS Grid - Flexible Box는 단순한 1차원 레이아웃을 위한 기능이지만 Grid는 2차원의 레이아웃 시스템을 제공, Flex처럼 Container와 Item이라는 두가지 개념이 있음 Grid Container Properties Grid Item Properties Grid Containers               display - Grid Container 정의, 정의된 컨테이너의 자식 요소들은 자동으로 Grid Items로 정의 됨                                   grid                    Block 특성의 Grid Container를 정의                                   inline-grid       Inline 특성의  Grid Container를 정의               grid-template-rows - 명시적 행의 크기, 라인의 이름을 정의, fr(fraction, 공간 비율) 단위를 사용할 수 있음, repeat() 함수를 사용할 수 있음               grid-template-columns...

2장 객체 생성과 파괴

 생성자 대신 정적 팩터리 메서드를 고려하라  public static Boolean valueOf ( boolean b) { return b ? Boolean. TRUE : Boolean. FALSE ;  }                                 정적 팩터리 메서드가 생성자보다 좋은 장점 다섯 가지                              1. 이름을 가질 수 있음 : 이름을 통하여 기능 유추가 가능, 생성자는 시그니처에 제약이 있음, 똑같은 타입을 파라미터로 받는 생성자 두개를 만들 수 없으니까 그런 경우에도 정적 팩토리 메소드를 사용하는 것이 유용함 //정적 팩토리 메소드 public static Item newIphone (){ return new Item (apple, camera, text); } //생성자를 사용하는 경우 Item iphone = new Item(apple, camera, text); public Foo (String name){ this . name = name; } //에러가 남(똑같은 String을 받아오므로) public Foo (String address){ this . address = address; }                              2. 호출될 때마다 인스턴스를 새로 생성하지 않아도 됨 : 반복되는 요청에 같은 객체를 반환하는 식...