Selector와 Property

• CSS에서 selector와 property는 다음의 형태를 따른다.

  Selector {
      property : value;
  }

CSS를 HTML과 연결하는 방법

1. Inline 방법
   • 태그 안에 style 속성을 넣는 방법.
   • 개발과 유지보수 등 모든 측면에서 추천하지 않는 방법임.
2. External
   • <link href="style.css" rel="stylesheet">

Box model

• Box Model의 종류
  1. Margin
  2. Border
  3. Padding
  4. Contents

Inline vs Block vs Inline Block

• display의 default값은 block임.
• 박스는 inline과 inline-block 둘 중 하나여야 한다.
• Block : element의 크기와 상관 없이 옆에 아무것도 올 수 없음.
  • display : block;
• Inline-Block : 크기에 따라 옆에 다른 element들이 올 수 있음.
  • display : inline-block;
• Inline
  • 박스의 모든 property 설정값을 지움.
  • 박스가 아닌 텍스트에 적용됨.

Position Property

• 브라우저가 갖고 있는 디폴트값을 상쇄시키기 위해 아래 코드 필요!

body, html {
  height : 100%;
  margin : 0;
  padding : 0;
}

• Position Property의 종류
  1. static : 브라우저 특정 좌표에 고정. 따라서 스크롤을 내리면 위로 사라짐. CSS의 디폴트값임.
  • position : static;
  2. fixed : 스크롤을 내려도 sticky하게 따라온다.
  • position : fixed;
  3. absolute : 해당 element와 관계가 있는 element를 찾아서 이에 상응하는 포지션이 결정됨.
  4. relatvie : 부모박스의 포지션에 따라 상대적으로 움직이고 있음.
• 주의!) absolute 포지션을 부모 element에 상대적으로 적용하려면, 부모 element에게 relative 포지션을 먼저 설정해줘야 한다. 그렇게 하면 child-element는 parent-theme 안에 위치한다.

Flex

<style>
.father {
    display : flex;
}
</style>
<div class="father"></div>
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
  

• 위와 같은 경우에, Flex를 적용할 땐 자식 클래스에 적용하지 않고, 오직 부모 클래스에만 적용한다.
  • 위에서 father 클래스에 display:flex;를 하면, 자식 클래스의 display가 자동으로 inline-block이 된다(display 기본값이니까).
  • 즉, 부모 컨테이너를 플렉스로 선언하면 각 박스에 일일이 명령하지 않고도 자식 컨테이너들을 움직일 수 있음.
  • justify-content : center;
    • 컨텐츠를 가운데 정렬함.
    • justify는 수평으로 정렬한다.
  • align-content : center;
    • 컨텐츠를 가운데 정렬하는 기능.
    • align은 수직으로 정렬한다.
    • value 종류 : flex-end, space-between, space-around 등.
• flex는 창을 줄여도 창의 폭에 맞추어 줄어든다.
• flex 관련 justify-content 값들
  • flex-start : 요소들을 컨테이너의 왼쪽으로 정렬(default).
  • flex-end : 요소들을 컨테이너의 오른쪽으로 정렬.
  • center : 요소들을 컨테이너의 가운데로 정렬.
  • space-between : 요소들 사이에 동일한 간격을 둔다.
  • space-around : 요소들 주위에 동일한 간격을 둔다.
  • ex) justify-cotent : flex-start;
• flex 관련 align-items 값들
  • flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
  • flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
  • center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
  • baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
  • stretch: 요소들을 컨테이너에 맞도록 늘립니다.
• flex 관련 flex-direction 값들
  • row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
  • row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
  • column: 요소들을 위에서 아래로 정렬합니다.
  • column-reverse: 요소들을 아래에서 위로 정렬합니다.
• flex를 공부하기에 좋은 사이트 : FLEXBOX FROGGY

Pseudo-selector(가상 선택자)

• Pseudo-selector
  • 선택자인데 element가 아닌 것.
  • id 또는 class를 쓰지 않고 디자인 수정 가능.

<style>
input[type="submit"] {
  background-color : red;
}
</style>

<input type="submit">

• 마지막 element만 선택하기
  • first-child, nth-child(n), nth-child(2n)도 있음.

  .box:last-child{
    background-color : red;
  }

• input + .box {}
• input > .box {}

CSS states

• states의 종류
  1. active : element를 클릭할 때
  2. focus : element 위에 마우스 커서를 올려놓으면, 경계션이 강조됨.
  3. visited : 이미 방문한 하이퍼링크일 때
  4. hover : element 위에 마우스 커서를 올려놨을 때
  • ex) .box:hover {}