CSS

Tia Hwang·2020년 1월 30일
0

WEB

목록 보기
1/2

이 글은 패스트 캠퍼스 HTML/CSS, Javascript 수업 내용을 바탕으로 하여 작성되었습니다.


1. CSS 단위

  • px
  • %: 부모에 적용된 px을 기준으로 적용됨
  • em: 부모에 적용된 font-size를 기준으로 적용됨
  • rem: 최상위 요소에 적용된 font-size를 기준으로 적용됨

2. Flex

  • 수직/수평 정렬에 관련된 속성
  • <display: inline-flex>: 인라인 요소 같은 플랙스
  • 예전 정렬 방식
    • 자식요소에 float 적용 후 부모요소에 .clearfix 클래스 추가
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
  • 수평 정렬 시키고 싶은 자식들의 부모display: flex 적용
  • 부모와 자식에 적용가능한 속성들
    • 부모
      • display
      • flex-flow
      • flex-wrap
      • justity-content
      • align-items
    • 자식
      • align-self
      • order

2-1. flex-wrap

  • nowrap: 한 줄에 표시(기본값)
  • wrap: 여러 줄로 표시
  • wrap-reverse

2-2. align-content

  • flex-wrap속성을 통해 2줄 이상이고, 여백이 있어야 사용 가능
  • 한 줄일 경우 align-items속성을 사용

2-3. align-items

  • atretch,flex-start,flex-end,center,baseline
  • baseline: 문자 기준선에 정렬

2-4. order

  • 순서 설정 가능/음수 가능
  • 기본값 <order: 0>

2-5. flex 단축 속성

.info {
  flex: 1 1 100px; // 증가너비 감소너비 기본너비
}
  • 위의 코드처럼 사용할 경우, 기본너비는 기본값인 auto가 아니라 0으로 설정됨
  • flex-grow
    • 증가 너비 비율 설정 가능
    • 기본값 <flex-grow: 0>
  • flex-shrink
    • 감소 너비 비율 설정 가능
    • 기본값 <flex-shrink: 1>
  • flex-basis
    • 공간 배분 전 기본 너비 설정 가능
    • 기본값 <flex-shrink: auto>

3. Grid

  • 부모요소에 선언해 주어야 함
.container {
  display: grid;
}
  • <display: inline-grid> 인라인 요소 같은 grid

3-1. grid-template-rows/gird-template-columns

.container {
  display: grid;
  grid-template-rows: repeat(2, 100px); //100px 크기의 2행
  grid-template-columns: repeat(3, 1fr); //1대1대1 비율로 3열
}

3-2. grid-column/grid-row

  • 자식 요소에 선언해주어야 함
  • firefox 개발자 도구로 작업 추천
.container {
  display: grid;
  grid-template-rows: repeat(4, 100px);
  grid-template-columns: repeat(3, 1fr);
}
.item:nth-child(1) {
  grid-row: 1 / 3;
  grid-column: 1 / 3;
}
.item:nth-child(2) {
  grid-row: 1 / 3;
}

3-3. grid-area

  • 그리드 영역 이름 설정 가능
  • 자식요소에 선언해주어야 함

3-4. row-gap/column-gap

  • 부모요소에 선언해 주어야 함
.container {
  display: grid;
  grid-template-rows: repeat(2, 100px);
  grid-template-columns: repeat(3, 1fr);
  row-gap: 20px; // 행 간격
  column-gap: 10px; // 열 간격
}
  • <gap: 20px 10px> : 행/열 순서로 간격 적용
  • <gap: 20px> : 행/열 동일하게 20px 간격 적용

3-5. grid-auto-rows/grid-auto-columns

  • 암시적으로 행/열 크기 정의

4. Pseudo-Classes Selectors(가상 클래스 선택자)

4-1. :focus

  • 포커스 된 동안에만 작동
  • 대화형 콘텐츠( input, img에서 사용 가능)

4-2. 자식선택자/후손선택자

// 바로 밑 자식만을 선택: ">"

.container > div:first-child {
  color: red;
}
  • 자식선택자: 컨테이너 클래스 바로 밑의 div들 중 첫번째 자식만이 선택 됨
.container div:first-child {
  color: red;
}
  • 후손선택자: 컨테이너 클래스 밑의 모든 div들 중 첫번째 자식들이 선택 됨

4-3. :nth-of-type(n)

  • :nth-child(n): 태그 종류가 모두 같아야 사용 가능
  • :nth-of-type(n): 태그 종류가 달라도 사용 가능

5. Pseudo-Elements Selectors(가상 요소 선택자)

  • 가상 요소로서 텍스트, 이미지 삽입 가능

5-1. ::before

  • 요소 내부 앞에 내용 삽입
  • content: "(내용입력 없으면 빈칸)"; 반드시 추가

5-2. ::after

  • 요소 내부 뒤에 내용 삽입
  • content: "(내용입력 없으면 빈칸)"; 반드시 추가
profile
프론트엔드 개발자로 취업하기

0개의 댓글