세연아빠의 개발과 일상의 모습

css 투명도 조절하기 (opacity, rgba)css 투명도 조절하기 (opacity, rgba) css3 이전에 투명도 조절하는 방법은 opacity 로 조절하는 방법이 있었으나 css3 에서는 투명도 조절하는 기존에 opacity 이외에 추가로 속성이 추가되었습니다. 이 차이점이 무었인지 알아보도록 하겠습니다. 1 opacity 로 조절하기 css3 이전부터 투명도 조절을 위해 사용되었던 opacity 입니다. 사용법 opacity: 0.5; 투명도 50%로 설정되어집니다. 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253html5 css3 투명도.gra { width: 6..

css gradient 속성 및 사용법css gradient 속성 및 사용법 css3 에서는 배경색에 그라데이션 기능으로 색상을 표현할 수 있게 되었습니다. 그전까지는 배경색에 그라데이션을 표현하려면 이미지 편집 프로그램을 사용하여야 가능하였으나 css3 에서는 스타일을 이용하여 그라데이션 색상을 직접 지정하여 표현 할 수 있다. 1 gradient 속성 1 background: linear-gradient(to right, #000, #ccc); 유형 linear , 또는 radial 중에서 선택할 수 있다. linear 은 선형 radial 은 원형으로 그라데이션이 표현된다. to right 는 오른쪽으로 to left 는 왼쪽으로 그라데이션이 적용된다. 2 background: radial-grad..

css text-shadow 속성 및 사용css text-shadow 속성 및 사용 css3 box-shadow 기능과 같은기능이며 text 의 그림자 효과를 넣을 수 있는 속성이다. text-shadow 속성은 css3에서 처음 적용된 속성은 아니다 css2에서 추가된 속이이지만 지원하는 브라우저가 거의 없어 많이 사용되지 않던 기능이다. 3 css text-shadow 속성 p { text-shadow: 5px 5px 4px #000; } text-shadow 의 첫번째 속성값 : 그림자가 가로로 얼마나 떨어져 있는지를 지정함. 양수는 오른쪽 음수는 왼쪽 text-shadow 의 첫번째 속성값 : 그림자가 세로로 얼마나 떨어져 있는지를 지정함 양수값은 글자아래 음수값은 글짜 위 text-shadow ..

css box-shadow 속성css box-shadow 속성 이미지나 글자에 그림자 효과를 넣기 위해서는 이미지 편집 프로그램을 사용하여 이미지에 그림자를 넣어야 하였지만 css3에서는 간단한 속성만으로 그림자 효과를 낼 수 있어 손쉽게 작업을 진행 할 수 있다. css3 에서는 그림자 속성인 box-shadow 속성에 대하여 알아보도록 하자. 1 box-shadow 속성 css3 의 box-shadow 속성을 사용하면 포토샵이라 기타 이미지 편집 프로그램을 사용하지 않고도 간단하게 속성 추가만으로 그림자 효과를 낼 수 있다. 그리고 속성 값에 따라 그림자의 위치나 생상 기울기 정도를 조절할 수 있다. box-shadow 속성은 모두 4개의 값을 가질 수 있으며 최소 3개의 속성값을 지정하여야 한다. ..

CSS border-radius 모서리 부드럽게 처리및 원그리기CSS border-radius 모서리 부드럽게 처리및 원그리기 보통 웹상의 상자 모서리 처리를 위해서는 그래픽을 이용하거나 자바스크립트를 이용하여 처리하곤 하였으나 css3 에선 상자의 모서리 처리를 손쉽게 할 수 있도록 하는 border-radius 속성이 추가 되었다. 1 border-radius 처리하기 border-radius 속성으로 둥굴게 처리하기 상자의 굴곡처리는 값에 따라 자유롭게 조절이 가능합니다. 굴곡을 10px; 로 처리해본 테스트 페이지 입니다. 굴곡의 조종은 px 단위 뿐만아니라 상대적인 수치인 % 로 지정하는것도 가능합니다. ex) border-radius: 50%; 123456789101112131415161718..

CSS 외각선 형식CSS 외각선 형식 CSS 의 외각선 형식을 설정합니다. 외각선 형식은 모든 요소에 설정할 수 있으며 border-style을 이용하면 상하좌우의 외각선 형식을 한꺼번에 설정할 수도 있습니다. 이 경우, 값을 스페이스로 구분해서 지정하면 주어진 값의 갯수에 따라 다음과 같이 외각선 형식이 설정됩니다. 1 형식 ▶값이 한 개인 경우 - 상하좌우 ▶값이 두 개인 경우 - 값1(상하값) 값2(좌우) ▶값이 세 개인 경우 - 값1(상) 값2(좌우) 값3(하) ▶값이 네 개인 경우 - 값1(상) 값2(우) 값3(하) 값4(좌) none 과 hidden 은 상하좌우 외각선을 모두 나타내지 않고 외각선 굵기도 0으로 설정합니다. 단, 표의 셀 외각선과 겹쳐질 경우, none 은 다른값이 우선되고 h..

CSS 외부파일 불러오기CSS 외부파일 불러오기 웹페이지를 작성시 스타일시트의 위치는 Colored by Color Scriptercs 이글이 도움이 되셨다면 아래에 로그인이 필요없는 공감 버튼을 클릭해주세요 ^^

CSS DIV 속성 positionCSS DIV 속성 position DIV 태그는 division 의 줄임말로 html 문서에서 화면 분할, 레이아웃 등을 잡는 태그로 사용된다. 웹표준에서는 태그대신 태그를 이용하여 작성하게된다. 그렇다고 테그가 웹표준에 어긋나는 것이 아니라 다만 용도에 맞게 제대로 사용되어지도록 처리되어지는 것이라 하겠다. 한번 알아보도록 하자 1 DIV 태그 태그는 한 문단에 CSS(스타일시트)를 적용시키기 위해 사용됩니다. 속성 설명 STYLE CSS 속성을 연속적으로 설정할 수 있으며, 각 속성의 구분은 ; 세미콜론으로 구분한다. 2 position 속성 특정 위치에 배치시키기 위해서 사용되며, html 태그는 상대적인 좌표만 설정 할 수 있지만 position 속성의 abso..

CSS 폰트(Font) 글꼴속성CSS 폰트(Font) 글꼴속성 CSS 중 폰트과 관련된 속성들을 알아보고 사용법을 숙지하도록 해보자. 1 font-family font-family 는 글꼴 종류를 설정하기 위해서 사용됩니다. 사용예) font-family: 굴림체; font-family: 굴림체, 돋움체; 등으로 콤마(,)를 이용하여 글꼴을 연속적으로 설정할 수 있습니다. 왼쪽 글꼴 기준으로 설정되며, 왼쪽 글꼴 이 없으면 그 다음 글꼴이 적용됩니다. 2 color 속성 color 속성은 모든 테그에 사용할 수 있는 속성으로 문자 색을 설정합니다. color 속성은 색상 상수나 색상값을 이용하여 설정할 수 있습니다. 사용예) color: #00FF88; , color: blue 3 font-size 속성..

CSS hover 사용법CSS hover 사용법 CSS 스타일시트 hover 는 해당 객체위에 마우스를 올려놓았을때 변화를 주어 엑티브한 페이지를 구성할때 사용됩니다 사용법은 아래에 예시를 보고 알아보도록 하겠습니다. 1 샘플보기 123456789101112131415161718192021 CSS HOVER TEST .haver { width:250px ; height:250px; }p:hover, h1:hover, a:hover { background-color: black; color: white; text-align:center; line-height:250px;font-size: 150%; }​ CSS HOVER TEST PAGE ! Colored by Color Scriptercs css hov..