Front-end Developer/CSS (6) 썸네일형 리스트형 HTML과 CSS로 프로필 만들기 📚 2023 10-27 [ 프로필 정보 만들기] 오늘은 조금 다른 디자인의 프로필 정보를 만들어 봤다. 부트캠프 다니면서 이때까지 배운 CSS와 조금 알고 있던 지식의 CSS를 합쳐서 만들었다. 완성되고 확인해 보니 첫날에 만들었던 프로필 디자인보다 쪼금(?) 괜찮아 보였다. 📌 따라 만들 이미지 구하기 먼저 내가 만들 프로필 이미지를 구해준다. 따라 만들 이미지 구하는 건 많은 사이트들이 있으니 편한 데로 이용하면 된다. 나는 핀터레스트에서 이미지를 찾았다. 검색창에 "CSS프로필"이라고 치면 다양한 프로필들이 나오는데 이미지를 캡처해서 따라 만들었다. https://www.pinterest.co.kr/ Pinterest 요리법, 집 꾸미기 아이디어, 영감을 주는 스타일 등 시도해 볼 만한 아이디어를 .. [CSS] calc() 함수 사용법 📚calc() 란? calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수이다. 반응형 웹이나 모바일 코딩을 하게 되면 사용되는 함수이다. width: calc(50% - 20px); 위의 예에서 'with' 속성은 50%에서 20픽셀을 뺀 값으로 설정된다. calc() 장점 유연성 간결성 동적 레이아웃 가독성 등 📌 clac문제 두 개의 박스가 있고, 각각의 박스는 화면 전체의 절반 폭을 가지고 있다. 그리고 각 박스의 좌우에는 `10px`의 여백이 있다. `calc`함수를 사용하여 이 두박스의 폭을 설정하는 CSS 코드를 작성해보시오. (정답은 하단) 📌Clac 팁 calc(50% - 20px)를 작성하면 더하기(+), 빼기(-) 기호는 띄어쓰기(공백)가 필수이며, 곱하기(*) .. CSS 프로필 만들어 보기 📚 2023 10-26 [ 프로필 만들기 ] 부트캠프 수업 마치고 카페에서 혼자서 CSS를 활용해서 프로필을 간단하게 만들어 봤다. 만들고자 하는 프로필이다. 📌 HTML 코드 MetaMask @metaMask Lorem ipsum dolor sit amet consectetur 6/8 Organizations 4K Followers Follow 📌 CSS 코드 html { background-color: gray; } body { height: 100%; } .main-box { display: flex; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .main-container { wi.. 이전 1 2 다음
