웹개발자의 기지개

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_..

1 2 3 4 5 6 7 8 9 10 a img { transition: all 0.2s linear; } a:hover img { transform: scale(1.03); margin: 0px auto; overflow: hidden; } cs transition 으로 서서히 자연스럽게 움직이는 효과를 주고, 롤오버시에는 scale 을 줘서 약간 키운다.

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

Youtube 태그를 반응형 소스 상에 삽입할때 모바일 형태로 적절히 리사이징 되어 화면에 보기 좋게 나타나도록 해 준다. 1 2 3 4 5 6 7 8 9 10 11 12 .video-wrap {position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;} .video-wrap iframe, .video-wrap object, .video-wrap embed {position:absolute; top:0; left:0; width:100%; height: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 31 32 33 34 35 36 37 .tooltip { position: relative; display: inline-block; margin: auto; } .tooltip .tooltip_content { visibility: hidden; width: 220px; background-color: orange; padding: 8px 8px; color: white; text-align: center; position: absolute; z-index: 1; bottom: 88%; left: 50%; ma..