html & css & js 공부6 HTML 이용해서 API 만들기 https://developers.cloudflare.com/workers/runtime-apis/html-rewriter/ HTMLRewriter · Cloudflare Workers docs The HTMLRewriter class allows developers to build comprehensive and expressive HTML parsers inside of a Cloudflare Workers application. It can be … developers.cloudflare.com 2023. 10. 9. css: css에서 레이어처럼 겹치는 순서 조정하기 html에서 position 속성(absolute, relative, fixed 등)을 이용하여 포토샵의 레이어처럼 겹쳐서 나타낼 수 있다. 가끔 추가로 겹치는 순서를 조정하여 표현해야 할 때가 있다. 그럴 때는 z-index를 이용하면 된다. z-index에 정수를 넣어줌으로써 레이어의 순서를 조정하듯이 설정할 수 있다. 정수의 값이 클수록 가장 위에 표현된다. 아래 예시를 참고하면 된다. 우선 이렇게 z-index는 설정하지 않고 position으로만 겹친 rainbow를 만들었다. html 파일 css 파일 body { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; } .rainbow .. 2023. 1. 14. css relative position: 겹쳐서 표현하기 카카오톡에서 메뉴바를 보면 위의 사진과 같이 말풍선 이모티곤 위에 알림이 뜬다. 이를 html과 css에서 나타내는 방법을 기록한다. 먼저 html에서 채팅 목록으로 이동할 수 있는(a) 말풍선 아이콘(i)와 알림의 개수(span)을 나타낸다. 12 그리고 이 html을 꾸미는 css에서 필요한 속성을 설정한다. span tag가 inline 속성을 지니기 때문에 flex로 변경하고, 배경 크기를 조절하고, 적절한 모양새를 갖추면 된다. .nav__notification { display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 50%; background-color: toma.. 2023. 1. 7. css에서 특정 tag 혹은 attribute 선택하기 예로 id와 password를 입력받는 곳(input type="text")과 Log In 버튼(input type="submit")이 form로 묶여 있다고 하자. (html 파일) (아래는 css 파일) 1. login-form(id) 안의 input들을 특정한 상태로 꾸미고 싶지만, type="submit"인 elements는 포함하고 싶지 않다면 아래와 같이 작성하면 된다. #login-form input:not[type="submit"] { /* properties */ } [] 안에서 특정 특성을 선택하는 것을 attribute selector라고 한다. 참고: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors 2. ty.. 2023. 1. 6. 이전 1 2 다음
