나보단 잘하자

어떤 모양에 포토샵의 마스크처럼 사진을 덮어 씌우고 싶다면 아래와 같은 방법을 쓴다. 위의 검정색 부분(.container)을 사진(img)으로 채워보자. 저 사진을 이용한 이유는 사진의 width, height 구별을 위함임. index.html sample.css * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; align-items: center; justify-content: center; height: 100vh; } section { display: flex; align-items: center; justify-content: center; height: 80vh; width: 100%; background: ..

이제는 더이상 웹페이지는 절대적으로 지정된 크기로 코딩돼서는 안된다. 모바일로, 태블릿으로, 노트북으로 그리고 컴퓨터로 심지어 스마트 워치 등 화면의 사이즈는 날이 갈 수록 다양해지고 있기 때문에 절대적 크기는 사용자 경험에 큰 불편을 가져다 준다. 한 예로, 2G 폰을 쓰던 시절, 인터넷에 들어가면 컴퓨터에서 보던 화면이 그대로 깨알같이 그 작은 화면으로 들어갔던 경험을 해본 적 있을 것이다. 또한, 스마트폰에서도 pc버전으로 보기를 누르면 그렇게 나온다. 그러나 이는 크게 불편하기 때문에 당연히 반응형으로 제작해야 한다. 단위는 절대단위와 상대단위로 나뉜다. 절대단위(absolute unit) css에서의 절대단위는 보통 px(픽셀), pt(포인트)를 많이 쓴다. 그렇지만 이 단위들은 화면의 크기가 ..

아이폰 유저로서 사파리로 웹앱의 상태를 확인 한 적 있었다. 내가 디자인한 버튼이 아닌 전혀 촌스러운 입체적 모양으로 바뀌어 있었다. 이런 경우, 아래와 같은 방법을 이용하면 해결된다. .controlInWeb { -moz-border-radius: 2em;/* 파이어폭스 */ -ms-border-radius: 2em;/* IE */ -o-border-radius: 2em;/* 오페라 */ -webkit-border-radius: 2em;/* 사파리, 크롬 */ } 출처: https://stackoverflow.com/questions/18083056/what-are-moz-and-webkit

가끔 버튼 클릭 시 사라지지 않는 테두리를 없애고 싶다. 이를 없애기 위해서는 아래와 같은 방법을 사용하자. 버튼을 클릭할 때는 :focus로 설정한다. button.firstBtn:focus{ border: none; outline:none; } 버튼에 마우스를 가져다 댈 때의 효과는 :hover를 이용한다.