본문 바로가기

css4

React에서 Styled Component 사용법 Styled-Components 사용법 특징 자바스크립트 파일 안에 CSS를 작성하는 형태 (emotion과 대체 가능) .css파일을 따로 만들지 않아도 된다. props나 자기 자신 특정 가능. 환경 설정 $ yarn add styled-components 예제 코드 import React from 'react'; **import styled, { css } from 'styled-components';** const Box = styled.div` /* props 로 넣어준 값을 직접 전달해줄 수 있습니다. */ background: **${props => props.color || 'blue'};** padding: 1rem; display: flex; `; const Button = styled.. 2022. 4. 22.
HTML,CSS,JS : 정적인 Youtube mobile로 반응형 웹사이트 clone coding Youtube 정적인 웹사이트 구현 현재는 정적으로 구현하였으나 추후 youtube api를 가져와서 동적으로 만들 계획이다. url: https://jun7867.github.io/YOUTUBE_MOBILE/ Mobile에서 768px 이하 일때 768px 이상일때 https://github.com/jun7867/YOUTUBE_MOBILE jun7867/YOUTUBE_MOBILE Youtube mobile clone coding (Html, Css). Contribute to jun7867/YOUTUBE_MOBILE development by creating an account on GitHub. github.com www.youtube.com/watch?v=67stn7Pu7s4&ab_channel=%.. 2020. 8. 17.
CSS: Position 정리 (Static, relative, absolute, sticky, fixed) CSS: Position 정리 (Static, relative, absolute, sticky, fixed) 1. Static (position 기본값) -top bottom left right 값을 지정해줘도 영향을 받지 않는다. -HTML에서 표기된 순서대로, 들어있는 순서대로에 맞게 포지션이 결정 2. relative -원래있던 공간(예를들면, 자신이 속해있는 parent box안) 유지하면서 위치 이동. -기존의 자리에서 top bottom left right의 값에 영향을 받는다. 3. absolute -원래있던 자리(속해있는 박스 안에서 위치 이동하지 않고) static이 아닌 parent를 찾아 거기서 이동한다. (예를들면, body로 부터 이동됨) *부모의 사이즈에 따라 사이즈가 변동된다... 2020. 7. 17.
HTML CSS JS tip 정리 메타데이터:요소 - 메타데이터는 데이터를 설명하는 데이터이다. 그리고 HTML에서 문서에 공식적으로 메타데이터를 적용하는 방법이 있습니다. 다음과 같이 Head안에서 html을 설명해주는 역할을 합니다. name 은 메타 요소가 어떤 정보의 형태를 갖고 있는지 알려줍니다. content는 실제 메타데이터의 컨텐츠입니다. meta 자세한 설명 : https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML head 태그에는 무엇이 있을까? HTML의 메타데이터 HTML의 head는 페이지를 열 때 웹 브라우저에 표시되지 않습니다. head는 title 같은 페이지나, CSS의 링크(HTML 컨텐츠.. 2020. 7. 15.