본문 바로가기

728x90

HTML + CSS 시리즈🕸28

카드 UI + 뒷 배경 구분 [구분선 카드 UI] - feat.chatgpt 요즘 사이트 UI 를 살펴보니 이렇게 위아래로 뒷배경 색을 다르게 한뒤, 그 색이 구분되는 선 위에 카드 UI를 위치시켜서 아래와 같은 일종의 "분할 배경" 또는 "구분선 카드 UI" 디자인을 자주 사용하는것을 알 수 있었다. chatgpt 를 사용하여 만들어보자. 저의 코드 결과를 알아내기 위한 질문 과정이였습니다. 1. 뒤에 배경을 2:8 비율로 배경색을 나누고 그 위에 카드형 UI로 뛰우고 싶습니다. 2. 위 아래로 배경색을 나누세요 3. 뒷 배경 나눠지는 부분에 카드를 위치시켜주세요. 4. 뒷 배경을 위아래로 나누고, 나눠지는 선 위에 카드를 배치시켜주세요. 5. 그치만 아직 제가 원하는대로 되지 않았습니다. 카드 를 맨 앞으로 위치시켜서 카드 뒤에 배경이 나오도록 해주세요 결과 코드 공지사항 수.. 2024. 4. 8.

간단한 로그인 페이지 _ HTML 출력 결과 코드 로그인 아이디 비밀번호 로그인 회원 가입 2022. 11. 20.

최신 CSS 기능 5가지! 정리/요약.txt 예전에는 JS 를 사용해야만 구현할 수 있었던 기능인데 이제 CSS만으로 구현 가능하다. 1. @supports -> 브라우저가 해당 css 를 지원하는지 여부를 알려줌 ex) 브라우저가 css grid 를 지원하는지 체크 하는 코드! ex) 브라우저가 css grid 를 지원 안 하는지 체크 하는 코드! 2. CSS Scroll Snap (https://codepen.io/serranoarevalo/pen/xxdYBxZ) -> 웹사이트 스크롤이 어떤지 정할 수 있는 기능임. + 위 CSS Scroll Snap 기능이 css 에서도 사용가능해지면서 단, 2 줄만으로 구현 가능해짐. 3. :is Pseudo Selector 적은 코드 만으로도 수 많은 요소를 선택할 수 있어짐. 4. Flex Box Gap.. 2021. 8. 24.

bootstrap(부트스트랩) 에 대해 | HTML&CSS 시리즈 024 부트스트랩? => 트위터 개발자가 오픈소스로 제공해주는 html,css,js .... 의 프레임 워크이다. 프레임워크는 미리 만들어진 코드라고 보면 된다. 사용법 아래 사진은 부트 스트랩에서 필요한 css 파일 과 javascript(js) 파일을 받아오기 위해 입력한것. https://getbootstrap.com/docs/5.0/getting-started/introduction/ Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. getbootstrap.com .. 2021. 7. 28.

이전 1 2 3 4 ··· 7 다음

728x90

티스토리툴바