본문 바로가기

프로그래밍181

[Web] Shadow dom에 대해 알아보자 파일 선택 버튼, placeholder를 보면 기존 태그와는 뭔가 다르다. div 태그 같은것은 그냥 네모난 박스가 하나 생기는건데 얘네들은 뭔가 결합된 형태같다. 실제로 결합이 되어있고, 각 하나하나의 속성값을 바꿔줄 수 있다. 근데 css selector 이름이 굉장히 단순하지 않다. 외워서 할 수 있는 놈들이 아니다. 애초에 결합되서, 스타일을 바꾸기 힘든 애들을 Shadow Dom이라고 한다. 이것들 어떻게 바꾸냐면, 답은 역시 크롬이다. 우선 크롬 -> 속성 -> preferences -> Show user agent shadow DOM을 활성화 시켜야한다. 그럼 숨겨있던 shadow DOM이 개발자도구에 보일 것이다. 위에서 주목해야할 부분은 pseudo="-webkit-file-upload-.. 2022. 5. 9.
[Web] pseudo element 간단한 소개 pseduo class는 .container i:hover{ opacity: 0.5; } 이런식으로 주면 됐다. 자세한건 여기를 참고. See the Pen Untitled by Jirong (@jirongkim) on CodePen. mail이라는 클래스를 사용하면 굳이 머리말 꼬리말을 적을 필요없이 자동으로 입력되는 클래스를 작성한다고 하자. HTML에서 구현할 수도 있다. 하지만, 아주 많이 쓰이는 클래스라면 HTML이 너무 복잡해지고 더러워질 경우가 있기 때문에 이런걸 쓴다. 이외에도 다양한 element-pseudo가 있다. 또한 크롬 개발자 도구에서는 ::after를 클릭하면, 적용된 css를 확인할 수 있다. 2022. 5. 9.
[Web] 간단한 트랜지션부터 꽤 어려운 트랜지션까지 트랜지션 주기는 굉장히 쉽다. 아주 간단한 트랜지션부터 살펴보자. See the Pen Basic Transition by Jirong (@jirongkim) on CodePen. 이모티콘에 마우스를 올리면(hover) 투명도가 50% 되는 코드이다. https://hyun222.tistory.com/313 HTML 삽입 미리보기할 수 없는 소스 대표적인 예시로는 hover, focused, active가 있다. 더 많은 ps.." data-og-host="hyun222.tistory.com" data-og-source-url="https://hyun222.tistory.com/313" data-og-url="https://hyun222.tistory.com/313" data-og-image="https.. 2022. 5. 8.
[Web] Font awesome 사용법 Font awesome은 여러 이모티콘을 무료로 사용할 수 있게 해주는 사이트이다. 사용법은 아래와 같다. See the Pen Untitled by Jirong (@jirongkim) on CodePen. font awesome 홈페이지에서 원하는것을 검색해서 i 태그를 붙혀넣으면 된다. 너무 간편하고 이쁘게 꾸밀 수 있어서 유용하다. link 태그는 아래 CDN 사이트를 참고하자. https://cdnjs.com/libraries/font-awesome font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers The iconic SVG, font, and CSS to.. 2022. 5. 7.
[Web] 반응형 레이아웃 만들기(PC, 태블릿, 폰) 웹의 가장 큰 장점은 PC, 태블릿, 폰 등 인터넷이 되는 환경이라면 어디에서든 접속할 수 있는 것이다. 반대로 얘기하면 PC, 태블릿, 폰 모두 최적화를 해주어야한다. 반응형 웹을 만들기 위해서는 Head 태그에 아래 내용이 꼭 들어가있어야 한다. 이용자의 디바이스의 화면 크기에 맞춰서 설정한다는 대충 그런 뜻이다. 지렁이의 성장 블로그 100vw (viewport width), 100vh (viewport height)를 쓰게되면 화면이 꽉 차게 된다. 50vw로 작성하면 화면기준 50%의 크기를 가진다는 의미이다. 그럼 이제 이런걸 만들어 보겠다. @media screen and (max-width: 1200px){ .container{ background-color: greenyellow; } }.. 2022. 5. 5.
[Web] Favicon 수정하기 이런게 Favicon이라고 할 수 있다. Favorite + Icon이다. 이거 수정하는 방법은 매우 간단하다. 출처 : https://ko.wikipedia.org/wiki/파비콘 대부분 브라우저에서 호환되기 위해 .ico를 사용하는게 유리하다. 2022. 5. 5.

티스토리툴바