개발자연습노트

실은 버튼복붙보다는 col, row 이런게 매우 간편해서 Bootstrap을 사용합니다.큰 회사에서 뭐 만들 때도 페이지가 많다면Bootstrap을 안써도 직접 col, row 같은걸 만들어서 사용하는 경우가 많습니다.그래서 Bootstrap 쓰든 안쓰든 col, row 같은 class 사용법은 잘 익혀두는게 중요합니다.       숙제1 : 위 사진처럼 보이는 반응형 레이아웃을 만들어보세요(조건) PC사이즈에서는 사진처럼 4열, 태블릿 사이즈에서는 2열, 모바일에서는 1열로 정렬되게 만들어야합니다. 저는 어떻게 했냐면 각각 다른 사이즈(md,lg,sm) 에서 차지할 column 갯수를 따로따로 설정할 수 있습니다.  설명하다  안녕 안녕 안녕 안녕 간단하게 클래스 두개를 이어붙이면 ..

Boostrap은 프론트엔드 Component Library라고 하여웹페이지에 필요한 버튼, 메뉴, 탭, 모달, 카드 등 필수 요소들을 모아놓은 일종의 CSS 파일입니다.이걸 우리 HTML 파일에 설치하시면 보다  빠른 복붙식 HTML CSS개발이 가능합니다.    ▲ 버전 선택은 상단 Docs 메뉴 선택 뒤에 우측 위 버튼 누르시면 됩니다.5.X 버전으로 맞추고 합시다.  Bootstrap 3, 4버전도 사용가능한데 각각 세부 디자인이 다릅니다.디자인은 다르지만 다들 사용법은 동일해서 5버전으로 합시다.  IE 호환성은3버전은 IE9+4버전은 IE11+5버전은 IE12+ (Edge 브라우저)에서 이용가능합니다.      간단 설치방법  https://getbootstrap.com/docs/5.1/get..

1. 위와 같은 반응형 랜딩페이지를 만들어오십시오 (필요한 이미지는 첨부파일에 있습니다.)    2. 휴대폰 사진은 모바일로 축소시 사진처럼 글자 밑에 위치해야합니다. 3. 휴대폰 사진 뒤의 파란 배경은 색상 gradient가 적용되었습니다.위는 파란색, 밑은 보라색 색상을 단계적으로 적용했는데 어떻게 해야할까요?당연히 안배운건 구글 찾아봐야합니다.   3. 나머지 다른 영역의 모바일 레이아웃은 알아서 자의적으로 만들어옵시다.4. 아이콘은 Font Awesome 등을 활용합시다.5. 버튼에 마우스를 올렸을 때 색상이 바뀐다든지 하는 간단한 디자인을 입혀봅시다.      5. 이 사진엔 간단한 애니메이션을 넣어봅니다. 마우스를 올릴시 하얀색 테두리가 슬그머니 생겨야합니다.포인트는 애니메이션 동작시 이미지 ..