패스트캠퍼스 챌린지 29 일차 - 리액트로 만드는 퀴즈 사이트03

0. 공부 인증 

공부 시작 22 : 29

공부 종료 23 : 04

강의를 하나만 듣는다고 하더라도,

실습이 많아서 항상 시간이 좀 오래걸린다....살려줘

 

1. CSS 가상 선택자

::before

::after

-> 엘레멘트 전에 가상 엘레멘트 생성

const Header = styled.h1`
  &::before{
    content : "앞"
  },
  &::after{
    content : "뒤"
  }
`

결과 페이지 

 

보통 after 와 before의 특징

사용의 목적 :: div처럼 보통 사용하고, 스타일을 다듬기 위해서 사용함.

content의 값이 있어야 함. -> content 값이 비어 있으면 가상 선택자도 의미가 없어짐.

& -> 현재 요소를 가르킴.

 

position : absolute를 통해서 다른 div들에 영향을 받지 않게 할 수 있음.

그리고 트랜지션, 트랜스 폼 등 기타 전환 관련 요소들은 찾아볼 필요가 있음.

 

  &::before{
    content : "앞"
    position : "absolute", // 
    width : 100%, // 부모엘레멘트의 크기 가득
    height : 100%,
    top : 0,
    bottom :0,
    left:0,
    right :0,
    background : #dcdcdc,
    border-radius : inherit,
    box-shadow : ,
    transfrom : ,
    transition : ,
    transform-style : preserve-3d
  },

 

또한 더 많은 크롬의 toggle element state 창을 확인하면서 더 많은 기능을 제작할 수 있음.

ex) hover 관련 가상 CSS 등 미리 체험?해볼 수 있음.

해당 기능을 통해서 제작된 코드를 그대로 가져다가 사용하면 됨.

 

 

2. 인트로 페이지 만들기

max-width 를 통해서 최대 가로값을 설정할 수 있음.

margin : 0 auto;를 통해서 가운데 정렬을 할 수 있음.

text-align : center; 을 통해 글자 가운데 정렬 가능.

 

크롬의 개발자 환경을 통해서 CSS 개발환경을 더 좋게 만들 수 있음.

computed 기능을 활용하면 실시간 및 시작적인 자료로 css현 개발 상황을 체크할 수 있음.

 

img alt 요소는 이미지가 로딩이 안될 경우, 사용자에게 전달할 메시지. 또한 시각장애인이나, 컴퓨터에게도 알려줄 수 있음.

img CSS 중 width : inherit 을 사용하면, 부모 요소의 크기에 맞춰짐.

 

퍼블리싱을 할때에 CSS margin 적용시 방향을 통일하는 것이 좋음.

예를 들어서 위아래 위아래 다 하는 것이 아니라,

margin-bottom 만 하던지.. 그런식으로!

 

아래 이미지는 완성된 웹의 이미지!

완성된 페이지

 

 

 

환급 챌린지 (29/30)

 

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는Node.js웹프로그래밍초격차패키지