CSS 기초

rakkoon23·2020년 4월 24일
0

nomadeCoder-kakao-clone

목록 보기
2/2

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;
    1. fixed : 스크롤을 내려도 sticky하게 따라온다.
    • position : fixed;
    1. absolute : 해당 element와 관계가 있는 element를 찾아서 이에 상응하는 포지션이 결정됨.
    2. 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 {}
profile
모빌리티 스타트업에서 데이터를 다루고 있습니다.

0개의 댓글