민희의 코딩일지

1- 반응형 웹이란? 다양한 디바이스에서 접속했을 때 기기의 viewport 규격에 반응하여 레이아웃이 자동으로 변경되는 웹페이지이다. 2- 미디어 쿼리 viewport의 너비에 따라 웹사이트의 스타일 시트를 수정할 수 있게 해주는 CSS의 기능이다. @media screen and (max-width: 500px) { /* 스크린의 너비가 500px 이하일 경우 적용시킬 스타일 시트를 작성한다. */ } @media: 미디어 쿼리를 사용한다. screen: 미디어 타입이다. 이 페이지가 디지털 화면, 즉 screen에 노출되었을 때 중괄호 안에 입력한 스타일 시트를 적용한다. max-width: 500px: viewport 너비가 500px 이하일 경우 해당 스타일 시트를 적용한다. and: scree..

1- transition (전환효과) css 속성을 이용한 변화의 전, 후 사이에 애니메이션을 추가해서 움직임을 부드럽게 만들어줄 수 있다. a. transition-property 어떤 property에 transition을 적용할 것 인지를 지정한다. transition-property: color, transform b. transition-duration transition에 걸리는 시간을 지정한다. transition-duration: 0.2s transition에 걸리는 시간을 지정한다. duration은 s 혹은 ms 단위로 지정이 가능하다. c. transition-timing-function transition의 속도 패턴을 지정한다. transition의 변화가 일정한 속도로 일어날 것..

1- background a. background-color 요소의 배경에 색상을 지정한다. background-color: #f12db0 | rgb(122,122,123); b. background-image 요소의 배경 이미지를 한 개, 혹은 여러개 지정한다. background-image: url("이미지 경로"); 이미지 중첩하기 background-image: url(”이미지 경로”), url(”이미지 경로”); 백그라운드 이미지는 한개만 지정할 수도 있지만, 여러개의 이미지를 중첩시키는 것도 가능하다. 앞에 있는 것이 가장 위에 깔리고, 뒤에 있는 것이 아래에 깔리게 된다. 그라데이션 배경 만들기 (linear-gradient, radial-gradient, conic-gradient) /* ..

CSS 적용하기 전 위 피그마 화면과 동일하게 만들기 1. input 태그 만들기 .signUp { width: 466px; height: 56.35px; margin-bottom: 21px; border: 1px solid #CFCFCF; border-left-width: 0; border-right-width: 0; border-top-width: 0; border-bottom-width: 1; } .signUp:hover { border-bottom-color: #0068FF; } 마우스를 올리면 input 태그의 밑줄이 파란색으로 바뀐다. (따로 hr 태그를 작성하지 않고 input 태그에서 박스의 아랫선만 보이도록 설정하였다.) 이렇게 완성!