1. CSS inheritance

상속은 부모 요소의 프로퍼티 값을 자식 요소가 물려받는 것을 의미함

복잡한 상속관계는 코드를 더럽히기 때문에 지양해야 한다.

상속 가능: text-align, line-height, color, font, visibility, opacity
상속 불가: width, height, margin, padding, border, display, box-sizing, background, vertical-align, position (top, right, bottom left), z-index, overflow, float
상속 프로퍼티 관련 공식 정보

상속되지 않는 프로퍼티 값을 상속하고 싶지 않을 때에는 자식 요소에 해당 프로퍼티를 inherit으로 설정하면 된다.

CSS 우선순위와 Cascading

!important > Inline Style > id > class > tag

!important 태그 안에 style을 작성하는 것은 코드의 복잡도를 높이기 때문에 지양해야 한다.

CSS 명시도 계산 규칙

쉼표로 구분된 4자리로 표시
- 0, 0, 0, 0
Specificity Calculator

2. CSS media

viewport는 화면상의 표시 영역을 의미하며, 스마트폰에서는 virtual viewport를 대부분 980px로 설정되어 있음
일반적으로 device-width는 디스플레이 해상도 너비 / pixel density로 계산되고, 이를 브라우저가 인식하여 meta viewport 태그에 적용하는 것이라고 생각할 수 있다.

<meta name="viewport" content="width=320">
<meta name="viewport" content="width=device-width">

미디어 쿼리

media == device
media query == 서로 다른 미디어 타입에 대응(각기 다른 스타일)하기 위한 기능

@media media-type and (media-feature-rule) {
	// CSS rules go here
}

media-type: all, print 등
media-feature-rule: min-width/max-width, orientation(landscape, portrait) 등
논리 연산자
- and
- not
- only: 복수의 미디어 쿼리가 참일 때만 스타일을 적용하는 경우에 구형 브라우저에서 잘못 처리되는 것을 막기 위해 사용. 예를들어 only를 사용하지 않고 screen and (max-width: 300px)과 같이 사용하는 경우 구형 브라우저에서는 screen 까지만 읽고 뒷 부분은 무시한 채 스타일을 적용할 수 있음.
- , == or

3. CSS flexbox

부모 요소에 display를 flex로 선언
상위 부모 요소: flex container
하위 자식 요소: flex item

flex container 와 flex item 각각 설정할 수 있는 프로퍼티가 다르다.

