유데미부트캠프 #프론트엔드 #백엔드 #개발부트캠프

오늘은 웹사이트에서 자주 사용하는 form HTML에 대해서 학습하였다. 대표적으로 많이 사용하는 태그들과 속성들을 정리해보고자 한다. inherit ✓ html HTML 문서의 최상위 요소 ✓ :root 문서의 최상위 요소를 나타내는 의사 클래스입니다 ✓ * 모든 요소를 선택하는 유니버설 선택자입니다. html,root선택자는 하위로 상속되어 적용되고, * 선택자는 바로 모든 요소에 적용된다! transition 요소의 특정 속성이 변할 때 해당 변화를 부드럽게 처리하는 데 사용한다. transform 요소의 변환(이동, 회전, 크기 조절 등)을 지정하는 데 사용한다. 2D, 3D 변환 모두 다룰 수 있다! ⭐️ 전환을 구현하는 코드는 transtition을 트리거하는 이벤트가 아니라, 요소의 초기 상..

오늘은 반응형 웹사이트 만들기에 대해 배웠다. 이 또한 중요한 개념들이 많으니 한번 정리해보자 데스크탑 뿐만 아니라 태블릿, 스마트폰 등 다양한 기기에서 접속할 수 있기 때문에 기기의 화면에 맞춰 유동적으로 웹 화면을 구성해야한다. 이렇게 만드는것이 반응형 웹사이트 만들기이다! Unit 저번 시간까지만해도 고정적인 px단위를 사용하였다. 반응형 웹페이지를 만들땐, 고정값인 px은 별로 적합한 방법은 아니다. 왜냐하면, 고정적인 px은 화면의 크기가 변하거나, 브라우저 설정에서 아무리 글꼴 설정을 크게 작게 변경하여도 변경되지 않는다. px pt % em rem vh, vw CSS의 Unit의 종류는 다음과 같다. % (퍼센트) Parent element 기준 상대 크기 유동값 Grid 잡기 & 미디어 개..

오늘은 지금까지 배운 CSS 레이아웃, positioning을 사용하여, 다음과 같은 두 페이지를 완성하였습니다. Header의 레이아웃이 조금 어렵다고 느껴서 다시 한번 정리해보고자 합니다. header { display: flex; justify-content: space-between; align-items: center; padding: 15px 60px; position: absolute; box-sizing: border-box; width: 100%; } 먼저, 확실히 짚고 넘어가야할 것이 있다. width:100%라는것은 부모요소의 크기(border,margin,padding)을 포함한 값이 아니라, content의 크기만을 상속받는다. 이걸 혼동하여 알고 있었다...🙀 위 사진과 같이 h..