CSS (8) 썸네일형 리스트형 HTML/CSS 비디오 테두리 제거 video 태그를 활용하여 비디오를 재생할 때 테두리가 생기는 것을 볼 수 있어요. 이를 없애는 css는 매우 간단합니다. html css .player { outline: none; border: none; } HTML/CSS 가운데 정렬 css로 div를 수평으로 가운데 정렬해볼게요. 이해를 돕기 위해 기본적으로 정렬과 상관없는 CSS는 태그에 박아버렸어요. 자식 위의 html 태그를 브라우저에서 열면 이렇게 그려져요. 1. inline-block child div에 inline-block 속성을 주면 div도 text-align을 사용하여 가운데 정렬을 할 수 있어요. 단, child의 요소들까지도 모두 가운데 정렬이 됩니다. .parent { text-align: center; } .child { display: inline-block; } 2. flex parent div에 flex 속성을 주면 엘리멘트 요소의 위치를 조정할 수 있어요. .parent { display: flex; justify-content: center; } 수.. HTML/CSS 스크롤바 숨기기 없애기 (스크롤 동작) 스크롤은 동작하지만 스크롤바를 숨기고 싶은 경우가 있어요. 예제를 통해 알아볼게요. 우선, 스크롤을 생성하겠습니다. 안녕하세요. 스크롤바 숨기기. 스크롤은 동작. Scrollbar hide. Scroll active. 스크롤바 숨기기. 스크롤은 동작. Scrollbar hide. Scroll active. 안녕하세요. 스크롤바 숨기기. 스크롤은 동작. Scrollbar hide. Scroll active. 스크롤바 숨기기. 스크롤은 동작. Scrollbar hide. Scroll active. 스크롤바 숨기기 (Hide scroll bar) .box { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .b.. HTML/CSS div 가로 배열 3등분, 양옆으로 (flex 속성) 실제 배열에 영향을 주지 않는 css는 html 태그에 박아버렸어요. div를 가로로 나열해볼게요. 기본적으로 div는 display: block; 속성이여서 자동적으로 줄바꿈이 됩니다. 가로 3등분 이걸 가로로 배열시켜 볼게요. 우선, 상위 div를 만들어줄거에요. 그다음 flex 속성을 이용해서 가로로 배열시킬건데요. 상위 div에는 display: flex; 를 주고 배열하고자하는 하위 div는 flex 속성의 값으로 유동적으로 각각의 비율을 맞출 수 있어요. 이 예제에서는 모두 간격을 똑같이 할거라 모두 동일하게 flex: 1;로 설정할게요. .parent { display: flex; } .child { flex: 1; } 양옆 배치 태그를 하나 빼버리면 두개로 나란히 배치가 될거에요. 너비를 .. HTML/CSS 이미지 둥글게 원 모양 (프로필) 네모난 이미지를 동그랗게 보여주는 방법에 대해서 알아볼거에요. 보통 프로필을 보여줄 때 많이 하죠. 예시 이미지는 이걸루 할게요. 가로가 좀더 기네요. 세로가 더 길어도 괜찬아요. 이해를 돕기 위해 직접적인 처리와 무관한 속성은 html 태그에 넣었어요. .box { width: 150px; height: 150px; border-radius: 70%; overflow: hidden; } .profile { width: 100%; height: 100%; object-fit: cover; } 테두리에 border-radius: 70%를 주면 div가 원이 되요. overflow: hidden; 속성으로 넘치는 부분은 지워줬어요. object-fit 속성으로 이미지와 같은 오브젝트를 받아서 비율은 그대로 .. HTML/CSS 한 줄 텍스트 넘칠 때 숨기기... 생략 HTML에서 텍스트가 너무 길어서 넘칠 때 잘 처리하는 방법에 대해서 알아볼게요. (여러 줄) 바로 예제를 통해 확인해보도록 하죠. 실제로 기능과 크게 상관이 없는 css 속성들은 div 태그 안에 박아둘게요. (height 수치만 잘 기억해주세요.) 텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트 아래 사진처럼 보일거에요. 우리는 한정된 빨간 박스 안에 텍스트를 한 줄로 줄여놔야해요. 이쁘게 정리해볼게요. overflow는 div 내에 컨텐츠가 초과되었을 때 어떻게 하겠냐는 속성이에요. hidden으로 설.. HTML/CSS 여러 줄 텍스트 넘칠 때 숨기기... 생략 HTML에서 텍스트가 너무 길어서 넘칠 때 잘 처리하는 방법에 대해서 알아볼게요. (여러 줄) 바로 예제를 통해 확인해보도록 하죠. 실제로 기능과 크게 상관이 없는 css 속성들은 div 태그 안에 박아둘게요. (height 수치만 잘 기억해주세요.) 텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트 아래 사진처럼 보일거에요. 우리는 한정된 빨간 박스 안에 텍스트를 미리보기 형태로 줄여놔야해요. 이쁘게 정리해볼게요. height는 위에서 적었지만 이해를 돕기 위해 다시 한 번 적을게요. height가 200p.. HTML/CSS div 수직 가운데 정렬 (Vertical Align) HTML에서 div 안에 div를 수직으로 가운데 정렬하는 방법에 대해서 알아볼까 해요. 수직 정렬은 까다로워서 거의 억지로 하는 것 같아요. 아래 html 태그는 실험 대상이에요. 이해를 돕기 위해 기본적으로 정렬과 상관없는 CSS는 태그에 박아버렸어요. 위의 html 태그를 브라우저에서 열면 이렇게 그려져요. 파란색 div를 수직으로 정렬해볼게요. html은 건드리지 않을거에요. 1. 테이블 parent div 태그를 테이블처럼 만들어서 vertical-align 속성을 사용할 수 있게 하는 방법이에요. .parent { display: table-cell; vertical-align: middle; } 2. 포지션 직접 조정 child div 태그의 위치를 직접 가운데로 조정하는 방법이에요. ( p.. 이전 1 다음
