CSS

CSS 코드 작성 방법

• inline : 태그에 직접(Inline) CSS 코드를 작성할 때 사용한다.

<p style="color: teal">Inline style로 적용된 CSS.</p>

• internal : HTML 파일 내부(Internal)에 CSS 코드를 작성할 때 사용한다.

<style>
    .internal {
      color: crimson;
    }
</style>

• external : HTML 파일 외부(External)에 CSS 코드를 작성할 때 사용한다.

/* html 파일 */
<link rel="stylesheet" href="inline_internal_external.css">

/* css 파일 */
.external {
    color: red;
    font-size: 50px;
}

Selectors

• * : 전체 선택자

* {
    color: red;
}

• . : 클래스 선택자

/* html 파일 */
<p class="class-selector">클래스 선택자(Class Selector)</p>

/* css 파일 */
.class-selector {
    color: brown;
}

• # : 아이디 선택자

/* html 파일 */
<p class="class-selector" id="id-selector">아이디 선택자(Id Selector)</p>

/* css 파일 */
#id-selector {
    color: green;
}

Specificity

• 명시도 우선순위
  • 전체 선택자 < 타입 선택자 < 클래스 선택자 < 아이디 선택자 < 인라인 스타일
• 개발자 도구의 아래 사진 부분이 인라인 스타일이다.

element.style {
}

Order of Priority

• CSS 코드의 순서
• Internal과 External style 中, 코드와 가장 가까이에 선언된 스타일이 적용된다.
  
  

Inheritance

• 속성의 값으로 “inherit”를 설정하여 부모 속성 값을 상속받는다.

#sidebar h3 {
    color: inherit;
}

text font units

• tr : table row
• th : table head
• td : table data
• border 속성 : width style color

border: 1px solid black;

• Chrome browser의 기본 폰트 사이즈는 16px이다.
• em : 상위 요소 크기를 변수로 가지는 배수 단위이다.

.em-parent {
    font-size: 3em; /* 48px */
}
.em-child {
    font-size: 0.5em; /* 24px */
}

• rem : 루트 요소에 지정된 폰트 사이즈의 배수 단위이다. 이것을 쓰는 것이 가장 좋다.

.rem-parent {
    font-size: 3rem; /* 48px */
}

/* 루트 16px의 0.5배수인 8px이 되어야 하지만, 10px로 출력되는 것응로 보아, 최소 픽셀 크기가 10인 것으로 추측된다. */
.rem-child {
    font-size: 0.5rem; 
}

display

• 모든 태그는 왼쪽 위로 가려는 성질을 갖고 있다.
• <br /> : 줄 바꿈 태그이다.
• <div > : block 속성으로, 항상 새로운 줄부터 시작한다. 가로 폭 100%를 차지한다.
• <a /> : inline 속성이다. 새로운 줄부터 시작하지 않고, 자신이 필요한 가로 영역만큼 차지한다.
• <span /> : 자신의 영역만 차지한다.
  
  

width

• div : 기본 100%의 width 차지
• span : inline element로, 자신의 영역 크기만큼 width가 지정됨. auto
• a : 자신의 영역만큼 width 지정
• w30p : width: 30px 자동 완성)
  
  

height

• htlm, body 모두 height 100%로 설정해줘야 브라우저 전체 화면을 영역 범위로 차지할 수 있다.
  
  

box model

• 모든 element는 Box 형태의 구조를 가지고 있다.
• bgco : background color 자동완성
• margin : 바깥 여백
• 우선순위 : content < padding < border < margin

.box {
    width: 300px;
    background-color: skyblue;
    font-size: 50px;
    padding: 20px;
    border: dashed 5px beige;
    margin: 20px;
}

box sizing

• bz : box sizing 자동 완성
• content-box (기본값)
  - content 영역 기준으로 크기 설정한다.
  • border, padding, margin은 설정한 박스 바깥에 적용되어 전체 영역이 설정값보다 커질 수 있다.
  • 전체 크기 = content-box + padding + border + margin
  • content 크기 : content-box
• border-box
  - 테두리 기준으로 크기 설정한다.
  • 설정한 박스 크기의 내부에 border, padding, margin을 모두 포함하여 content 영역이 설정값보다 작아질 수 있다.
  • 전체 크기 = border-box = content + paddidng + border + margin
  • content 크기 = border-box - border - padding - margin
• initial : 기본값으로 설정한다.
• inherit : 부모 요소의 속성값을 상속 받는다.

* {
    box-sizing: border-box;
}
.box {
    box-sizing: content-box; /* 오버라이딩 */
}

