본문 바로가기
728x90

카테고리

 (35)
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)를 작성하면 더하기(+), 빼기(-) 기호는 띄어쓰기(공백)가 필수이며, 곱하기(*) ..
[KDT 포스코x코딩온 10] 웹 풀스택 과정 회고록 (3) | CSS KDT 포스코X코딩온 웹 풀스택 과정 10기 CSS [높이 너비, border, box-sizing, 요소를 숨기는 3가지 방법, overflow] 다양하게 CSS 사용하여 실습하기 postion z-index CSS background 레이아웃의 꽃 display:flex 2023-10.27 ~ 2023.10.28 📚 CSS 📌 높이 너비 [width, height, max-widht, max-height] width : 너비 (px, em, vw 등 단위 ) height : 높이 (px, em, vw 등 단위 ) 반응형 웹 작성 시 많이 사용하는 [max, min width, height] max-widht 최대 가로 너비 max-height 최대 세로 너비 min-widht 요소가 작아질 수 있는 ..
728x90

티스토리툴바