[KDT]FCFE - 1주5일 - 1. CSS

Part03 CSS

04. CSS 기본 스타일 2

상자 관련 스타일

width, height

: 높이와 너비

• 단위
  px => 절대 크기 : 모니터상의 한점
  % => 상대 크기 : 바로윗 부모의 크기에 비례

margin : 20px 15px 20px 15px;

: 바깥쪽 여백

margin : (top) (right) (bottom) (left);

padding

: 안쪽 여백

border : 1px solid black;

: 테두리 선

• 선 스타일
  slide
  dashed
  dotted

border-radius

: 둥근 모서리

background

: 배경

• 속성
  background-color : 배경색
  background-image : url("배경 이미지 주소");
  background-size : 배경 이미지 크기(10px, 50%, cover, contain)
  background-position : 배경 이미지 위치 (50px, 50%)
  background-repeat : 배경 이미지 반복 여부 (no-repeat)

box-shadow

: 그림자

box-shadow: (x축 위치) (y축 위치) (번짐옵션) (색상)

05. CSS 레이아웃

position : 위치 관련 스타일

static

: 기본값

relative

: 상대적 배치

absolute

: 절대적 배치

fixed

: 고정

display: 요소를 보여주는 방법

inline, block, inline-block

display : inline;
display : block;
display : inline-block;

none

display : none ( 자리를 차지하지 않음 )
visibility : hidden ( 자리 차지 )
opacity : 0 ( 자리 차지 )

06. CSS grid 레이아웃

페이지를 구획으로 나누는 다양한 방법

부모 요소에서

display : grid;

column의 갯수와 크기 지정

grid-template-columns

• 절대값으로

grid-template-columns: 100px 200px 300px;

• 비율 분할(fractions)

grid-template-columns: 1fr 2fr 3fr 4fr;

• 혼합 사용

grid-template-columns: 200px 1fr 3fr;

• 반복 지정

grid-template-columns: repeat(3,1fr);

row의 갯수와 크기 지정

grid-template-row

• 절대값으로

grid-template-row : 100px 200px 400px;

• 상대값은 높이가 지정되어 있을 때

height : 800px;
grid-template-rows: 1fr 2fr 3fr;

• 내부 컨텐츠의 높이에 따라

grid-temlplate-rows: 100px auto minmax(100px, 200px);

선 번호로 영역 지정

grid-column, grid-row

기본 설정

  <div class="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 150px);
}
.wrapper > div { 
  background-color: yellow; 
}
.wrapper > div:nth-child(even) { 
  background-color: yellowgreen;
}

가상의 표를 그리고

표에 그려진 선을 생각하며 지정한다.

column 이 3개인 경우에는

4개의 세로 선이 있다.

row 가 4개인 경우에는

5개의 가로 선이 있다.

grid-column: 1/4;

: 세로 선 첫번째 선부터 4번째 선까지 차지한다.

grid-row: 1/2;

: 가로 선 첫번째 선부터 2번째 선까지 차지한다.

이름으로 영역 지정

부모 요소에

grid-template-areas

구성 하는 요소에

grid-area

ex)

.wrapper {
  grid-template-areas: 
    "red red red"
    "green blue blue"
    "green blue blue"
    "purple purple orange";
}
.wrapper > div:nth-child(1) {
  background-color: red;
  grid-area: red;
}
.wrapper > div:nth-child(2) {
  background-color: green;
  grid-area: green;
}
.wrapper > div:nth-child(3) {
  background-color: blue;
  grid-area: blue;
}
.wrapper > div:nth-child(4) {
  background-color: purple;
  grid-area: purple;
}
.wrapper > div:nth-child(5) {
  background-color: orange;
  grid-area: orange;
}

grid 공간 띄우기

gap: 10px

07. CSS Material Design

Apple의 Flat Design

• 색종이를 이어붙인 듯 평평한 디자인

• 입체효과, 그라디언트,세부장식 배제

  Googled의 Material Design

• Flat 디자인에 그림자로 깊이감 추가

• 역동적인 에니메이션 활동

  Material Design의 도입 이유

1. 일관성 있는 UX

• 어떤 기기나 앱을 사용하든 익숙한 사용자 경험
• 어떤 컨텐츠든 담을 수 있는 디자인

2. 의도의 명확화

• 어떤 요소든 용도와 작동방법을 알기 쉽도록
• 뚜렷한 반응성 -> 행위에 의한 결과를 쉽게 인지

  Material Design 사용하기

1. flat한 요소들을 입체적으로 사용

• block/inline-block 요소들과 배경색 활용
• shadow로 깊이감 표현

2. 사용자 행동에 대한 반응 보여주기

• :hover 등 활용 (과하지 않도록!)

3. 메인 색(테마 색)을 지정하여 활용하기

• 공식 사이트(Material Design)에서 가이드하는 색상 보기

4. 구글 사이트들, 안드로이드 공식 앱들 참고

• Gmail, Youtube, Firebase,
• Material UI Themes 보기

5. 라이브러리 활용하기

• Material Design Lite

08. CSS Reset & 실습과제

CSS Reset

브라우저마다 다른 CSS 속성들을 초기화

Eric Meyer's CSS Reset 2.0

reset.css 를 만들어서 내용을 넣고 링크를 걸어둔다.