Frontend (12) 썸네일형 리스트형 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 2 다음
