분류 전체보기114 [HTML, CSS] [실습] CSS Grid로 레이아웃 만들기 (모바일 사이즈에서 변형) ▶ 모바일 사이즈에선 박스들이 전부 세로로 진열되어야한다. → media query이용 [큰 화면] [모바일 사이즈 화면] [HTML] [CSS] .grid-container { display: grid; grid-gap: 5px; /* 세로칸 개수, 사이즈 */ grid-template-columns: 1fr 1fr 1fr 1fr; /* 가로칸 개수, 사이즈 */ grid-template-rows: 100px 100px 100px; grid-template-areas: "헤더 헤더 헤더 헤더" "사이드 내용 내용 내용" "사이드 내용 내용 내용"; } .grid-container div { border: 1px solid black; } .grid-nav { grid-area: 헤더; /* 세로선 1-.. 2023. 12. 15. [HTML, CSS] CSS Grid 레이아웃 만들기 ⭐ display: grid; grid를 쓰면 색칠하듯이 자유롭게 박스 배치 가능 직관적 [방법1] 내부박스 크기 조절을 통해 레이아웃 만들기 [HTML] [CSS] .grid-container { display: grid; /* 세로칸 개수, 사이즈 */ grid-template-columns: 100px 100px 100px 100px; /* 가로칸 개수, 사이즈 */ grid-template-rows: 100px 100px 100px; } .grid-container div { border: 1px solid black; } .grid-nav { /* 세로선 1-5까지 차지해주세요 */ grid-column: 1 / 5; } .grid-sidebar { grid-row: 2 / 4; } .grid-.. 2023. 12. 15. [HTML, CSS] [실습] transition & animation으로 navbar만들기 ▶ 문제🔎 1. 마우스 올리면 검은 메뉴 우측 이동 2. 마우스 올리면 우측에 있던 Menu 글자는 가운데로 3. 마우스 올리면 Item 글자는 (1) 우측 이동 (2) 살짝 비틀기 (3) 좌측이동 ⭐ 검은메뉴, Menu는 one-way니까 transition이용 ⭐ Item글자만 @keyframes 이용 [HTML] Menu Item 흔들버튼 + [CSS] /*버튼 */ .ani-btn { padding: 10px; background-color: skyblue; color: white; border: none; border-radius: 5px; font-size: 20px; cursor: pointer; /* 가운데 정렬 */ display: block; margin: 20px auto; } .an.. 2023. 12. 15. [HTML, CSS] navbar에서 위쪽 여백 없애기 ▶ navbar를 만드는데 분명 height를 100%로 했는데 다음과 같이 위쪽 여백이 발생했다. 이는 navbar를 만들 때 모든 요소의 가장 앞에 오게 하기 위해 position: fixed;를 썼는데 여기서 position이 여백을 주고 있었다. ⭐ top과 left를 0을 주어 각각 여백을 0으로 초기화 했더니 해결되었다. position: fixed; top: 0; left: 0; 2023. 12. 15. [HTML, CSS] [실습] transform & animation으로 애니메이션 만들기 ▶ 문제🔎 1. 마우스를 올리면 흔들리는 버튼 만들기 2. 마우스를 올리면 회전하면서 커지는 + 기호 만들기 (좌측 회전 → 우측 회전 + 약간 커지기 후 유지) [HTML] 흔들버튼 + [CSS] .ani-btn { padding: 10px; background-color: skyblue; color: white; border: none; border-radius: 5px; font-size: 20px; cursor: pointer; /* 가운데 정렬 */ display: block; margin: 20px auto; } .ani-btn:hover { animation-name: shake; animation-duration: 0.5s; animation-iteration-count: 2; /* ite.. 2023. 12. 15. [HTML, CSS] [이론] transform & animation으로 애니메이션 만들기 ▶ one-way애니메이션은 그냥 trantition 이용, 그 이상은 @keyframes를 이용한다. ⭐ transform 속성 회전하고 싶을 때 rotate(각도) 좌표 이동하고 싶을 때 translateX(픽셀) : X축 이동 translateY()는 Y축 이동 scale(숫자)는 크기 변화 • transform 속성들 .box { transform : rotate(10deg); transform : translate(10px, 20px); transform : scale(2); transform : skew(30deg); /*transform 두개 이상을 한꺼번에 쓰려면*/transform : rotate(10deg) translateX(30px); } ⭐ @keyframes : 복잡한 애니메이션.. 2023. 12. 15. 이전 1 2 3 4 5 6 ··· 19 다음
