DEV/HTML&CSS (6) 썸네일형 리스트형 [CSS] 치지직 채팅 커스텀CSS 타쵸쵸님의 채팅창 CSS 커스텀 제작해드렸습니다. X의 타쵸쵸님(@chucho_cho)채팅창 예쁘지 🥰twitter.com [CSS] 트윕 챗박스 커스텀CSS Twip CSS Twip Chatbox에서 사용할 수 있는 CSS입니다. VVVVVV를 플레이하는 영상을 보고 간단하게 만들어 본 스킨입니다. 미리보기 twip 사이트에서 제공하는 미리보기입니다. 사용법 아래 코드를 Twip Chatbox 커스텀 CSS에 붙여넣기 하신 뒤 사용하시면 됩니다. V6.css VVVVVV의 채팅 스타일의 챗박스 CSS입니다. @import url("https://snorlaxh.github.io/twip-chatbox/v6.css"); 제작자 https://github.com/SnorlaxH CSS 포지션(Position) Position은 이름처럼 태그들의 위치를 지정해주는 CSS입니다. static(default) 모든 엘리먼트들의 position은 기본값이 static이므로 따로 설정해 주지 않아도 됩니다. inline 엘리먼트는 왼쪽에서 오른쪽. block 엘리먼트는 위에서 아래로 쌓이게 됩니다. relative 별도의 프로퍼티를 지정하지 않으면 static과 동일하게 동작합니다. 상대적으로 지정된 엘리먼트에 top, bottom, left, right의 프로퍼티를 지정하게 되면 지정한 위치로 조정됩니다. fixed fixed는 뷰포트에 상대적으로 위치가 지정됩니다. 페이지가 스크롤되어도 늘 같은 위치에 엘리먼트가 위치하게 됩니다. relative와 마찬가지로 top, bottom, left, right의 프로퍼티를.. [CSS]브라우저별 opacity 설정 .opacity { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE-8 filter: alpha(opacity=50); // IE-7 opacity: .5; // all-browser -moz-opacity: 0.5; // Netscape -khtml-opacity: 0.5; // Safari 1.x }브라우저 별로 투명도를 조절하는 css 속성이 다른데 위의 코드처럼 opacity 클래스를 투명도 별로 만들어서 사용하면 좋음 [CSS]white-space normal[기본값]여러개의 공백 중 1개만 표시.글이 길어지면 텍스트가 자동 줄바꿈(wrap) nowrap공백을 여러개 넣어도 1개만 표시.텍스트가 길어도 줄바꿈 되지 않고 한 줄로 계속 표시 pre공백을 코드에 있는 그대로 표시.태그와 동일한 기능 코드에 줄바꿈이 없다면 줄바꿈이 되지 않음 pre-wrap공백을 코드에 있는 그대로 표시함코드에 줄바꿈이 없어도 자동 줄바꿈이 됨 pre-line공백을 여러개 넣어도 1개만 표시.코드에 줄바꿈이 없어도 자동 줄바꿈이 되며, 코드에 줄바꿈이 있을때는 그대로 HTML 코딩을 하면서 태그를 사용할때 고정 width를 지정하지 않을 경우 혼자 레이아웃을때려부수고 튀어 나갈때가 있는데 그럴땐 pre 태그에 white-space 스타일을 pre-wrap이나 pre-l.. CSS 가운데 정렬 가로 중앙 정렬 폭이 정해진 블럭 요소 auto는 마진의 왼쪽과 오른쪽 여백이 동일하게 나눠짐을 의미한다. p { width: 100px; /* 정렬하려는 요소의 넓이를 반드시 지정 */ margin: 0 auto;} 가변폭인 블럭 요소 ie8 이상 가운데 정렬이 되는 것은 item 클래스의 요소이다. 인라인 요소도 가능 block itemie6 ~ 7 호환 block item inline-block을 지원하지 않는 브라우저는 display: table과 margin을 적용받아 가운데 정렬이 되고, 나머지 브라우저에서는 text-align: center와 display: inline-block이 적용되어 가운데 정렬이 된다. 포지션이 absolute일 때 포지션이 absolute일 때 중앙정렬 (가로 +.. 이전 1 다음
