JudithHopps JudithHopps

1. CSS 초기 설정 root 스타일 시트에 웹폰트, 기본 변수 설정 및 다른 스타일 시트를 import 한다. 2. CSS 인트로 배경 설정 a. 모바일 @media (max-width: 768px) { .intro { height: 100vh; } } b. 데스크탑 /* 데스크탑 */ @media (min-width: 769px) { .intro { height: 500px; } } c. dark 버전 .intro__dark { position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-align: center; background-color: rgba(0, 0, 0, 0.5); } ==> dark로 할 부분을 따로 구역을 나눌 것 (opacit..

유명 프론트엔드 프레임워크들 👉 Bootstrap 👉 UIkit 👉 Materialize 👉 Bulma 🤔 프론트엔드 프레임워크를 쓰는 것이 좋을까요? 장점: 디자인 과정 없이 유려한 요소들을 빠르게 이용 가능 단점: 무거워지는 사이트, 커스터마이징시 복잡해짐 결론: 디자이너 부재시, 대형 프로젝트가 아닐 시 적합 아이콘 라이브러리 👉 Font Awesome 👉 Google Fonts Icons

clip 속성은 요소의 어느 부분이 시각적으로 보이도록 할지를 지정합니다. rect 함수 안에 top, right, bottom, left 값을 순서대로 넣어 위치와 크기를 조절합니다. position이 absolute 또는 fixed로 되어 있어야 작동합니다. clip은 sr-only 등에서 요소를 감출 때 사용됩니다. 그러나 요소를 잘라내는 용도 자체로는 더 새로운 속성인 clip-path가 보다 유용합니다. clip-path는 position 값에 상관없이 사용될 수 있습니다. clip 속성은 deprecated되었으므로 이후로는 사용하지 않는 것이 좋습니다. 웹 표준에서 탈락되었으므로 향후 지원되지 않을 수 있습니다. scroll-snap 관련 속성 scroll-snap-type 부모 요소에 스크..

적응형 웹 vs 반응형 웹 적응형반응형 설명 화면 크기 따라 다른 페이지를 보여줌 화면 크기에 따라 요소들을 변화시킴 예시 네이버 애플 장점 각 화면 크기에 집중하여 작업 가능 하나의 페이지로 여러 크기에 대응 가능 단점 페이지를 두 개를 만들어야 함 컨텐츠가 복잡할 경우 작업하기 어려움 /* 스마트폰 */ @media (max-width: 480px) { section { background-color: tomato; } .mobile { display: inherit; } } /* 저해상도 태블릿 */ @media (min-width: 481px) and (max-width: 767px) { section { background-color: olivedrab; } .low-tablet { displa..

1. transform 속성 👉 MDN 문서 보기 주위 요소들에 영향을 끼치지 않으면서 요소의 모습을 바꿉니다. ex) scale: 크기 rotate(45deg) : 각도translate (x,y) : 위치skew(0deg, 30deg) : 왜곡 2. transition 속성 👉 MDN 문서 보기 👉 cubic-bezier 값 생성기 transiton 속성은 CSS 값이 달라질 때 요소에 어떤 효과로 반영될지 지정합니다. 속성, 지속시간, 시간함수, 지연시간 순으로 값을 넣을 수 있습니다. 주의! 적용할 CSS 속성이 이미 기존값이 적용되어 있어야 동작합니다. ex) transition : left 2s ease-in / background-color 1s /all 1s 3. animation 속성 👉 ..

1월 - html/ css 복습 (~1/8) : 1월 8일 완강 제대로 파는 HTML & CSS - by 얄코 - 인프런 | 강의 코알못도 따라올 수 있는 친절하고 쉬운 강좌! 현업 개발자는 HTML & CSS 박사로 들어주는 끝판왕 강좌!, - 강의 소개 | 인프런... www.inflearn.com - javascript 복습 (~1/ 15) 1월 15일 완강 제대로 파는 자바스크립트(JavaScript) - by 얄코 - 인프런 | 강의 코알못도 따라올 수 있는 친절하고 쉬운 강좌! 현업 개발자는 자바스크립트 박사로 들어주는 끝판왕 강좌!, - 강의 소개 | 인프런... www.inflearn.com - javascript 프로그래머스 Lv.0 100문제 (~1/24) 1월 26일 문제풀이 완성 -..

1. 부모 적용 속성들 display : block / grid grid-template-columns[rows] : 1fr 1fr 1fr 100px gap grid-auto-row : auto / minmax(160px,auto) / justify-items align-items 2. 자식 적용 속성들 grid-column grid-row grid-column grid-row justify-self align-self 3. grid 레이아웃 실습 : 초기 모습) 실습 과정) 개발자 도구의 grid 클릭 body { margin: 0; } main { width: 100vw; } main > * { padding: 0.8em; color: slateblue; background-color: lavende..

float 속성에 left 또는 right 값을 주면 매우 독특한 형태와 기능을 갖게 됩니다. 먼저, 해당 요소는 '붕 뜬' 상태가 되어서, 나란히 배치된 요소들 가운데 자리를 차지하지 않게 됩니다. 때문에 다음에 오는 블록 요소들이 자리에서 밀려나지 않고, 그 아래로 들어가버리게 되죠. 그러면서도 특이하게도, 텍스트 등의 인라인 요소들은 float 요소들에 밀려나게 됩니다. 그리고 다른 float된 요소들 또한 마찬가지죠. 또한 해당 요소가 인라인일 경우 블록과 같은 속성을 갖게 되어, CSS로 높이와 너비 등을 적용할 수 있게 됩니다. 물론 float 상태가 되므로 자리는 같은 float끼리만 차지하게 되죠. clear 속성을 이전의 float 요소들과 같이, 또는 both로 적용하면 그들 밑으로 들..