컴과생의 끄적끄적

동영상은... 비교적 덜 간단 이미지를 가변 이미지로 처리해주었던 것과 동일한 처리를, 동영상에도 똑같이 적용할 수 있다. 그러나 문제는, 동영상 서비스에 따라 그 성질이 조금씩 다를 수 있다는 것! 단순히 사이즈만 변경해서는, 프레임의 크기는 변화하지만 실제 콘텐츠(동영상)의 크기는 변하지 않는다. 해결방법 - 여백을 만들고, 그 여백에 절대값을 준다. : 이때 여백의 크기는 "종횡비(height/width)"에 달려있다! DOCTYPE html> 가변 동영상 .player{ padding-top: 56.25%; position: relative; } iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

이미지 요소에도... 상대단위 em, vw, % 등을 얼마든지 사용할 수 있다. 이때 주의 해야할 점은 브라우저가 대개 이미지의 비율을 유지한다는 점, 그리고 이미지가 무작정 커지는 것을 경계해야 한다는 점이다. max-width CSS의 max-width 속성은 너비의 최대값을 지정하여 요소의 너비가 그 이상 커지지 않게 한다. *width와 max-width의 차이 width: 너비 지정 max-width: 제한 길이 지정 (이보다 커질 수 없다~) picture HTML의 picture 요소를 이용하면 뷰포트의 너비 등 브라우저의 특정 조건에 따라 이미지를 반응형으로 불러올 수 있다. 주로, 해상도 별로 이미지의 비율을 바꾸고 싶을 때 사용! // source: 이미지를 미디어 조건에 맞게 선택적으..

미디어 쿼리 미디어 쿼리(media query)는 미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 장치(기능)이다. 모든 미디어 쿼리는 다음 두 가지 구성 요소를 지니고 있다. 미디어 타입 screen, print, speech 등 조건에 대한 물음(쿼리) *화면(screen)의 너비(width)를 조건으로 사용하는 경우가 가장 많다. 속성명 정의 min-width 디스플레이 영역의 최소 너비 max-width 디스플레이 영역의 최대 너비 min-height 디스플레이 영역의 최소 높이 max-height 디스플레이 영역의 최대 높이 orientation portrait 또는 landscape 감지 color 기기의 색상당 비트 수 color-index..

CSS 함수 CSS의 함수는 괄호 안에 인수를 전달하면, 인수에 따른 결과값을 속성에 적용하는 방식으로 동작한다. ex) 함수명(x) calc() 계산식의 결과를 속성값으로 지정할 수 있음 괄호 안에 표현식 하나를 받고, 표현식의 결과가 최종값이 됨 *표현식은 단순 계산식이면 무엇이든 가능하다. ex) width: calc(30px - 20px) *calc() 함수를 통해 textarea의 width를 가변으로 만들어 button이 고정 100px이더라도 브라우저 크기 변화에 따라 여백이 만들어지지 않도록 설정함. DOCTYPE html> calc 함수 .message{ display: flex; justify-content: space-around; align-items: center; height: ..

비율에 기반한 크기 조절 폰트 뿐 아니라, 레이아웃에도 비율에 기반한 개념을 적용할 수 있다. 부요 요소의 크기에 비례해 자식 요소의 크기가 변하는 방식은 가변 레이아웃을 만들 때 흔히 사용되는 방식이다. % (퍼센트) - %단위는 백분율 값을 나타냄. 보통 부모 요소와의 상대적 크기 지정할 때 사용 너비와 높이, 여백 뿐 아니라 글자 크기에도 사용 가능 주의! 너비와 여백은 부모 요소의 너비에 비례해 계산됨 font-size: 50%; height: 50%; width: 50%; margin: 10%; /*부모의 여백기준이 아닌, 부모의 width 기준*/ padding: 10%; /*부모의 여백기준이 아닌, 부모의 width 기준*/ DOCTYPE html> 가변 레이아웃 .container{ wid..

em과 rem은... 상위 요소 글자 크기에 따라 달라지는 가변성을 지니고 있는 것이지, 브라우저나 기기 화면에 따라 크기가 달라지는 단위는 아니다. 따라서 진정한 반응형 단위라고 할 수는 없다. 반응하는 단위들 아래 몇 가지 단위들은 뷰포트 크기를 기반으로 값을 계산하여 크기를 결정하는 가변 단위이다. vw /* 뷰포트 너비의 100분의 1*/ vh /* 뷰포트 높이의 100분의 1*/ vmin /* 뷰포트 너비와 높이 중 작은 쪽의 100분의 1*/ vmax /* 뷰포트 너비와 높이 중 큰 쪽의 100분의 1*/ DOCTYPE html> 다른 상대 단위들 p{ margin: 0; /*p태그는 기본적으로 margin의 속성을 가지고 있음*/ font-size: 50vw; } 반응형

절대단위 대신 사용해 볼 상대단위 절대 길이 단위 px : 어떤 상황에서도 동일한 값을 유지, 가변성 없음. em과 rem : 박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위 em: 부모 요소의 글꼴 크기 더 알아보기! em으로 여백 크기(padding과 margin)를 정할 때는, 자기 자신의 글자 크기를 기준으로 함 rem: 루트 요소의 글꼴 크기 루트요소란? 요소. 기본값은 16px DOCTYPE html> em과 rem .outer{ font-size: 24px; } .inner{ font-size: 2em; /*48px*/ display: inline-block; width: 200px; height: 200px; background-color: tomato; } 고양이

수강 계기 우연히 광고를 통해, 스파르타 코딩클럽에서 진행하는 크리스마스 디데이 캘린더 만들기 강의를 접하게 되었다. "HTML/CSS/JS로 단 1시간 만에 만들 수 있다!"라는 문구를 보곤 짧은 강좌로 결과물을 만들어낼 수 있다는 생각에 바로 수강신청을 하였다. 이번 겨울 크리스마스 디데이 캘린더를 만들어 보고 싶기도 해 크리스마스가 지나기 전 빠르게 수강하였던 것 같다. 결과물 먼저, 결과물은 다음과 같다. 강의 총평 강의 총평을 하자면, 1시간만에 진행되는 강좌답게 직접 코딩을 통해 실력을 기를 수 있다기보다 전체적인 그림을 잡기에 좋을 거 같았다. 코드스피넷으로 코드를 Ctrl + C, Ctrl + V 하고, 코드에 대해 설명해주는 형식으로 진행되었다. 결론적으로는 제가 만든 결과물이라기 보다는..