I am sipping a coffee on the front deck. As the summer passes, the air is more getting cooler. I can see the mountain landscape far away. Gon likes taking a time in the garden. He always observes insects, especially bees living in hive in front of our deck. Refined writing I'm sipping a coffee on the deck in front of my house. The air is more getting cooler after midsummer. I can see the mountai..
The timber house where I live in is leaking from the ceiling. Last heavy rainy night, I heard some sound of water dropping. It was a drop of rain falling from the crack of ceiling. I never have lived in a leaking house. There must have been a problem in the process of building a house. Owner told me that he would fix it, but it made me feel bad. Refined writing The timber house where I live is l..
first writing I'm gonna write a journal. I have been scared of showing my mind from some time ago. Although, actually what other people think of me is not matter to me, I feel like uncomfortable. I study English lately. I watch the netflix TV show and listen podcasts. I'm gonna write how I studyEnglish. Although if my English skill wouldn't been better, the report will remain. refined writing I ..
반응형 페이지에서 가로폭이 달라져도 유튜브 영상의 가로 세로폭을 일정한 비율로 유지할 수 있도록 하는 방법입니다. 먼저 html에서 유튜브 공유 태그 을 로 한번 감싸줍니다. HTML css 에서는 이렇게 추가해줍니다. CSS .youtube-wrap{ position: relative; width: 100%; padding-bottom: 56.25%; margin-bottom: 5px; } .youtube-wrap iframe { position: absolute; width: 100%; height: 100%; } 만약 유튜브 양쪽에 간격을 주고 싶은 경우, .youtube-wrap 클래스 바깥쪽에서 padding을 추가해주면 됩니다.
간단한 탭메뉴 구현법을 소개합니다. See the Pen 간단 탭메뉴 by Darim (@chocoleaf) on CodePen. JQuery를 선언해야 제대로 작동합니다. css ul.tabs{ margin: 0px; padding: 0px; list-style: none; } ul.tabs li{ background: none; color: #222; display: inline-block; padding: 10px 25px; cursor: pointer; } ul.tabs li.current{ background: #ededed; color: #222; } .tab-content{ display: none; padding: 15px 0; border-top:3px solid #eee; } .tab-..
반응형 웹작업에서 모바일 화면에서만 테이블에 횡스크롤을 적용하는 방법입니다. 먼저 table을 div 태그로 감싸줍니다. /* 테이블이 들어갑니다 */ CSS에서는 가로 스크롤을 적용하고자하는 크기의 화면을 미디워쿼리로 설정해줍니다. table을 감싼 div태그에 다음과 같이 설정해준뒤, table에는 width:auto; 를 설정해줍니다. @media screen and (max-width: 765px) and (min-width: 300px){ .table-container{ width:100%; overflow-x:auto; white-space: nowrap; } table{ width:auto; } } *참고로 모바일에서는 스크롤이 안보이는 경우가 있는데, 그런 경우엔 이렇게 설정해줍니다. 모바..