본문 바로가기
반응형

참고/CSS4

CSS] RESET * CSS 리셋 @charset "UTF-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,.. 2021. 11. 9.
CSS] 배경 이미지 화면에 꽉 차게 지정하기 - 브라우저 화면 크기를 조절해도 이미지가 화면에 꽉차게 지정하기 body { height: 100vh; background: url(/image/main_bg.jpg) no-repeat center; background-size: cover; } height 를 100vh 로 줘야한다. 100% 주면 안됨. backgrund-image, background-repeat 으로 따로 써도 되지만, 한줄이라도 줄이기 위해 background: 에 다 넣는다. no-repeat은 이미지를 반복해서 나오지 않게 함. center는 이미지를 가운데 배치. background-size: cover를 넣는다. 이제 브라우저 크기를 작게 했다가 크게 해도 화면안에 그림이 계속 차있다. 물론 비율에 따라 그림이 점점 잘.. 2021. 10. 9.
text-overflow: ellipsis HTML에 있는 내용이 길때 width에 제한이 있을경우 내용이 도중에 잘려보일수 있는데 text-overflow: ellipsis를 사용하면 내용뒤에 잘리는 부분이 ... 으로 바뀜 2020. 6. 9.
font -family, font-size(em font-family body {font-family:궁서,돋움,serif;} p {font-family:바탕,serif;} class, id 지정 class : . id : # .fnt {font-family:바탕,serif;} #fnt {font-family:바탕,serif;} em em은 부모요소의 1.5배로 계산 ex) 12px(부모) * 1.5 = 18px body {font-size: 12px;} .fnt {font-size:1.5em;} 2020. 4. 17.
반응형