본문 바로가기

HTML&CSS

(17)

white-space css(div 줄바꿈 방지 css) white-space css(div 줄바꿈 방지 css)반응형으로 만드는데 블록 안에 글자가 자꾸만 줄바꿈이 된다.div의 줄바꿈이 안되게 하고 싶을 때 white-space:nowrap 을 이용하면 된다. 상황에 따라서 잘 이용해 보자. white-space : normal 기본 속성은 white-space : normal이다.태그에서 긴 문장을 작성할 때 그냥 작성하면 창의 크기가 좁아졌을 때 자동으로 줄 바꿈이 된다. 가나다라마바사아자차자타파하~~가나다라마바사아자차자타파하~~가나다라마바사아자차자타파하~~white-space : nowrap 줄바꿈을 하지 말아야 할 상황일 때가 있다.이럴 때는 white-space : nowrap; 을 이용하면 된다.창 크기를 줄여도 줄바꿈이 되지않는다. 가나다라..

background css 축약, 한번에 쓰는 방법, 줄여서 써보자 background css 축약, 한번에 쓰는 방법, 줄여서 써보자. background css를 적용할 때 많은 속성들이 있다. 이것을 한번에 줄여서 써보자. background css .wrap { background-color:#CCC; background-image:url("image/photo1.png"); background-position:left center; background-size:20%; background-repeat:no-repeat; background-attachment:fixed; } 백그라운드 색 bacground-color: #ccc이고, bacground-image: url('image/photo1.png') 이미지가 추가되어 있다. 그리고 background-ima..

before after css 가상요소 선택자 before와 after 가상요소 선택자 css ::before 요소의 맨 앞에 배치하는 마크업에 없는 가상요소 ::after 요소의 맨 뒤에 배치하는 마크업에 없는 가상요소 :::before 와 ::after을 마크업할 경우, 필수로 {content:""; } 이 들어가야 한다. 문자를 표시할 때는 따옴표 안에 문자를 넣으면 된다. 다른 기능을 하면서 문자가 없을 경우 빈따옴표만 넣으면 된다. 그리고 inline 속성을 가지고 있으므로 크기 값을 주려면 {display: inline-block; }이나 {display: block; }속성을 넣어줘야한다. .test1::before {display: block; content:"";} 예제를 통해서 확인해보자. ********* .test1에 ::bef..

이전 1 2 3 4 5 6 다음

티스토리툴바