본문 바로가기

728x90

Front-end Developer

(21)
[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..
10. [HTML] <form>태그, <input>태그.<label>태그 이번 포스트는 form태그, input 태그를 설명하고자 한다. form태그란 HTML 문서에서 사용자의 입력을 서버로 전달하는 기능이다. 태그에는 다양한 속성이 많은데 한번 확인해보자. 먼저 입력 양식은 다음과 같다. 태그

728x90