[CSS] 반응형 웹 미디어쿼리(@media) 디바이스 별 해상도 분기점

CSS 반응형 웹 미디어쿼리(@media) 사용방법 미디어쿼리는 css3에서부터 사용할 수 있으며, 사용방법은 다음의 두가지 방법으로 사용할 수 있다. 1. 가장먼저 HTML head 부분에 meta viewport를 설정해준다. 2-1. style.css 파일에 함께 정리하여 사용하고 link로 호출하여 사용하는 방법. 2-2. 2-1항과는 별도의 media_style.css 파일을 따로 정리하여 사용조건에 부합할때 불러와서 사용하는 방법. 만약 본인이 필요하다고 판단되면 해상도별로 미디어css파일을 따로 만들어서 호출하여 쓰는것도 가능하다. 3. 스타일시트에서 @media 선언후 스타일입력 @media (조건입력) { 스타일 입력 } CSS 반응형 웹 미디어쿼리(@media) 디바이스 별 해상도 분기..

2022.08.25

[CSS] 말 줄임 효과 (한줄 효과, 두줄 효과, 세줄 효과)

말줄임 효과를 통해 글씨를 안보이게 하거나 말줄임표를 표시하여 주는 효과입니다. 한 줄 효과 예시) 동해물과 백두산이 마르고... /* CSS */ .ellipsis1 { width:100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 두 줄 효과 예시) 동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리나라 만세... /* CSS */ .ellipsis2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } 세 줄 효과 예시) 동해물과 백두산이 마르고 닳도록 하..

2021.04.05

[CSS] 텍스트가 넘칠때... (텍스트 한줄효과) text-overflow

텍스트가 넘칠때... text-overflow CSS의 속성 세트가 숨겨진 오버 플로우의 콘텐츠에서 문자열이 넘치는 현상을 다음과 같이 정리할 수 있다. (이 text-overflow의 속성은 인라인에서 블록 컨테이너 요소를 넘쳐나는 콘텐츠에만 영향을 준다.) text-overflow: clip; /* 컨텐츠 영영의 한도에서 텍스트를 자르기 때문에 문자 중간에서 잘릴 수 있음 */ text-overflow: ellipsis; /* 잘린 텍스트를 줄임표 (...)로 표시하여 줌 하지만 줄임표를 표시할 공간이 없으면 역시 잘림...*/ text-overflow: "-"; text-overflow: ""; 텍스트가 컨테이너를 넘치게 하려면 다른 CSS 속성을 설정하도록 한다. overflow: hidden; ..

2021.03.13

[CSS] 패딩값과 보더값을 포함시키는 box-sizing

패딩값과 보더값을 포함시키는 box-sizing 모든 요소는 margin, norder, padding 값을 가지고있다. 즉, width값과 height값을 가지고있다 따라서 기본적으로 요소의 가로값과 세로값은 object + margin + padding + border box-sizing 속성은 패딩과 보더의 포함여부를 설정 a {box-sing: border-box;} /* width값 안에 padding과 border값을 포함. */ a {box-sizing: content-box;} /* width값 안에 padding과 border값을 불포함. */ * box-sizing은 반응형 작업시 %와 px를 같이 쓸 경우 용이. * 처음 reset.css 설정시 box-sizing: border-bo..

2021.03.12

[CSS] 컨텐츠 요소 중앙정렬 방법

인라인 요소 중앙정렬 방법 한줄 요소일때 height값과 line-heigh값을 같이 사용하면 중간에 오게 할 수 있음. (많이 쓰는 방법은 아님...) // HTML center // CSS .center { text-align: center; height: 100vh; line-height: 100vh; } .center span { display: inline-block; width: 100px; height: 100px; background-color: #fff; border-radius: 50%; text-align: center; line-height: 100px; } 블록 요소 중앙정렬 방법 블록요소 양쪽에 auto값을 주면 가운데 정렬이 가능. // HTML center // CSS .ce..

2021.03.10

[CSS] 클리어픽스(clearfix)

클리어픽스(clearfix)란 float으로 인하여 아래와 같이 영역이 깨져버리는 현상이 발생한다면... 즉 height 값이 사라져 영역이 깨진다면... overflow: hidden;을 사용하여 영역을 잡을 수 있지만 불안정. 이때, float을 사용한 상위(부모)박스에 .clearfix를 설정하면 float 으로 인하여 영역이 깨지는 현상을 방지하게 된다. 결국 .clearfix는 영역을 잡아주기 위한 css 속성. 클리어픽스의 사용방법은 다음과 같다. /* CSS */ .clearfix:before, .clearfix:after { display: block; content: ''; line-height: 0; } .clearfix:after { clear:both; } .clearfix { *z..

2021.03.02