본문 바로가기
css button design css button design 부트스트랩이나 기타 등등 많이 있어서 별도로 기본 모양의버튼은 디자인할 일은 많이 없지만 그래도 급할 땐 쓰게 된다. 베이직 css 사각 박스 .btn { background:#ff0000; color:white; padding:15px; dispaly:inline-block; font-size:16px; } 결과 HTML 삽입 미리보기할 수 없는 소스 버튼 배경에 백그라운드 그라데이선 주기 background:linear-gradient(to bottom, #컬러색 퍼센트%, #컬러색 퍼센트%); 예 background:linear-gradient(to bottom, #335c1f 15%, #8cd666 100%); 그라데이션 백그라운드 버튼을 주면 끝라인이 뭔가 어색하..
css + 연산자 css + 연산자 css를 작성할 때 뭔가 합쳐서 사용을 할 때는 + 이외에도 상당히 많이 있고 연산자의 종류도 생각보다 많다. 자주 쓰는 것을 쓰기 때문에 접할 길이 없다면 이용할 일도 없다. 하지만 알고 있다면 요소 요소마다 적용하고 응용을 할 수 있으므로 편리하다. https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048 반드시 기억해야 하는 CSS 선택자 30개 여러분은 id, class, descendant 기초를 알고 있겠죠. 과연 그게 전부일까요? 그렇다면, 여러분은 폭넓게 적용하지 못하고 있네요. 이 글에서 설명하는 선택자 중에 다수가 CSS3 명세서에 있으며 모던 code.tutsplus..
ul li 도형 겹치기 ul li 도형 겹치기 css를 이용해서 페이지 구성을 하다 보면 여러가지 상황에 직면하게 된다. 혼자 습작을 하는 경우라면 머리가 아프면 그만둬도 되지만 클라이언트 요구나 일적으로 css 디자인을 해야 할 경우는 반듯이 해결을 해야 한다. 오늘은 ul li로 도형 겹치는 방법을 알아보자 결과적으로 구현을 할 모양은 아래와 같다. HTML 삽입 미리보기할 수 없는 소스 자 그럼 css를 단계적으로 풀어보자. 전체 css 코드이다. .list { list-style:none;} .list li { text-align:center; display:inline-block; border-radius:30px; padding:15px; color:white; font-weight:bold; background:r..
display:flex 활용 특정 엘리먼트 꽉차게 display:flex 활용 특정 엘리먼트 꽉차게 하려면? HTML 삽입 미리보기할 수 없는 소스 전체 코드 박스 1 박스 2 박스 3 박스 4 박스 5 전체 코드 다운 flex:1; 이렇게 지정을 하면 해당 아이템의 크기를 무시하고 부모를 꽉 채울 수 있게 크기가 변한다. flex에 관한 레이아웃 구성이나 박스는 flex-wrap, flex-drection, flex-flow등을 활용하면 원하는대로 해볼 수 있다. flex-basis 속성은 해당 하위 아이템의 초기 크기를 지정을 할 수 있다. flex-basis:auto; flex-basis:0; flex-basis:150px; 등 flex-wrap은 말그대로 크기보다 클 경우 강제로 한줄로 표현을 할지 개행이 되게 될지를 정할 수 있다. 이건 속 내..
css h1 헤딩 꾸미기 머라 그래야 하지 css를 만들다 보면 h1,h2,h3 헤딩을 이쁘게 꾸며야 할 때가 상당히 많다. h1,h2,h3만 잘 꾸며 놓아도 제목이나 소제목등이 눈에 확확 들어오면서 가독성이 올라가기도 한다. 아래에 보더가 있고 소제목을 뒷편 박스가 감싸는 형태의 샘플을 찾던중에 스택오버플로우에서 입맛게 맞는것을 발견. 물론 세부적인 프로퍼티는 조정을 해야 겠지만. 태그 Heading Just some stuff. css * { margin: 0; padding: 0; border: 0; } body { padding: 10px; } .row { position: relative; } .row h1 { font: bold 20px/2 Sans-Serif; background-color: #222; color: ..
css before에 아이콘 넣기 css before에 아이콘 넣기 아이콘은 특수문자를 말한다. css는 메인 css 이외에도 더 꾸밀 수 있는 Pseudo class가 존재한다. 익숙하게 알고 있는것도 있다. 이를테면 링크테그에 오버, 방문시,등이다 a:link a:visited a:hover 마우스 오버시 색 변경 효과 a:active 등등등 너무 많고 오늘은 before 자주 쓰는건 엘리먼트 앞쪽에 뭔가 아이콘등을 넣을때다. 태그 내용에 일일이 넣어도 되지만 뭔가 고정적으로 들어갈 때 쓰면 요긴하다 .aaa라는 클래스가 있다고 치자 .aaa:before { content:'A'; } 라라라 HTML 삽입 미리보기할 수 없는 소스 여기 앞에 특수문자를 다양하게 넣을 수 있다. 라라라 HTML 삽입 미리보기할 수 없는 소스 특수문자는 ..
DL DT DD VS TABLE http://www.onextrapixel.com/2009/05/13/how-to-use-dl-dt-and-dd-html-tags-to-list-data-vs-table-list-data/ Many past web designers would love to create web design using table and it has been the Achilles point for web developers when it comes to debugging. Now, however when it come to listing data on a web page, example listing data of a profile, many people would use a HTML table instead. In fac..

티스토리툴바