CSS/일반 (7) 썸네일형 리스트형 CSS로 말줄임표를 넣는 방법 글자 데이터의 길이는 그때그때 다르기 때문에 레이아웃에 맞추기 위해 말줄임표를 써야하는 경우가 더러 있다. 한 줄부터 시작하여 여러 줄에서 말줄임표를 쓰는 방법에 대해서 다루겠다. 한 줄 말줄임표 한 줄 말줄임표는 간단하다. 다음 코드만 넣으면 된다. .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* display: block; */ } 글자가 길어져 block의 오른쪽 끝을 넘어가면 ...이 붙는다. 아무리 글자가 길어도 한 줄만 표시된다. 다만 display: block;일 때에만 작동을 하기 때문에 주의해야 한다. 두 줄 이상일 때의 말줄임표 webkit 계열의 브라우저인 경우 다음 코드를 넣으면 두 줄 이상.. 이미지를 쪼개 넣는 CSS Spirtes에 대해서 이미지 파일은 별도의 GET 요청을 통해 다운받는다. 한 페이지에 자잘한 이미지 파일이 많이 있다면 GET 요청을 여러번 할 수밖에 없다. 서버 요청의 수를 덜기 위해 CSS Sprites라는 수법이 생겼다. 작은 이미지들을 하나의 이미지로 묶어 한 번의 GET 요청만 하고 CSS로 background-position을 조절해서 원하는 부분만 이미지로 나타나게 하는 방법이다. 대신 용량이 큰 이미지들을 이렇게 묶는 건 다운로드 시간이 오래 걸려 사용자 경험에 좋지 않고 아이콘과 같은 작은 이미지들에만 활용하는 게 보통이다. 아래의 사이트에서 CSS Sprites를 위한 파일을 쉽게 만들 수 있다. cssspritestool.com 이미지의 background-position을 자동으로 설정해 놓은 CSS.. 모든 브라우저에 공통적으로 적용되는 CSS 초기 설정법 크롬에서 p 엘리먼트의 전역 설정을 보면 margin-top과 margin-bottom의 값이 10px로 돼 있다. 그밖에 다른 엘리먼트에도 기본값이 적용돼 있고 이는 브라우저마다 조금씩 다르다. 때문에 의도치 않게 타 브라우저에서 특정 엘리먼트가 다른 모양으로 나타날 수 있고 이를 방지하기 위해서는 가변적인 엘리먼트에 임의로 전역 설정을 해야 한다. 다음 사이트에서 이를 위한 css 파일을 제공해준다. necolas.github.io/normalize.css/ 다운받아 html 파일에 추가해서 사용한다. BEM에 대해서 BEM이란 CSS의 이름을 짓는 방법론이다. Block, Element, Modifier의 줄임말로 각각을 __나 --로 구분해서 표현한다. 1. Block Block은 다른 것에 영향을 받지 않는 독립적인 컴포넌트다. 예를 들어 일반적인 header와 footer는 완전히 나눠져 있고 서로 영향을 받지 않도록 구성할 수 있어 Block이다. BEM은 Block을 기준으로 CSS의 이름을 짓기 때문에 재사용이 용이하고 class 속성만 보더라도 어떤 것인지 쉽게 파악할 수 있게 해준다. 물론 Block 안에 독립적인 Block이 올 수도 있다. 그리하여 class 이름의 제일 앞에 Block 이름을 넣고 다음에 올 Element와 구분하기 위해 언더바 두 개를 넣어준다. 띄어 쓰기는 -로 표현한다. bl.. 반응형 웹 참고 자료 https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=ko CSS 그라디언트 사이트 그라디언트 디자인 할 수 있는 사이트 https://www.colorzilla.com/gradient-editor/ CSS 셀렉터(Selector) 종류 .class // 클래스 이름이 class인 모든 엘리먼트 .name1.name2 // 클래스 이름이 name1이거나 name2인 모든 엘리먼트 .name1 .name2 // name1 클래스 안에 있는 name2 클래스 #id // id가 id인 엘리먼트 * // 모든 엘리먼트 p // 모든 엘리먼트 p.class // 클래스 이름이 class인 엘리먼트 p#id // id가 id인 엘리먼트 div, p // 엘리먼트와 엘리먼트 div p // 엘리먼트 안의 모든 자손 엘리먼트 (descendent) div > p // 엘리먼트 안의 자식 엘리먼트 (child) div + p // 엘리먼트 바로 뒤에 있는 엘리먼트 div ~ p // 엘리먼트 뒤에 오는 모든 엘리먼트 [target] // target .. 이전 1 다음