flex item은 해당 요소를 감싸고 있는 부모 요소로 flex container가 필수적이다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <style>
      .container {
        border: 1px solid red;
      }
      .item {
        border: 1px solid blue;
        width: 100px;
        height: 100px;
        border-radius: 10px;
        float: left;
      }
			.clearfix::after {
	      content: "";
        clear: both;
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="container clearfix">
			<div class="item"></div><div class="item"></div><div class="item"></div>
    </div>
  </body>
</html>

3.1. flex container 주요 프로퍼티

프로퍼티	의미
display	flex container 정의
flex-direction	flex item 들의 주 축(main-axis) 방향 설정
flex-wrap	flex item 들을 1행 또는 복수의 행으로 배치하는 설정
flex-flow	flex-direction 과 flex-wrap을 한번에 설정하는 단축 프로퍼티
justify-content	주축기반 정렬 방법 설정
align-content	교차축 기반 정렬 방법 설정 (2행 이상)
align-items	교차축 기반 정렬 방법 설정 (각 행마다 적용)

display 프로퍼티

flex: block 특성의 flex container 정의 (수직 정렬)
inline-flex: inline 특성의 flex container 정의 (수평 정렬)

부모 요소의 display를 위와 같이 설정하면 자식 요소들은 자동으로 flex item이 된다.

flex direction 프로퍼티

row: 왼쪽 수평 정렬
row-reverse: 오른쪽 수평 정렬
column: 위에서 아래로 수직 정렬
column-reverse: 아래에서 위로 수직 정렬

div 박스 내의 텍스트 가운데 정렬

수평: text-align: center;

수직: line-height: height에서 설정한 높이값 동일 적용;

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
  <style>
    .container {
      border: 2px solid #F2E3D5;
      background-color: #F20505;
      width: 200px;
      display: inline-flex;
      flex-direction: row-reverse;
    }
    .item {
      border: 2px solid #F2E3D5;
      margin: 5px;
      text-align: center;
      line-height: 50px;
      background-color: #03658C;      
      width: 50px;
      height: 50px;
      border-radius: 10px;
      color: white;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
  </div>
</body>
</html>

flex-wrap 프로퍼티

flex item 들을 1행 또는 복수의 행으로 배치하는 설정

nowrap: flex item 들을 개행하지 않고 한 행에 배치 (디폴트)
wrap: flex item 들의 너비 합이 flex container 너비 보다 큰 경우 복수의 행에 표시
wrap-reverse: wrap 과 비교하여 순서가 역방향으로 표시

flex-flow 프로퍼티

flex-direction 과 flex-wrap 프로퍼티를 한번에 사용할 수 있는 단축 프로퍼티

flex-flow: flex-direction flex-wrap

justify-content

주축기반 수평정렬 방법 설정

flex-start (디폴트)
flex-end
center
space-between: 좌우 끝에 flex item 배치 후 내부 flex item 은 균등 간격 정렬
space-around: 내부 flex item 균등 간격 정렬

align-items 과 align content

align-items: 교차축 기반 정렬 방법 설정 (각 행마다 적용)
- stretch (디폴트)
- flex-start: 각 행의 item 들은 각 행의 시작점을 기준으로 정렬
- flex-end: 각 줄의 끝점에서 부터 정렬
- center: 각 줄의 교차축의 가운데에서 정렬
- basline: 각 줄의 문자 기준선에서 정렬
align-content: 교차축 기반 정렬 방법 설정 (복수의 행을 하나의 그룹처럼 적용)
- stretch (디폴트)
- flex-start: 복수의 행에 있는 item 들이 flex-start 각 줄의 시작점에서 부터 정렬
- flex-end: 마지막 행의 끝점에서 부터 item 들이 정렬
- center: 전체 container의 가운데에서 정렬
- space-between: 첫행과 마지막 행은 각각 첫행의 시작점과 마지막 행의 끝점에 붙어 있고 나머지 행은 container 내부에서 균등간격으로 정렬
- space-around: 각 행이 모두 균등한 간격으로 정렬

flexbox 활용 가운데 정렬

수평: justify-content: center;

수직: align-content: center;

3.2. flexbox item 주요 프로퍼티

프로퍼티	의미
order	flex item 배치 순서 설정
flex-grow	flex item 너비 증가 비율 설정
flex-shrink	flex item 너비 축소 비율 설정
flex-basis	flex item 기본 너비 설정 (공간 분배 전), 기본값은 auto
flex	flex-grow, flex-shrink, flex-basis를 한번에 설정하는 단축 프로퍼티, 호환성 이슈로 사용 지양
align-self	flex container의 align-items/align-content 보다 우선해서 개별 flex item 수직 정렬 방법 설정

Outpan Flexbox Playground

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
  <style>
    .container {
      margin: 0 auto;
      border: 2px solid #F2E3D5;
      background-color: #F20505;
      display: flex;
    }
    .item {
      margin: 10 0px;
      border: 2px solid #F2E3D5;
      box-sizing: border-box;
      text-align: center;
      line-height: 50px;
      background-color: #03658C;      
      border-radius: 10px;
      color: white;
    }
    .item1 {
      flex-shrink: 1;
      flex-basis: 200px;
    }
    .item2 {
      flex-shrink: 0;
      flex-basis: 200px;
    }
    .item3 {
      flex-grow: 1;
      flex-basis: 200px;
    }
    .item4 {
      flex-grow: 0;
      flex-basis: 200px;
    }

  </style>

</head>
<body>
  <div class="container">
    <div class="item item1">item1</div>
    <div class="item item2">item2</div>
  </div>
  <div class="container">
    <div class="item item3">item3</div>
    <div class="item item4">item4</div>
  </div>

</body>
</html>

Author And Source

이 문제에 관하여(5. 중급 CSS와 반응형 기능), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@24siefil/5.-중급-CSS와-반응형-기능

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

5. 중급 CSS와 반응형 기능