display

• 종류
  • block
    • 100%의 width 를 차지하여, 항상 새로운 줄부터 시작한다.
    • width, height, margin, padding 속성이 모두 반영된다.
    • ex) div, p, h1
  • inline
    • 자신이 필요한 영역만큼의 공간만 차지한다.
    • 새로운 줄부터 시작하지 않는다.
    • width와 height 속성을 무시한다.
    • margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영되지 않는다.
    • ex) span, a
  • inline-block :
    • 기본적으로 inline의 속성을 지니고 있어 줄바꿈 없이 한 줄에 다른 element들과 나란히 배치된다.
    • block element처럼 width, height, margin, padding 속성의 상하 간격 지정이 가능하다.
    • ex) button, input, select
  • none : 화면에서 사라진다. 자리를 차지하지 않는다.

  display : block;
  display : inline;

  /* n n -> 상하 좌우 / n n n n -> 상우하좌(시계방향) */
  margin-bottom: 20px 0;

• hover : 마우스 커서가 올라갔을 때 적용할 스타일을 설정한다.

//* 그림자 생성 */
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

• nth-child : 자식 요소를 가리킨다.

.card:nth-child(1) { /* card의 첫번째 요소 */
    display: none; /* 숨김 */
}

.card:nth-child(2) {
    visibility: hidden; /* 자리를 차지하며 숨김 */
}

.card:nth-last-child(1) {/* 마지막 요소부터 선택 */
    display: none;
}
.card:nth-child(even) {/* 짝수 even, 홀수 odd */
    display: none;
}

float

• 요소를 이동시킨다.
• left / right / inline-start / inline-end

<img style="float: right;" src="~~"/>

flexbox layout

• 아래가 적용된 요소는 flex container가 되고, 이의 자식 요소는 flex item가 된다.
• block : 해당 태그 속성에 따라 공간을 차지한다.
• flex : 가로 방향으로 배치되어 content의 width만큼 차지한다. height는 container의 높이만큼 늘어난다.
• inline-flex : inline-block처럼 동작한다.
  display : flex;
• flex-direction : 배치
  • 주축 : row / row-reveerse
  • 교차축 : column / column-reverse
• flex-wrap : 줄바꿈
  • nowrap : 줄바꿈을 하지 않고 block을 넘어 배치된다.
  • wrap : 아래로 줄바꿈된다.
  • wrap-reverse : 역순으로 줄바꿈 된다.
• flex-flow : flex-direction + flex-wrap
  flex-flow : row wrap;
• justify-content : 메인축(가로) 정렬
  • flex-start(기본값)
    • item을 시작점으로 정렬.
    • flex-direction:row; -> 왼쪽
    • flex-direction:column; -> 위
  • flex-end
    • item을 끝점으로 정렬.
    • flex-direction:row; -> 오른쪽
    • flex-direction:column; -> 아래
  • center : 중앙 정렬
  • space-between : item 사이에 균일한 간격을 만든다. 양 끝쪽은 block에 밀착된다.
  • space-around : item의 둘레에 균일한 간격을 만든다. 양 끝쪽도 동일한 여백이 생긴다.
    
    
• align-items : 수직축(세로) 정렬
  - stretch(기본값) : item들이 수직축 방향으로 끝까지 늘어난다.
  • flex-start : item들을 시작점으로 정렬한다. flex-direction이 row -> 위, column -> 왼쪽
  • flex-end : item들을 끝으로 정렬한다. flex-direction이 row -> 아래, column -> 오른쪽
  • center : 중앙 정렬
  • baseline : text baseline 기준으로 정렬한다.
    
    
• align-content : 여러 행 정렬
  - flex-wrap:wrap;이 설정된 상태에서, item들의 행이 2줄 이상일 때 수직축 방향 정렬을 결정한다.
  - stretch
  - flex-start
  - center
  - space-between
  - space-around
  - space-evenly
• align-self : 개별 item을 따로 정렬한다. align-content 속성은 지워줘야 적용된다.
• order : 요소의 출력 순서를 바꾼다. 속성 값이 작을수록 먼저 출력된다. 음수도 가능하다.

.item:nth-child(1) {
	order : 2;
}
.item:nth-child(2) {
	order : 1;
}
// 출력 결과는 2, 1

• z-index : Z축 정렬. 레이어처럼 속성 값이 클수록 다른 속성의 위를 덮어 씌운다.

.item:nth-child(2) {
	z-index: 1;
	transform: scale(2); /* 투명도 */
}

• peseudo-classes : http://www.tcpschool.com/css/css_selector_pseudoClass