본문 바로가기

전체 글56

[Andrioid] 아이디 비밀번호에 숫자, 영어만 입력하도록 제한 android:digits="0123456789qwertzuiopasdfghjklyxcvbnm" EditText에 위의 속성을 추가하면 된다. 간단! 2024. 11. 22.
[CSS] 이미지에 그라디언트 효과를 주고싶어! mask-image: linear-gradient 넷플릭스 클론코딩을 하는데 메인 광고 이미지가 그라디언트 효과로 사라지는것을 구현하고 싶었다.  위의 화면은 내가 html/css만으로 구현한 화면인데, 메인 이미지의 아래 부분을 보면 이미지가 서서히 사라지는것이 보일것이다. 구글링을 통해 mask-image 속성중 linear-gradient를 사용하면 된다는것을 알게되었고, 이번에 공부한 내용을 공유하고자 포스팅을 작성한다.mask-image포토샵을 다뤄봤다, 또는 영상 처리를 공부해보았다. 하는 사람은 '마스크'를 들어보았을것이다.이미지 합성을 할때 사용한다 생각하면 쉬울건데, 정확한 정의는" 요소의 마스크를 정의하여 보이는 영역과 숨겨지는 영역을 결정한다. "라고 보면 된다. : linear-gradient그중 linear-gradient 속성은.. 2024. 11. 20.
[CSS] Flexbox(2) - Item속성 안녕하세요? 아이템 속성들입니다.딱히 어려운건 없었어요.✨Flex 아이템 속성들 자세히 알아보기✔️order: flex 컨테이너에 나타나는 순서를 제어함order2 가 order 1보다 크므로 뒤로감,order-1이 0보다 크므로 뒤로 감 ✔️flex-grow: 너비를 자동으로 늘어나도록 함.=> 180 픽셀을 나눠가짐. ✔️flex-shrink: 너비를 자동으로 줄어들도록 함.주로 레이아웃을 벗어난 아이템 너비를 분배해서 줄이는데 사용함.flex-wrap: wrap; 속성이 부여된 경우 적용되지 않음 (당연함. 아래로 내려버리기 때문에.)flex-wrap 속성을 적용하지 않거나 nowrap으로 해야함.✔️flex-basis: flex 아이템의 기본 사이즈를 지정하는 속성한꺼번에 또는 하나씩 정의 가능 .. 2024. 11. 18.
[CSS] Flexbox(1) - Flex와 Container속성 이번 시간에는 레이아웃을 짜는데 사용되는 Flex에 대해 배웠다.그냥 막연하게 사용하기만 하였는데, 이번 기회에 제대로 짚고 원리까지 알고 넘어가보자.이번 포스팅은 컨테이너 속성에 대해 다루고, 다음 포스팅은 아이템 속성에 대해 다루도록 한다.내용이 좀 길 수 도 있다.그럼 킵고잉~~✨Flexbox - 자주 쓰이기 때문에 중요함!: 주로 레이아웃 만들 때 사용. (반응형)반응형 웹사이트를 디자인 할 때 요소의 변화를 위해 사용함.웹사이트를 사용하는 장치 유형에 따라 너비, 높이, 해상도, 방향 등과 같은 동작에서 변경될 때 사용.1차원 레이아웃을 제공함참고로, Grid는 이차원임.Flexbox Components 구성요소Felx Container: display를 flex, 또는 inline-flex로 .. 2024. 11. 18.
[Android] MPAndroidchart 그지같은 의존성 추가 차트를 만들어야했다. com.github.mikephil.charting.charts.BarChart이걸 써서 레이아웃을 만들어야했는데 gradle에 의존성을 추가해도 인식이 안되는거다. 돌겠네.  settings.gradle.kts여기에다 dependencyResolutionManagement {// repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)repositories {google() mavenCentral()maven { url = uri("https://jitpack.io") } }}pluginManagement { repositories { google() mavenCentral() gradl.. 2024. 11. 17.
[CSS] 3일차 CSS (Background-Clip) Background-Clip: 요소 내에서 배경(색상 또는 이미지)가 확장되어야 하는 거리를 정의함.background-clip: border-box; 테두리까지 확장됨background-clip: padding-box; 패딩까지만 확장됨background-clip: content-box; 컨텐츠까지만 background-clip: border-box (this is default): The background extends behind the border. 테두리까지 확장 background-clip: padding-box: The background extends to the inside edge of the border. 엣지까지만 확장 .. 2024. 11. 17.

티스토리툴바