CSS 강좌 / 유튜브 동영상을 반응형으로 삽입하는 방법
유튜브 영상을 블로그나 홈페이지에 넣을 때 보통 iframe을 사용합니다. 코드는 유튜브 영상 공유에서 [퍼가기]를 클릭하여 구할 수 있습니다.
아래와 같은 코드인데, 고정폭입니다. 즉 웹브라우저의 가로폭이 커지든 작아지든 가로폭이 일정합니다.
<iframe width="560" height="315" src="https://www.youtube.com/embed/ybhXVSAdIRE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
이를 반응형으로 만들고 싶다면 아래처럼 합니다. 16:9 크기의 div로 감싸고, iframe에 style을 추가하여 상하좌우 꽈 차게 만듭니다. div의 margin은 상하 여백으로, 적절히 정합니다.
<div style="position: relative; height:0; padding-bottom: 56.25%; margin: 40px 0px;"> <iframe width="560" height="315" src="https://www.youtube.com/embed/ybhXVSAdIRE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="position: absolute; width:100%; height:100%;"></iframe> </div>
결과는 아래와 같습니다.
Grid의 격자선·트랙·셀과 fr 단위를 이해하고 명시적 행, 자동 행, 열을 가로지르는 배치를 전체 예제로 익힙니다. 긴 콘텐츠와 모바일에서 생기는 넘침도 비교합니다.
CSS / Tutorial / 마우스 호버 효과 / 다른 이미지 보여주는 방법
이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다. 다음과 같이 이미지 두 개를 넣고 div로 감쌉니다.
CSS 강좌 / CSS란 무엇이고 HTML과 어떻게 다를까?
HTML과 CSS의 역할을 구분하고, 같은 작은 정원 문서에 색상·배경·여백을 적용합니다. 실행 가능한 예제와 세 가지 변형 실습으로 스타일이 바뀌는 범위를 확인할 수 있습니다.
CSS 강좌 / 컨테이너 쿼리로 구성 요소 너비에 맞춰 꾸미기
같은 카드가 본문과 사이드바의 폭에 맞춰 배치를 바꾸도록 컨테이너 쿼리를 적용합니다. 중첩 컨테이너와 이름 선택, 조건이 적용되지 않는 원인도 살펴봅니다.
CSS / Tutorial / 원 또는 타원 만드는 방법
CSS의 border-radius 속성으로 원 또는 타원을 만들 수 있습니다. HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만듭니다. 적절히 크기를 정하여 정사각형을 만들고, 배경색을 넣습니다. border-radius 속성을 추가하고, 값에 50%를 넣으면 원이 만들어집니다.
CSS로 삼각형을 만들 수 있다면 마름모는 쉽게 만들 수 있습니다. 삼각형을 두 개 붙이면 마름모가 되기 때문입니다. 마름모는 네 변의 길이가 같은 사각형이므로, 이등변삼각형 두 개를 붙이며 됩니다.
CSS의 border 속성으로 삼각형을 만들 수 있습니다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아봅니다.
CSS 강좌 / 색상 값과 px·em·rem·% 단위 이해하기
색상 표기와 px·em·rem·%의 계산 기준을 비교합니다. 중첩된 글자 크기와 여백이 있는 상자 예제로 실제 크기를 계산하고 개발자 도구에서 확인할 수 있습니다.
CSS 강좌 / Flexbox로 요소를 한 방향에 배치하기
Flexbox의 직접 자식, 주축과 교차축, row·column·reverse의 차이를 전체 예제로 익힙니다. 초기 크기와 키보드 순서를 비교하면서 배치가 달라지는 이유를 확인합니다.
CSS 강좌 / 글꼴, 글자 크기, 굵기, 줄 간격 설정하기
글꼴·글자 크기·굵기·줄 간격을 설정하고 실제 사용된 글꼴을 확인하는 방법을 설명합니다. 단위 없는 line-height와 em 값의 상속 차이를 실행 가능한 예제로 비교합니다.