UI
-
input type="file" 커스터마이징 하는 방법개발 블로깅/기타 개념 2020. 6. 11. 23:44
Input File 태그의 기본적인 사용 File 필드를 사용하기 위해선 일반적으로 input type="file" 태그를 사용하게 된다. #Input File 태그 코드 # 각 브라우저 상에 나타나는 file 필드 해당 필드를 선언하면 각 브라우저마다 위와 같은 UI로 나타나게 되는데, 이는 브라우저 자체에서 적용되어 있는 UI여서 CSS 스타일로 변경이 불가능하다. 해당 필드의 스타일을 변경할 수 없지만, 대안으로 특정 필드의 액션에 inpit file이 동작하도록 하는 방법이 있다. 특정 필드에 File 필드가 동작하도록 하는 방법 기존의 input File 필드를 사용하게 되면 UI를 커스터마이징 할 수 없기 때문에, 대안으로 다른 태그와 연동하여 input file 태그의 기능을 대신하도록 할 ..
-
[2019.10.03] 오늘의 TIL - 같은 class의 특정 태그에만 Style을 다르게 적용시키기개발 블로깅/오늘의 TIL 2019. 10. 3. 12:45
똑같은 Element에 똑같은 Style을 적용시키기 위해 아래와 같이 코드를 작성한다. .item { width: 100%; height: 100%; border: 1px solid black; } 첫번째 두번째 세번째 위 코드는 세개의 div 태그에 똑같은 item의 style이 적용된다. 그러나 특정 div 태그에만 border 색을 다르게 하고 싶다면? 해결책은 다음과 같다. # 첫 번째 div 태그에만 border색을 다르게 적용 시키는 법 .item { width: 100%; height: 100%; border: 1px solid black; } .item: first-child { border: 1px solid yellow; } # 첫 번째 div 태그에만 border색을 다르게 적용 시..
-
[2019.09.03] 오늘의 TIL - 여러 항목을 나열하는 방식에 대해.개발 블로깅/오늘의 TIL 2019. 9. 3. 22:29
하나의 폼이 있다고 가정해보자. 해당 폼에는 아래와 같은 입력 항목이 있다. # 기본 정보 카테고리 이름 (필수입력*) 나이 성별 주소 메일주소 # 관심사 카테고리 취미 특기 관심 키워드 (필수입력*) # 직장 카테고리 회사명 (필수입력*) 입사날짜 퇴사날짜 위 항목을 가지고 레이아웃 배치를 할 경우 3가지 방법이 있다. 카테고리 별로 묶어서 배치 필수입력 항목끼리 묶어서 배치 막무가내로 배치 오늘 이 문제에 대해서 어떻게 하면 사용자가 보기에 더 편리할지 생각을 하다가, 옆에 디자이너 분께서 UX 관점으로 설명해주셨다. '필수 항목끼리 묶으면, 이 외의 항목은 작성을 잘 하지 않게 될 수도 있다.' 감탄~!