한 줄 말줄임표 구현하기가장 기본적인 한 줄 말줄임표는 다음과 같은 CSS 코드로 구현할 수 있습니다[1]:.single-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 200px;}주요 속성 설명:white-space: nowrap으로 텍스트를 한 줄로 유지overflow: hidden으로 넘치는 텍스트를 숨김text-overflow: ellipsis로 말줄임표 표시여러 줄 말줄임표 구현하기여러 줄의 텍스트를 말줄임표로 처리하려면 다음 코드를 사용합니다[2]:.multi-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit..

CSS를 사용하여 유튜브 동영상을 반응형으로 만드는 방법을 설명하겠습니다.HTML 구조먼저 유튜브 iframe을 div로 감싸는 구조가 필요합니다: CSS 스타일링반응형 동영상을 위한 CSS 코드:.video-wrap { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden;}.video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }작동 원리이 방식이 작동하는 원리는 다음과 같습니다:div 컨테이너에 p..

padding:A; - 상 하 좌 우 모두 a 값으로 패딩 적용 padding:TB RL; - 상하, 좌우 각각의 값이 같을 경우 사용 padding:T RL B; - 좌우 값이 같고 상하가 다를때 사용 padding:T R B L; - 상 우 하 좌

display:inline 이나 은 inline 속성을 가지고 있고 inline 의 특성상 left 정렬이 된다. block 속성은 한줄씩 출력된다 block의 정렬은 float 으로 정렬 (가운데 정렬 margin:0 auto) // width 값 설정 inline은 text-align 으로 졍렬 float 속성 none,left,right float 해준 후에 해당 정렬을 초기화 하기위해서 clear 해준다 clear 속성 left - 왼쪽 정렬 초기화 ,right - 오른쪽 정렬 초기화,both -모든 정렬 초기화

id 는 # 으로 사용 class . 으로 사용 일겅우

1 2 3 ------------- 1 2 3 -------------- div 의 경우 display 기본속성이 block 1 2 3 --------------- 123 --------------- span 의 경우 display 기본속성이 inline block 은 줄 바꿈 inline 은 줄바꿈 안됨 inline의 경우 상하 padding , width,height는 사용 불가

ul{ list-style:none; //불릿 표시 없애기 padding-left:0; // 왼쪽 여백 0으로 만들기 margin:0; //익플에서 padding이 안먹히면 마진값 을 0으로 // dtd 설정 해주면 필요 없음 } 익플 일때 margin:0; 일경우 패딩값이나 불릿을 자동으로 없애버림 // dtd 설정 해주면 필요 없음 파폭 일경우는 해당 값이 다 들어가야 원하는 모양대로 출력 padding: 0 0 10px 0; 패딩 값의 경우 앞에서 부터 순서대로 위 오른쪽 아래 왼쪽 이 된다. 0이상일 경우 무조건 px 을 쓰는 습관!! padding:0 10px; 일경우 위 아래는 0 좌우는 10px padding:10px; 위 오른쪽 아래 왼쪽 모두 10px 씩 ==================..

허세질 작렬 - 책 사면 인증샷은 찍어 줘야지