[패스트캠퍼스] React 강의 학습일지 2주차

백선영·2022년 9월 26일
0

패스트캠퍼스

목록 보기
2/8
post-thumbnail

</ 2주차 복습 및 정리>

1. css 개요

  • css 기본문법
선택자 {
	속성: 값;
}
<!--
값을 입력하고 마지막에 꼭 ;(세미클론) 넣어주기.
줄바꿈 형식으로 작성해야지 보기 편하고 협업할때도 좋음.
css에서의 주석처리는 /**/이며, ctrl + / = 주석처리하는 단축키
-->
  • css 선언 방식
    • 내장방식: style사이에 내용을 작성하는 방식. 코드가 길어지면 보기가 힘들어지기 때문에 권장하지 않음.
      <style>
      	div {
         	color: orange;
             margin: 20px;
         }

    • 인라인방식: 요소의 스타일을 직접 작성하는 방식(선택자가 없음). 먼저 처리되어지려고 하기 때문에 권장하지않는 방식임.
      <div style= "color: orange; margin: 20px;">Hello world!</div>

    • 링크방식: 외부 css 문서를 가져와 연결하는 방식.
      <link rel="stylesheet" href="./css/main.css">

    • @import방식: 링크방식으로 연결해놓은 css문서 안에 또 다른 css 문서를 가져와 연결하는 방식. 연결되어있는 css가 연결되어있어야지만 css가 작동된다. 고의로 연결을 늦게하고싶을때 쓰기는 하지만 사용을 권장하지는 않음.
      @import url("./box.css");
      div {
      	font-size: 100px;
      }

  • css 선택자
    • 기본선택자
      • 전체 선택자: 모든 요소를 선택.
         * {
        	color: blue;
         }
      • 태그 선택자: 태그 이름의 요소를 선택.
        li {
          color: blue;
        }
      • 클래스 선택자: class로 지정한 요소를 선택.
        <!--클래스가 apple일 경우-->
        .apple {
          	color: red;
        }
      • 아이디 선택자: id로 지정한 요소를 선택.
        <!--id가 banana일 경우-->
        #banana {
        	color: yellow;
        }
    • 복합선택자
      • 일치 선택자: 선택자 a와 b를 동시에 만족하는 요소를 선택하는 것.
        span.orange {
        	color: red;
        }
        <!--순서를 바꿔서 작성하면 하나로 인식하기 때문에 순서를 제대로 적는것이 중요함!-->
      • 자식 선택자: 선택자 a의 자식 요소 b를 선택.
        ul >.orange {
        	color: red;
        }
      • 하위(후손) 선택자: 선택자 a의 하위('띄어쓰기'가 선택자의 기호임.) 요소 b를 선택.
        div .orange {
        	color: red;
        }
      • 인접 형제 선택자: 선택자 a의 다음 형제 요소 b 하나를 선택하는 것.
        .orange + li {
        	color: red;
        }
        <!--인접 형제 선택자는 쓰는곳이 많으니 꼭 기억해두기!-->
      • 일반 형제 선택자: 선택자 a의 다음 형제 요소 b 모두를 선택하는 것.
        .orange ~ li {
        	color: red;
        }
    • 가상선택자
      • HOVER: 선택자 a요소에 마우스 커서가 올라가 있는 동안 선택되는 것.
        a:hover {
        	color: blue;
        }
      • ACTIVE: 선택자 a요소에 마우스를 클릭하고 있는 동안 선택되는 것.
        a: active {
        	color: red;
        }
      • FOCUS: 선택자 a요소가 포커스되면 선택되는 것.
        input:focus {
        	background-color: blue;
        }
        <!--focus는 HTML 대화형 콘텐츠(input, a, button, label, select 등)에서만 사용될 수 있다. 하지만 tabindex를 통해 HTML 대화형 콘텐츠이외에 태그도 포커스가 될 수 있는 요소를 만들 수 있음.-->
        <!--*tabindex: tab키를 통해 포커스 할 수 있는 순서를 지정하는 속성. 순서로 -1이 아닌 다른 값을 넣는 것은 흐름을 방해하기 때문에 권장X-->
      • FIRST CHILD: 선택자 a가 형제 요소 중 첫째라면 선택되는 것.
        .fruits span:first-child {
        	color: red;
        }
      • LAST CHILD: 선택자 a가 형제 요소 중 마지막이라면 선택되는 것.
        .fruits h3:last-child {
        		color: red; 
        }
      • NTH CHILD: 선택자 a가 형제 요소 중 n번째라면 선택되는 것.
        .fruits *:nth-child(2) {
        	color: red;
        }
        <!--fruits라는 클래스에서 2번째라는 뜻-->
        .fruits *:nth-child(2n) {
        	color: red;
        }
        <!--n은 0부터 시작하며 짝수번째들이 선택됨-->
        .fruits *:nth-child(2n+1) {
        	color: red;
        }
        <!--n은 0부터 시작하며 홀수번째들이 선택됨-->
        .fruits *:nth-child(n+2) {
        	color: red;
        }
        <!--n은 0부터 시작하며 2번째부터 전부 선택됨-->
    • 부정 선택자
      • NOT: 선택자 a가 아닌 b 요소를 선택되는 것.
        .fruits *:not(span) {
        	color: blue;
        }
        <!--span이외에 태그들이 선택됨.-->
    • 가상 요소 선택자(인라인 요소임!)
      • BEFORE: 선택자 a 요소의 내부 앞에 content를 삽입. (많이 사용되니 꼭 알아두기!)
      • AFTER: 선택자 a 요소의 내부 뒤에 content를 삽입.
        .box::before or ::after {
        	content: "원하는 내용";
        }
        <!--content는 내용이 없더라도 꼭 작성해줘야함!-->
    • 속성 선택자
      • ATTR: 속성 a를 포함한 요소 선택
        [type] {
        	color: blue;
        }
      • ATTR=VALUE: 속성 a를 포함하고 값이 x인 요소 선택.
        [type="어떤 요소인지"] {
        	color: blue;
        }
  • 스타일 상속: 글자/문자 관련된 속성들은 상속이 된다.(모든것이 다 되는것임 아님!)
    ex) font-style, font-size, color, text-align, line-height 등.

  • 강제 상속
    • 선택자 우선순위: 같은 요소가 여러 선언의 대상이 된 경우 어떤 선언의 우선 적용할지를 결정하는 방법.

      • 점수가 높은 선언이 우선!
      • 점수가 같다면, 가장 나중에 작성된(나중에 해석되는)것이 적용됨.

      <점수표>
      전체선택자: 0점
      태그선택자: 1점
      class 선택자: 10점
      id 선택자: 100점
      인라인 선언: 1000점
      !important: 무한대(우선순위에서 1등, 하지만 많이 쓰는걸 추천하지않음.)
      부정선택자는 0점으로 침.

