dev/css (4) 썸네일형 리스트형 media query 모바일 웹 화면을 개발하다보면 단말기 마다 해상도가 달라서 css를 따로 작업해야 할 때가 있습니다. media query를 사용하면 쉽게 해결할 수 있습니다. ============================================================== @media (min-width: 280px) and (max-width: 360px) { input[type=text] {width: 100px;} input[type=file] {width: 50px;} textarea {width: 150px;} } ============================================================== 위의 css 내용을 보게 되면 화면이 최소 280px 부터 최대 360.. input type file css 브라우저에서 파일 업로드를 할 때 디자인을 입히지 않으면 화면이 부자연스럽습니다. 이런 경우 label을 사용하거나 before/after를 사용해서 디자인 하는데 저는 before/after를 사용하겠습니다. css를 살펴보면 다음과 같이 작성했습니다. input 태그에 "uploadBtn"이란 id를 주고 width를 100px로 했습니다. 아래부터 중요한 내용이 나오는데 "content"라는 속성을 사용했습니다. content는 태그 앞 또는 뒤에 텍스트나 이미지를 추가할 수 있게 해주는 속성입니다. before에는 content에 빈 문자열을 추가했고, 배경으로 "download.png"를 주었습니다. after에는 content에 "파일첨부"라는 텍스트를 추가했습니다. 이렇게 css를 작성하고 .. css ... 처리 "..." 표출하는 것에 대해 설명드리겠습니다. 주요 css 속성으로 4가지를 사용할 수 있습니다, 첫 번째로 width 속성입니다. width 속성은 말 그대로 엘리먼트의 가로길이를 정하는 속성입니다. width 속성이 적용되지 않으면 엘리먼트의 길이를 사용자가 정할 수 없어서 "..." 표출이 제대로 안될 수 있습니다. 두번째로 overflow 속성입니다. overflow 속성은 표출할 문자열(컨텐츠, 데이터)이 엘리먼트 길이보다 초과할 경우 어떻게 처리할 지에 대한 속성입니다. overflow 속성값으로 auto, hidden, scroll 등등 여러 가지가 있는데 저희가 사용할 속성값은 hidden입니다. 세 번째로 text-overflow 속성입니다. text-overflow 속성은 표출되지 않.. css 우선 적용 css를 적용할 때 중복되는 속성이 있을 경우 예를 들어 background 속성을 여러 셀렉터에서 지정하고 있을 때 특정 셀렉터의 속성을 우선 적용하려면 !important 를 추가해주면 됩니다. 이전 1 다음
