css

할인율 계산 프로그램 html 할인 가격 계산 프로그램 가격 원 할인율 % 계산 Copyright © 2023 : YOON scss(css) html { height: 100%; } body { height: 100%; margin: 0; display: flex; flex-direction: column; } header { text-align: center; } main { text-align: center; display: flex; flex-direction: column; gap: 20px; .wrap { display: flex; justify-content: center; align-items: center; label { width: 100px; } input { width: 150px; ..

1. 상황 이미지를 타원으로 만들려면 overflow: hidden; 이 필요하다. 이 타원 안에 사각형 박스를 띄우고 싶은데 타원 밖을 넘어갈 수가 없다. 이런 상황에서 박스를 타원 밖으로 나가게 만들고 싶다. 2. 해결 부모와 자식 하나만 두고 작업하게 되면 해결이 안된다. 그 사이에 양부모를 하나 더 만들어서 기능을 나눠서 집어 넣게 되면 해결이 가능하다. ( 대신 parent와 parent-parent의 사이즈가 동일하게 지정해줘야한다. ) See the Pen Untitled by tjdsksro90 (@tjdsksro90) on CodePen.

5가지 색상의 RGB 색을 팬톤으로 만들어 주는 웹 사이트 https://color.adobe.com/ko/create color.adobe.com

1. 문제 디자인측에서 버튼 크기를 꼭 320px로 해달라고 한다. 이런 픽스된 사이즈에서 반응형을 할 때 애매한 사이즈에서 오는 곤란함이 있다. 쉽게 생각해 일괄적으로 '320인 버튼'을 media size 320일 때 100%로 바꾸면 될 거 같지만 그렇지 않다. 왜나하면 이 버튼이 좌우 패딩 값이 주어진 박스 안에 있을 수 있고, 또는 그 패딩박스 안에 패딩박스 속에 있을 수 있다. 2. 해결 min-width와 max-width가 있다. 그 둘의 필요성을 작업하면서 별로 느끼지 못했지만 이런 문제를 해결하면서 이해하고 활용하게 됐다. min-width나 max-width는 혼자 주어졌을 때보다 기본 width와 함께 사용할 때 활용도가 높은거 같다.

1. 상황 내용이 길어지면 ( 가로 ) 부분이 내려가게끔 flex를 적용해놨다. 하지만 무슨 이유인지 align-item: center; 을 넣어도 전체공간에서 가운데로 적용한다. 2. 해결 이유는 flex 설명에서 많이 footer을 전체영역에서 바닥으로 보낼 때 사용하는 방법인데 활용하지 못했다. 위아래 margin을 auto로 밀어넣음으로써 문제를 해결했다