: ) Web41 [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. [Sass 실습3] Bootstrap을 이용한 컬럼 레이아웃 만들기 (mixin, nesting 문법 이용) ▶ Bootstrap에서 쓰는 '컬럼' 클래스가 있다. class="row"라는 이름의 박스안에서 col을 사용하면 정확히 가로폭이 X등분 된다. ⭐ row는 전체를 12등분으로 나눔 [결과 화면] [HTML] 1 of 2 2 of 2 1 of 3 2 of 3 3 of 3 1 of 4 2 of 4 3 of 4 4 of 4 [SCSS] div { box-sizing: border-box; } @mixin column($너비비율) { float: left; width: $너비비율; padding: 15px; border: 1px solid gray; margin-top: 10px; background-color: lightgoldenrodyellow } .row { // Nesting 문법 .col-6 { .. 2023. 12. 14. [Sass 실습2] extend, mixin 문법을 이용해 alert 박스 만들기 [결과 화면] [HTML] Well done! You successfully read this important alert message. Heads up! This alert needs your attention, but it's not super important. Warning! Better check yourself, you're not looking too good. [SCSS] // mixin, extend 이용 $초록 : #298F07; $파랑 : #0067A3; $노랑 : #FFD400; %btn { padding: 5px; margin: 5px; border: 2px solid black; border-radius: 10px; } @mixin 색깔($버튼색깔, $글씨색깔){ backgro.. 2023. 12. 13. 이전 1 2 3 4 5 ··· 7 다음
