개념 transform은 간단하게 말해서 css를 이용해 요소의 위치, 크기 등을 자유롭게 바꿔주는 기능을 수행한다. 이 글에서는 특정 요소의 위치, 크기, 회전, 기울임을 바꿔주는 transform 속성을 다뤄볼 예정이다. 유형 translate translate은 좌우로 이동시키는 기능이다. translate(x축 이동거리, y축 이동거리)로 쓰이며, 각각 translateX(), translateY()로도 쓰인다. 값으로 음수를 쓰면 X축 기준 왼쪽으로 이동되며, Y축 기준 아래쪽으로 이동된다. 우리가 수학 시간에 배운 그래프의 좌표 값과 똑같다고 생각하면 된다. 뿐만 아니라, 이동 거리를 픽셀 값과 퍼센트 값 모두 줄 수 있다는 것도 특징이다. rotate rotate는 좌우로 회전시키는 기능이다..

문제 지금부터 상상을 한번 해보자. 하나의 부모 태그 아래에 여러 개의 자식 태그가 있다. 우리가 흔히 보는 메뉴바처럼 그 자식 태그는 똑같은 너비로 부모 태그를 꽉 채우고 있다. 이걸 만드려면 어떤 태그를 쓰는 게 좋을까? 답은 정해져 있지 않다고 생각한다. 왜냐하면 개인적으로 좋은 코딩은 있다고 생각하지만, 결과가 다르지 않는 이상 틀린 코딩은 없다고 생각하기 때문이다. 하지만, 조금이라도 좋은 코딩을 하기 위해선 지금 내가 블로그에 기록하며 공부하는 것처럼 여러 개의 코드 중에 좋은 코드를 구별해낼 수 있어야 하고, 그러기 위해서는 하나의 문제에 여러가지 답을 많이 알면 알수록 좋다고 생각한다. 위의 문제를 해결하는 방법은 많지만, 그 중 하나인 display: table를 소개하려고 한다. (실무..

문제 CSS만을 이용해서 위와 같은 결과물을 만들려고 한다. 이 결과물을 만드는 데 2가지 과정이 필요하다. 1) 목록에 밑줄을 만들어야 한다. 2) hover 값을 줘야 한다. (transform 사용) 이 게시물은 1번에 해당하는 과정을 설명하는 글로, 2번 과정은 따로 transform 속성 정리글에서 다루겠다. 먼저, 밑줄을 만드는 경우의 수는 많다. 해당 글씨가 들어간 태그에 border-bottom을 줘도 되고, li에 padding-bottom 값을 준 후 border-bottom을 줘도 된다. 메뉴에 어떤 태그를 썼냐에 따라 방법은 무수히 많다. 하지만, 위와 같이 주게 되면 부작용이 있다. border에도 1px처럼 크기가 있기 때문에, 위처럼 hover를 주는 경우 글씨가 갑자기 올라가..

문제 공간은 제약되어 있고, 그 안에 내용은 넘치게 되는 경우 내용이 공간을 넘어가는 부작용이 일어나게 된다. 그럴 때 해결하는 방법은 내용에 말 줄임표 효과를 줘서 공간이 넘어가는 순간 '...'으로 표기하게 만드는 것이다. 해결 한 줄 말줄임표 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it. html은 한 줄 말 줄임표 or 두 줄 이상 말 줄임표 모두 위와 동일하게..

문제 내가 만들고 있는 웹사이트에 유튜브 영상을 넣고 싶다면, 어떻게 해야할까? 퍼가고 싶은 유튜브 영상을 우클릭 후 '소스 코드 복사'를 누르고 html에 그대로 붙여넣기해주면, 간단하게 유튜브 영상을 웹 내부에 옮길 수 있게 된다. 그런데 반응형 웹사이트에서는 이대로 끝나게 되면, 반응형에 맞춰 영상이 움직이기 보다는 영상 본래 크기 그대로, 검은 여백 그대로 보이게 돼서 반응형에 깔끔하게 떨어지지 않게 보인다. 웹사이트를 늘리고 줄일 때 마다 영상이 검은 여백없이 딱 떨어지게 하고 싶으면 어떻게 해야할까? (▲ 반응형 웹사이트에서 늘리고 줄여도 유튜브 영상 내에 검은색 여백없이 딱 떨어지는 모습) 해결 마법의 숫자 56.25% html은 전체 div인 video_box 클래스 안에 유튜브 소스 (i..