한번에끝내는프론트엔드개발초격차패키지Online.

패스트캠퍼스 챌린지 18일차 - Part1. Ch8

이제 container가 아니라 item에 부여하는 flex 관련 속성들에 대해 알아보자. order : Flex Item의 정렬 순서를 부여한다. 기본값은 순서가 없는 0이고, 숫자값이 작을 수록 먼저 정렬된다. flex-grow : Flex Item의 증가 너비 비율을 결정하는 속성. 기본값은 0이고 숫자값을 통해 증가 비율을 지정해 줄 수 있다. 간단하게 실습으로 알아보자! 예를 들어 아래와 같이 요소들이 있을 때, 1번 요소에 flex-grow 값을 1을 주면, 2 3번 요소는 증가 비율이 0인 상태이므로 나머지 공간을 1번 요소가 모두 차지한다. 2번 요소에 값을 2를 주고 3번 요소에 1을 주면, 증가 비율이 0인 1번 요소를 제외한 나머지 공간을 2와 3번 요소가 2대 1의 비율로 차지하게 ..

패스트캠퍼스 챌린지 17일차 - Part1. Ch8

수평 정렬하는 flex 속성에 대해 이어서 더 알아보자! flex-wrap : flex items 묶음(줄 바꿈) 여부를 지정하는 속성. 기본값은 묶음(줄 바꿈) 없는 nowrap이고, 여러 줄로 묶는 wrap 값을 줄 수 있다. nowrap일 때는 칸이 모자라면 한 줄에 item들을 표현하기 위해 크기가 찌그러질 수 있다. 그림으로 확인해보자! 가로 세로 100px의 정사각형 요소들인데 flex로 설정하니 한 줄에 수평 정렬하기 위해 크기가 이상해졌다. wrap 값을 넣어주니 원래의 크기대로 나오고, 한 줄을 넘어가는 요소들은 줄 바꿈되어 나타났다. justify-content : 주 축의 정렬 방법 지정 속성. 수평 정렬 할 때는 수평 축, 즉 x축이 주 축이 되므로 곧 수평 정렬의 방법을 결정하는 ..

패스트캠퍼스 챌린지 16일차 - Part1. Ch8

이제 플렉스에 대해 알아보자. 플렉스(flex)는 1차원의 레이아웃 개념과 같다. 이전까지 요소를 출력했을 때는 수직으로 출력되었다. 수평 정렬 할 때는 아주 간단하게 display: flex; 값만 넣어주면 된다! 이 때 flex 값을 넣어 준 요소는 container, 수평 정렬 된 요소들은 item 이라고 부른다. css에서 container와 itme에 넣을 수 있는 속성들이 각각 다르다는 점에 주의하자. dispaly : Flex Container의 화면 출력 특성을 지정하는 속성이다. 다른 값으로 이전에 block과 inline 등 을 넣어 사용했다. Flex Container를 inline 요소처럼 활용해야 할 때는 inline-flex 값을 주고, block처럼 활용할 때는 flex 값을 ..

패스트캠퍼스 챌린지 15일차 - Part1. Ch8

이번에는 요소를 원하는 위치에 배치할 수 있는 position 속성을 포함해서 여러 가지 속성들을 살펴보자. position : 요소의 위치 지정 기준. relative는 요소 자신을 기준으로, absolute는 위치상 부모 요소를 기준으로, fixed는 뷰포트를 기준으로 한다. 요소를 배치할때는 기준을 잡고 나서 위치 값을 설정해야 한다는 사실을 기억하자! position을 이용해 기준을 잡고 나면, top bottom left right 등 의 속성(값이 아니고 속성!!)을 이용해 위치 값을 설정할 수 있다. absolute, fixed가 지정된 요소는 display 속성이 block으로 변경된다. 2번 요소에 자신을 기준으로하는 relative 값을 주고, top과 left에 위치 값을 주면 사진과..

패스트캠퍼스 챌린지 14일차 - Part1. Ch8

이번엔 css의 배경과 관련된 내용을 살펴보자!! background-color : 요소의 배경 색상을 지정하는 속성으로 기본값은 투명한 transparent이다. background-image : 요소의 배경 이미지 삽입 속성. url("경로") 와 같이 값을 넣어주면 된다. background-repeat : 요소의 배경 이미지 반복 속성으로 기본값은 바둑판식으로 반복하는 repeat이다. repeat-x는 이미지를 수평 반복, repeat-y는 이미지를 수직 반복, no-repeat는 반복 없는 값이다. background-position : 요소의 배경 이미지 위치 속성. top, bottom, left, right, center와 같이 방향으로 입력하거나 px, em, 등 단위로 지정하는 총 2..

패스트캠퍼스 챌린지 13일차 - Part1. Ch8

이번에는 글꼴과 관련된 속성들을 살펴보자. font-style : 글자의 기울기를 설정하는 속성으로 기본값은 기울기가 없는 normarl이다. italic은 이텔릭체(기울어진 글자) 이다. font-weight : 글자의 두께(가중치)를 설정하는 속성이다. 기본값은 normal, 400이며 두껍게는 bold, 700 이다. 100-900 사이의 100단위의 값을 입력할 수 있다. font-size : 글자의 크기를 지정한다. 기본 크기는 16px이며 px, em, rem 등 의 단위로 값 지정이 가능하다. line-height : 한 줄의 높이를 설정하는 속성으로 행간과 유사하다고 보면 된다. 숫자를 입력하면 요소의 글꼴 크기의 배수로 지정되며, 단위를 이용해 설정할 수도 있다. 배수를 사용하는 방법을 ..