본문 바로가기

Frontend/CSS

 (7)
CSS position CSS position 프로퍼티는 해당 요소가 화면에 어떻게 위치할 것인지를 결정한다. static: 요소의 default 값이며, top, right, bottom, left, z-index와 같은 값에 영향을 받지 않는다. relative: 초기 요소의 위치는 static인 경우와 같지만 top, right, bottom, left, z-index와 같은 프로퍼티로 오프셋을 설정할 수 있다. z-index의 값이 auto가 아닌 경우에는 stacking context를 생성한다. absolute: 해당 요소는 일반적인 레이아웃 구성에서 벗어나 특정 공간을 부여받지 않는다. 해당 요소는 가장 가까운 위치를 가진 부모요소를 기준으로 위치가 결정된다. 해당 요소 역시 z-index값이 auto가 아니라면 ..
2021-04-24 :: Material UI 시작하기 터미널을 통해 아래 코드를 실행시켜 ui/core을 설치 해준다. npm install @material-ui/core npm install @material-ui/icons Material-UI의 기본 폰트인 Roboto를 import 해준다. 기본 html폴더에 폰트 등록하기 public/index/html에 폰트를 등록 해주자. Basic Component Typograph text를 추가할 때 사용하는 컴포넌트이다. Hello, World! Grid - 반응형 cssbaseline -> give default css @material에서 Icon도 많이 사용 가능 gutterBottom paragraph 메인홈페이지 component -> example of deoms, explainat..
2021-05-07 :: SCSS official guide 번역 sass-lang.com/guide Sass: Sass Basics Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything setup. Preprocessing CSS on its own can be fun, but st sass-lang.com 전처리 css가 점점 커지고 복잡해 짐에 따라 관리가 힘들어졌다. 따라서 전처리기의 도움이 필요하다. Sass는 기존의 css에 없었던 변수, nesting, ..
2021-05-07 Todo scss설정하기 CSS 단위 em rem CSS의 길이 단위 중 em rem은 상대적 기준으로 크기를 정한다. em은 상위 요소 기준으로 크기를 정한다. 만약 html테그의 font-size가 16px이고 html의 하위 요소인 body의 font-size를 1.5em으로 잡는다면 body의 실질적인 font-size는 32px이 된다. rem은 최상위 요소인 html 기준으로 크기를 정한다. 세부 작동 방식은 em과 비슷하니 생략하겠다. 요소의 가운데 정렬 아래 코드와 같이 width를 먼저 지정해준 뒤 margin-left, margin-right 속성에 auto 값을 부여하면 가운데 정렬이 된다. .TodoTemplate { width: 512px; //width가 부여된 상황에서 중앙정렬 margin-left: ..
2021-04-12 :: 컴포넌트 스타일링 이 장에서 배워볼 스타일링 방식은 다음과 같다. 일반 CSS: 컴포넌트를 스타일링 하는 가장 기본적인 방식 Sass: 자주 사용되는 CSS전처리기 중 하나로 확장된 CSS문법을 사용하여 CSS문법을 더욱 쉽게 작성할 수 있다. CSS Module: 스타일을 작성할 때 CSS클래스가 다른 CSS클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션이다. styled-component: 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해준다. 9.1 일반 CSS CSS를 작성할 때 가장 중요한 점은 CSS 클래스를 중복되지 않게 만드는 것이다. 이를 위해서는 이름을 지을 때 특별한 규칙을 사용하거나 CSS ..
CSS: Transition 트랜지션은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간에 걸쳐 일어나도록 하는 것이다. 이벤트에 맞추어 즉시 일어나는 것이 아니라 서서히 변화가 일어나기 때문에 더욱 자연스러워 보이는 효과가 있다. transition: all 2s; 위 코드에 대해서 설명을 해보자면 첫 번째 값을 transition을 적용할 이벤트의 범위를 의미한다. all은 모든 프로퍼티 변화에 트렌지션을 적용하겠다는 의미가 된다. 두 번째 값인 2s은 2초의 지연 시간을 준다는 의미를 지니고 있다. transition이 지정된 범위 역시 중요하다. div:hover와 같이 특정 이벤트 안에 지정한 경우에는 해당 이벤트가 발생할 때에만 트렌지션이 적용되고 hover-off가 되는 경우에는 트렌지션이 적용되지 않..
Flexbox Display Property display의 프로퍼티는 레이아웃 정의에 사용되는 아주 중요한 프로퍼티이다. 해당 프로퍼티에 속하는 키워드는 다음과 같다. flex 프로퍼티 키워드 설명 block -새로운 라인에서 시작한다 -width: 100%, height: auto (default) -width, height, margin, padding 프로퍼티 지정이 가능하다. inline -다른 요소들과 같은 행에 위치한다 -width, height, margin등의 프로퍼티를 저정할 수 없다. -content의 너비만큼 가로폭을 차지한다. line-block inline 요소와 같이 한 줄에 표현되면서 width, height, margin과 같은 프로퍼티를 설정할 수 있다. display 프로퍼티는 상속되..

티스토리툴바