[개발] Practice/HTML CSS18 [HTML/CSS] Bootstrap 으로 카드 레이아웃 만들기_Grid 💡 실습 포인트! Bootstrap 을 이용하여 반응형으로 카드 레이아웃을 만들어보았다. 아직은 Bootstrap 에서 가져온 레이아웃을 가지고 내가 원하는 디테일을 잡는 데에 시간이 좀 걸리는데 익숙해지면 확실히 하나하나 CSS로 만드는 것보다 편하고 특히 반응형 만들 때 유용할 것 같다. 💜 PC 화면 💜 태블릿 화면 💜 모바일 화면 2022. 3. 1. [HTML/CSS] Landing Page 만들기 💡 실습 포인트! transform 속성의 scale 을 사용하여 마우스 오버를 했을 때 살짝 작아지는 효과를 주었다. 강의를 통해 사진은 그대로 있고 마우스 오버를 할 때 하얗고 두꺼운 테두리를 덮어씌워 애니메이션 효과를 주는 방법도 배웠는데 그렇게 하는 경우 사방의 여백이 날아간 것처럼 보이기 때문에 처음 시작할 때의 padding 값보다 끝날 때의 padding 값을 더 줘야 예쁘더라. 💡 PC 화면 아이콘 배치나 이미지 배치는 이전에 해봤기에 안 어렵겠다싶었는데 뜻밖에도 폰 이미지때문에 반응형으로 웹페이지를 만들 때 대환장파티였다. PC 화면에서 배치하는 것은 문제가 되지 않았지만 반응형의 특성상 가로너비를 조절하더라도 어색하지 않게 배치가 되어야 하는데, position : absolute 와 .. 2022. 3. 1. [HTML/CSS] 상품 레이아웃과 애니메이션 구현하기 💡 실습 포인트! 제일 공을 많이 들였던 부분은 애니메이션 효과이다. 마우스 오버하는 경우 적당한 높이(이미지 높이의 60% 정도)의 가격이 적힌 반투명한 창이 올라오게끔 구현하는 것이었는데 position, transition, transform, opacity, overflow 과 같은 다양한 속성을 조합해서 만들 수 있었다. 💡 PC 화면 PC용 레이아웃 자체를 구성하는 것은 엄청나게 어렵지는 않았다. 회색 박스를 position: absolute 속성을 활용하여 위치조정을 하고있었는데 margin collapse 현상 때문에 애를 먹었고, 해결하고 나니 회색박스와 아이콘이 들어있는 박스의 간격이 제대로 조절되지 않아서 시간이 한참 걸렸다. 다만, 태블릿이나 모바일에서 화면을 보았을 때 어색한 부분.. 2022. 3. 1. [HTML/CSS] 쇼핑 카트 레이아웃 & pseudo-class로 인터랙티브 버튼 만들기 💡 실습 포인트! 레이아웃 디자인은 물론이고 pseudo-class 를 활용하여 특정 행위(마우스 오버, 포커스, 클릭 중 등)에 대한 디자인을 다르게 할 수 있음! 💜 Pseudo-class 셀렉터 .btn:hover { background : chocolate; /*마우스를 올려놓을 때*/ } .btn:focus { background : red; /*클릭 후 계속 포커스 상태일 때*/ } .btn:active { background : brown; /*클릭 중일 때*/ } input:focus { border : 2px solid red; } a:link { color : red; /*방문 전 링크*/ } a:visited { color : black; /*방문 후 링크*/ } pseudo-clas.. 2022. 3. 1. [HTML/CSS] 블로그 글목록 만들기 💡 실습 포인트! 수업의 목적이 HTML/CSS 를 이용한 간단한 배치 및 디자인이어서 그냥 샘플이미지와 내용을 넣었다..ㅎㅎ 💜 Float 속성 /* 빈 div 박스에 clear 속성을 추가하는 방법 */ .left-box { width : 50%; height : 100px; float : left; } .right-box { width : 50%; height : 100px; float : left; } 위와 같이 코드를 작성하면 박스들을 왼쪽 정렬할 수 있음 float 속성은 요소를 뜨게 하므로 다음에 오는 HTML 요소들이 원하는대로 자리를 찾지 못할 수 있으므로 clear 속성을 사용하여 제자리를 찾게 해주어야 함 float: none 을 추가해주는 것도 버그 발생을 줄일 수 있는 방법! fl.. 2022. 3. 1. [HTML/CSS] 내 소개글 적고 꾸며보기 💡 실습 포인트! 수업의 목적이 HTML/CSS 를 이용한 간단한 배치 및 디자인이어서 그냥 샘플이미지와 내용을 넣었다..ㅎㅎ 💜 네모 박스 디자인에 많이 사용하는 CSS 속성 .box { margin : 20px; padding : 30px; border : 1px solid black; border-radius : 5px; } 💜 가운데 정렬 .box { display : block; margin-left : auto; margin-right : auto } 💜 box-shadow /* 문법 */ box-shadow: none | x-position y-position blur spread color | inset | initial | inherit none : 그림자 효과를 없앰 x-position.. 2022. 3. 1. 이전 1 2 다음
