css 라운드 넣는 방법

게시글

<hr> 태그 가로선 태그에 색상을 넣는 방법이다

태그에 색상을 넣고 싶으면 이렇게 CSS를 통해 넣으면 적용될것 같지만 그렇지않다 그이유는 hr는 top,bottom라인이 존제한다 해서 기본적으로 하면 라인이 2px로 된다 top,bottom 각각 1px씩 2px이된다 해서 1px로 하고자 할때 border-bottom:1px solid #000000;border-top:none; 이런식으로 라인 하나를 제거하면된다

게시글

shadow 그림자를 넣는 방법입니다

그림자를 넣을때는 box-shadow: 10px 20px 5px #aaaaaa; 를 사용하면된다 box-shadow: (A)px (B)px (C)px (D); A는 left값 B는 top값 C는 그림자의 뿌연정도 D는 색상 위내용을 입력하여 변경하면된다

게시글

백그라운드 이미지에 padding값을 주는 방법

백그라운드를 노출할때에 공간을 띄우고 하고 싶을때가 있다 이럴때 다음과 같이 하면된다. style="background-image:url('이지지경로'); background-position:10px 20px;" x=>10px y=>20px 띄우게된다

게시글

테이블 사이즈 고정하는 css table-layout:fixed

테이블의 내용에 따라 테이블이 유동적으로 변하는 경우가 있다 이때 고정하고 싶은 경우가 있다 이때 사용하는 스타일이다 table-layout:fixed 이걸 사용하면 테이블의 사이즈가 고정되어 내용이 길어질 경우 짤린 부분은 감춰지는 효과가 있다

게시글

자간(문자간격)넣는 방법

자간(문자와 문자 사이)를 넓게 하고자 할때 사용하는 스타일이다 문자간격

css만 삼각형,네모,원,타원,마르모,별등 각종 도형을 만드는 방법

css-tricks.com

The Shapes of CSS는 웹 개발 매체 CSS-Tricks에 실린 글로, 이미지 파일 없이 CSS만으로 다양한 도형을 그리는 방법을 모아 소개합니다. 각 도형은 border, border-radius, ::before·::after 가상 요소, transform 같은 속성을 조합해 만들어집니다. 정사각형·원·타원 같은 기본 도형부터 방향별 삼각형, 오각형·육각형·팔각형, 여러 형태의 별, 하트, 무한대 기호, 다이아몬드, 말풍선, 음양, 팩맨, 자물쇠 등 40여 가지 예제가 정리되어 있고, 도형마다 참고한 출처가 표기되어 있습니다. 아이콘이나 장식 요소를 가벼운 CSS 코드로 구현하려는 웹 퍼블리셔와 프론트엔드 개발자, CSS 속성 활용법을 익히려는 학습자에게 참고가 됩니다.

게시글

css파일에서 css파일 include(import)하기

html 페이지에서 css파일을 불러오는 방법은 이렇게 하면 style.css,style_add.css 파일 2개를 모두 불러올수 있다 그런데 style.css 안에서 style_add.css를 불러오고 싶을때가 있다 이때 import(include)하는 방법인다 style.css 파일에 추가해주면된다 @import "style_add.css"; import를 지원하지 않는 브라우저가 있어서 확인이 필요하다

게시글

input type=text 태그만 별도로 스타일 지정하는 방법

input{display:none;} 이렇게 css선언하게 되면 모든 input 태그는 비노출이된다 text,password,checkbox,radio등등 모두 비노출되는 식이다 그러나 input=text만 별도로 적용하고자 하는경우가 있는데 이때 사용하는 방법이다 input { expression(this.type == "text" ? "none" : font-size:13px) } expression를 통해서 this.type == "text"구분하여 별도록 스타일을 지정할수 있다