웹개발교육10 [CSS] Loading bar - 에이블런 프론트엔드부트캠프 5일차 1. Loading bar 1지금까지 배운 것을 활용해 원형 로딩바를 만들었다. 위치는 position을 활용해 설정했고, 로딩바가 돌아가는 것은 transform과 transition을 활용해 개발했다..box1 { width: 300px; height: 300px; border: 1px solid black;}.box1 .loading { width: 80px; height: 80px; border-radius: 50px; border: 3px solid black; margin: 110px auto; position: relative; transition: transform 100s linear 0s; box-sizing: border-bo.. 2024. 7. 19. [Task] 과제 리팩토링 - 에이블런 프론트엔드부트캠프 4일차 이제까지 배운 내용을 바탕으로 새롭게 2일차 과제의 코드를 리뷰하고 리팩토링 해보았다. 1. 가로형 상단 네비게이션 바 리팩토링#cloud-logo { float: left; color: #413FD0; margin-left: 25px; margin-top: 5px;}nav > *{ text-align: end; float: right; margin-right: 25px; margin-top: 25px; color: #B0AFEB;}nav p { color:#413FD0; font-weight: 500; font-size: 16px; text-align: center; margin-top: 25px;}nav img { wi.. 2024. 7. 19. [CSS] CSS 속성 2.5 - 에이블런 프론트엔드부트캠프 4일차 1. FullScreenwidth: 100%, height: 100vh로 설정하면 화면의 최대 크기가 된다.width는 부모 요소가 명시적으로 크기가 지정되어 있지 않아도 적용이 되어 전체 너비를 뜻하게 되는데, height의 경우는 100%로 설정했어도 부모 요소가 명시적으로 높이가 설정되어 있지 않은 경우 적용이 되지 않기 때문에 width는 100%를 사용하고, height는 100vh를 사용한다. 2. inline-block기본적으로 inline 속성처럼 나란히 배치되지만, block 속성처럼 width와 height 속성 지정이나 margin과 padding속성의 상하 간격 지정이 가능하다. .other { width: 400px; border: 1px solid black; m.. 2024. 7. 18. [CSS] CSS 속성 3 - 에이블런 프론트엔드부트캠프 3일차 1. filter filter를 이용해 화면의 명도, 채도, 밝기 등을 변경할 수 있다.속성명속성값설명filterblur요소의 흐림 효과를 조절brightness요소의 밝기를 조절contrast요소의 명도 대비 조절grayscale요소의 흑백 조절hue-rotate요소의 색상 단계 조절invert요소의 색상 반전 단계를 조절saturate요소의 채도를 조절sepia요소의 갈색 톤 단계 조절/* 값이 커질수록 효과 커짐 */section article:nth-of-type(1) { filter: blur(10px);}/* 1보다 작아지면 어두워짐 */section article:nth-of-type(2) { filter: brightness(2);}/* 100보다 작아지면 명암대비효과 감소.. 2024. 7. 17. [Task] 2일차 과제 - 에이블런 프론트엔드 부트캠프 2일차 2일차 과제는 포트폴리오를 제작할 때 사용하는 프로필을 웹으로 구현하는 것이다. 나는 핀터레스트에서 프로필 레이아웃을 하나 구해서 제작하려고 마음 먹었다. 그런데, 아래와 같은 영상이 나의 시선을 끌었다.https://pin.it/32JCaihZ5 Pin on dashboardProfile Edit - Dashboard designed by Medo Ismail ©. Connect with them on Dribbble; the global community for designers and creative professionals.kr.pinterest.com edit 버튼을 누르면 자신의 프로필이 수정 가능한 상태로 변화하는 짤막한 영상이었지만, 나를 끌어들이기에는 충분하고도 남는 영상이었다. 레퍼런.. 2024. 7. 17. [CSS] CSS 속성 2 - 에이블런 프론트엔드 부트캠프 2일차 1. float float 속성은 block 속성값을 가진 요소를 가로로 배치되도록 만들 수 있는 속성이다. 속성명속성값설명floatleft요소를 왼쪽에 배치right요소를 오른쪽에 배치 float를 적용하지 않은 block 속성의 두 사각형은 위와 같이 출력된다. 하지만 float를 넣는다면 아래와 같이 두 사각형이 가로로 나란히 출력되는 것을 볼 수 있다. section { width: 1000px; margin: 50px auto; border: 10px solid black; box-sizing: content-box;}section article { width: 500px; height: 500px; float: left;}article:nth-of-type.. 2024. 7. 16. 이전 1 2 다음