2. css 속성

  • 박스모델
    • width, height: 요소의 가로, 세로 너비
      • 기본값: auto
      • 단위: px, em, vw 등
    • max-width, max-height: 요소가 커질 수 있는 최대 가로, 세로 너비
      • 기본값: none
      • 단위: px, em, vw 등
    • min-width, min-height: 요소가 작아질 수 있는 최소 가로, 세로 너비
      • 기본값: 0
      • 단위: px, em, vw 등
    • margin: 요소의 외부 여백을 지정하는 단축 속성
      • 기본값: 0
      • 음수 사용 가능(자주 사용되지는 않지만 유용하게 쓰일 수 있음.)
      • 가로, 세로 너비가 있는 요소의 가운데 정렬 가능
    • padding: 요소의 내부 여백을 지정하는 단축 속성
      • 기본값: 0
      • 요소의 크기가 커짐.
    • border: 요소의 테두리 선을 지정하는 속성(테두리 선이 두꺼워지면 요소의 크기도 커짐)
      border: 선-두께 선-종류 선-색상;
      • border-width: 테두리 선의 두께
      • border-style: 테두리 선의 종류(solid와 dashed를 가장 많이 사용)
      • border-color: 테두리 선의 색상(Hex 색상코드를 가장 많이 사용하며 RGB&RGBA도 사용하니 알아두기)
    • border-radius: 요소의 모서리를 둥글게 깍을 때 사용하는 속성
      • 기본값: 0
      • 단위: px, em, vw 등
    • 방향: margin, padding, border, border-radius는 원하는 곳만 요소를 지정할 수 있음.
      속성이름: 10px;(전체에 모두 지정)
      속성이름: 10px 10px;(위&아래 왼&오)
      속성이름: 10px 10px 10px;(위 왼&오 아래)
      속성이름: 10px 10px 10px 10px;(위 오 아래 왼/시계방향)
    • box-sizing: 요소의 크기 계산 기준을 지정
      • 기본값: content-box(요소의 내용으로 계산)
      • border-box: 요소의 내용+padding+border로 계산
    • overflow: 요소의 크기 이상으로내용이 넘쳤을 때, 보여짐을 제어하는 속성
      • 기본값: visible(넘친 내용을 그대로 보여줌)
      • hidden: 넘친 내용을 잘라냄.
      • scroll: 넘친 내용을 잘라냄과 동시에 스크롤바 생성(x축,y축이 같이 생성)
      • auto: 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
    • display: 요소의 화면 출력 특성
      • 이미 지정되어 있는 값: block, inline, inline-block
      • 따로 지정해서 사용하는 값: flex, grid, none
    • opacity: 요소 투명도
      • 1: 불투명 상태
      • 0~1: 0부터 1사이의 소수점 숫자
  • 글꼴
    • font-style: 글자의 기울기
      • 기본값: normal
      • italic: 이텔릭체
    • font-weight: 글자의 두께
      • 기본값: normal, 400
      • 두껍게: bold, 700
      • 100~900: nomal과 bold 이외의 두께
    • font-size: 글자의 크기
      • 기본값: 16px
      • 단위: px, em, rem 등
    • line-height: 한 줄의 높이, 배수로 쓰는걸 권장함(하지만 회사마다 다를수도 있음.)
      • 기본값: nomal
      • 숫자: 요소의 글꼴 크기에 배수로 지정
      • 단위: px, em, rem 등
    • font-family: 글꼴 지정(띄어쓰기와 특수문자가 있는 경우 큰 따옴표로 꼭 묶어야함)
      font-family: 글꼴1, "글꼴2", ... 글꼴계열(필수작성);

</ 2주차를 마치며>

이번 2주차 강의들을 들으면서 사용방법만 알고 기본적인 개념을 모르는 나를 보면서 내가 국비지원학원에서 css를 자세하게 배우지 않았었구나를 깨달았다. 앞으로 남은 css강의를 들으면서 더 자세하게 알아가는 시간을 가져야겠다.

profile
웹퍼블리셔를 꿈꾸고 있습니다✨

0개의 댓글