[CSS] Box Sizing 속성
·
☁️ 구름 X kakao DeepDive/☁️ HTML CSS JS
box-sizing 속성: 말 그대로 박스의 크기를 어떤 것을 기준으로 계산할지 정하는 속성.box-sizing: content-box | border-box | initial | inheritcontent-box : 콘텐츠 영역을 기준으로 크기를 정한다콘텐츠 박스 자체에 300테두리 10픽셀⇒ 총 320border-box : 테두리를 기준으로 크기를 정한다테두리까지 합해서 300콘텐츠는 280픽셀이 됨initial : 기본값inherit : 부모 요소 속성값 상속받음사용해본 결과 box-sizing을 사용하지 않았을 때의 기본 값은 content-box인것 같다.
[Andrioid] 아이디 비밀번호에 숫자, 영어만 입력하도록 제한
·
🥦 Android
android:digits="0123456789qwertzuiopasdfghjklyxcvbnm" EditText에 위의 속성을 추가하면 된다. 간단!
[CSS] 이미지에 그라디언트 효과를 주고싶어! mask-image: linear-gradient
·
☁️ 구름 X kakao DeepDive/☁️ HTML CSS JS
넷플릭스 클론코딩을 하는데 메인 광고 이미지가 그라디언트 효과로 사라지는것을 구현하고 싶었다.  위의 화면은 내가 html/css만으로 구현한 화면인데, 메인 이미지의 아래 부분을 보면 이미지가 서서히 사라지는것이 보일것이다. 구글링을 통해 mask-image 속성중 linear-gradient를 사용하면 된다는것을 알게되었고, 이번에 공부한 내용을 공유하고자 포스팅을 작성한다.mask-image포토샵을 다뤄봤다, 또는 영상 처리를 공부해보았다. 하는 사람은 '마스크'를 들어보았을것이다.이미지 합성을 할때 사용한다 생각하면 쉬울건데, 정확한 정의는" 요소의 마스크를 정의하여 보이는 영역과 숨겨지는 영역을 결정한다. "라고 보면 된다. : linear-gradient그중 linear-gradient 속성은..
[CSS] Flexbox(1) - Flex와 Container속성
·
☁️ 구름 X kakao DeepDive/☁️ HTML CSS JS
이번 시간에는 레이아웃을 짜는데 사용되는 Flex에 대해 배웠다.그냥 막연하게 사용하기만 하였는데, 이번 기회에 제대로 짚고 원리까지 알고 넘어가보자.이번 포스팅은 컨테이너 속성에 대해 다루고, 다음 포스팅은 아이템 속성에 대해 다루도록 한다.내용이 좀 길 수 도 있다.그럼 킵고잉~~✨Flexbox - 자주 쓰이기 때문에 중요함!: 주로 레이아웃 만들 때 사용. (반응형)반응형 웹사이트를 디자인 할 때 요소의 변화를 위해 사용함.웹사이트를 사용하는 장치 유형에 따라 너비, 높이, 해상도, 방향 등과 같은 동작에서 변경될 때 사용.1차원 레이아웃을 제공함참고로, Grid는 이차원임.Flexbox Components 구성요소Felx Container: display를 flex, 또는 inline-flex로 ..