웹개발자의 기지개

* { -webkit-print-color-adjust: exact !important; /* Chrome, Safari, Edge */ color-adjust: exact !important; /*Firefox*/}  참고 : https://juni-official.tistory.com/244

@page { size: A4 portrait; margin:0; }   //A4 세로 출력 @page { size: A4 landscape; margin:0; }   //A4 가로 출력 참고사이트 : https://devesim.tistory.com/105

1. 하위 선택자 div blockquoto ... ... 이고 그아래가 태그인 모든 요소들 둘사이에 다른 태그가 있어도 포함된다. 2. 형제 선택자 h1 + h2 { color : red; } 미국 주식 애플 테슬라 아마존 애플만 빨간색 h1 ~ h2 { color : red; } 미국 주식 애플 테슬라 아마존 태그 뒤에있는 모든 는 빨간색 3. 자식 선택자 부모요소 > 자식요소 (한단계 아래의 요소만 선택한다.) 참고 : https://dasima.xyz/css-%ED%98%95%EC%A0%9C-%EC%84%A0%ED%83%9D%EC%9E%90-%EC%A2%85%EB%A5%98-%EA%B8%B0%ED%98%B8-%EC%A0%95%EB%A6%AC/ 참고 : https://urliveblogger.blo..

아주 좋은 웹퍼블 기초 정리학기 아주 좋은 곳을 정리한다. https://uxkm.io/publishing/css/04-cssAdvanced/04-css_flexible_part2#gsc.tab=0 플렉서블 레이아웃 - 부모 속성 part 1 | UXKM CSS(Cascading Style Sheets) 플렉스 박스(flex box) 중 부모속성에 대한 설명을 제공하는 섹션입니다. uxkm.io https://uxkm.io/publishing/html/08-table/01-table_element#gsc.tab=0 table element | UXKM table 요소 정보를 보여주는 섹션입니다. uxkm.io https://uxkm.io/publishing/html/06-embedded/05-video_..

12345678910a img {  transition: all 0.2s linear;}  a:hover img {  transform: scale(1.03);  margin: 0px auto;  overflow: hidden;}cs transition 으로 서서히 자연스럽게 움직이는 효과를 주고, 롤오버시에는 scale 을 줘서 약간 키운다. 1234567hero .animated {    animation: up-down 2s ease-in-out infinite alternate-reverse both;}   style="cursor:pointer;transition: transform .2s;margin: 0 auto;"cs

1 2 3 4 5 6 7 8 9 10 오늘의 소식 aaa bbb ccc Colored by Color Scripter cs flex-direction: column; 세로 방향으로 아이템을 배치 flex-direction: row; 가로 방향으로 아이템을 배치 justify-content: space-between; 아이템들 사이에 적절히 균일한 간격을 준다. 참고 : https://studiomeal.com/archives/197

.event_view_img img {max-width:100%; min-width:100%;}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 body { margin:0; } div { box-sizing:border-box; } .black-bg { width:100%;height:100%; background:rgba(0,0,0,0.5); position:fixed;padding:20px; } .white-bg { width:100%;background:white; border-radius:8px; padding:20px; } 제목입니다. 상세페이지 내용입니다. cs