css8 Link와 @import 차이점 https://www.biew.co.kr/tag/Link%20%EB%B0%A9%EC%8B%9D%20vs%20%40import%20%EB%B0%A9%EC%8B%9D%20%EC%B0%A8%EC%9D%B4 웹퍼블리싱 - 퍼블리싱 이야기 맑은커뮤니케이션 웹퍼블리싱 전문가 그룹 맑은커뮤니케이션에서 일하면서 발생하는 웹퍼블리싱 이슈사항과 공유하고 싶은 웹퍼블리싱 이야기를 나누는 블로그 입니다. www.biew.co.kr Link 방식을 사용하는 것이 @import 방식을 사용하는 것보다 페이지의 로딩 속도 측면에서 뛰어나므로 link 방식을 권장한다. 2021. 8. 23. 짧은 밑줄 만들기 ※ 부모태그에 position: relative; 주기 .클래스이름::after{ content: ''; width: 60px; height: 2px; background: #e94040; position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); } .클래스이름::after{ content: ""; width: 80px; height: 2px; background-color: rebeccapurple; position: absolute; left: 0; bottom: -25px; } 그외의 방법 (부모태그에 relative 안줘도됨) Lorem Ipsum Dolor Lorem Ipsum Dolor https://www.codin.. 2021. 7. 27. 그리스시스템에 맞게 코딩하기 default.css 에 아래 코드 지정. // 거터값 지정 [class*="col-"] { padding: 0 8px; } // 12단 컬럼 .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} https://www.w3schools.com/css/css_rwd_m.. 2021. 7. 21. 반응형 nav 만들기 HTML 평범하게 nav 를 만든다. NAV01 NAV02 NAV03 NAV04 CSS *{margin:0;padding:0} html, body{overflow-y:hidden} ul, ol{list-style:none} .header{position:fixed;z-index:10;top:0;width:100%} .header ul:after{content:"";display:block;clear:both} .header ul li{float:left;box-sizing:border-box;width:25%} .header ul li:first-child{border-left:none} .header ul li a{display:block;height:60px;text-align:center;line-.. 2021. 7. 21. 이전 1 2 다음
