문제 공간은 제약되어 있고, 그 안에 내용은 넘치게 되는 경우 내용이 공간을 넘어가는 부작용이 일어나게 된다. 그럴 때 해결하는 방법은 내용에 말 줄임표 효과를 줘서 공간이 넘어가는 순간 '...'으로 표기하게 만드는 것이다. 해결 한 줄 말줄임표 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..

문제 우리가 div를 중앙 정렬을 하고 싶을 때, 첫 번째로 생각나는 건 바로 margin: 0 auto이다. 생각해보면 우리가 컴퓨터에 코딩하는 것처럼, 우리도 처음 배울 때 누군가로부터 코딩된 내용이 아닐까 싶다. margin을 사용할 때는 서로 간격을 주거나, margin: 0 auto처럼 중앙 정렬하고 싶을 때가 거의 99%일 것이다. 사실 margin에는 margin: 0 auto의 중앙 정렬 외에도 다양한 정렬들이 존재한다. 전부는 아니겠지만, 알고 있는 몇 가지 margin 활용법을 소개해보겠다. 유형 margin-left(right): auto 첫 번째는 margin-left(right): auto이다. 이것은 어떤 엘리먼트를 왼쪽 혹은 오른쪽으로 바짝 붙이고 싶을 때 사용한다. 예를 들어..

문제 내가 원하는 것 만큼 늘리고 줄일 때마다 그에 맞춰서 사이트가 변화하는 것이 바로 반응형의 묘미라고 생각한다. 하지만, CSS를 갓 배운 초보 입장에서는 반응형만큼 앞이 캄캄한 것이 없을 것이다. 나 또한 그랬고 특히 '이럴 경우에는 어떻게 이해해야 하지?' 싶은 문제가 하나 있어서 가지고 와보았다. 아직 미디어쿼리는 없다고 치고, 한 사이트 전체를 줄였을 때 가로 스크롤이 생기지 않는 너비 100%의 반응형 웹사이트를 만든다고 가정해보자. 플러스로 100%안에 중앙 정렬이 된 너비 1200px의 div가 있고, 그 div안에 여러 개의 section이 있는 웹사이트를 만들고자 한다면 어떻게 해야할까? (대략 위의 이미지처럼 늘리고 줄였을 때 가로 스크롤이 생기지 않고 안에 요소들이 줄어드는 반응형..

문제 웹사이트를 보다 보면, 위와 같은 레이아웃의 형태를 본 적이 많이 있을 것이다. 나도 처음에는 '각각 item에 width와 height 값을 적당하게 주고 display: flex나 float 값을 주면 간단한 거 아닌가?' 싶었지만, 생각보다 웹은 순순히 내 생각의 결과를 따라주지 않았다. 그렇다면 어떻게 해야 할까? 여기저기 공부해본 결과, 간단한 2가지 방법을 찾아냈다. 해결 display: flex 사용하기 1 2 3 4 5 6 html은 위와 같다. 부모 태그 container로 그 안에 각각 6개의 div 아이템들을 감쌌다. #container { display: flex; flex-direction: column; flex-wrap: wrap; height: 500px; /* 줄바꿈되..