coding,CSS,JavaScript,PHP,강좌,배우기,카테고리입니다.
우리가 버튼의 디자인을 하지 않고도 css library 를 사용하여 다양한 button 을 웹사이트에 적용해 볼수가 있습니다. 여러가지 버튼의 효과를 제공하고 있는 css 라이브러리 홈페이지에서는 심플한 디자인, 3D, 다중메뉴등의 버튼을 지원하고 있습니다. css button library 홈페이지 먼저 아래의 예제와 같이 홈페이지( unicorn-ui.com/buttons )에서 buttons을 디자인하기 위한 효과를 넣기 위해서 ‘ download ‘ 단추를 선택합니다. buttons.css 디자인파일 … Read more
우리가 웹페이지를 만들때에 적용해야할 동일한 css 코드가 같은경우에 모두 동일한 태그를 작성해야하지만 import 코드한줄로 여러개의 페이지에 css 코드를 적용할수가 있습니다. 아마도 수십개 또는 수백개의 웹페이지가 page1~ page1000 가 있다면 모든 페이지에 css 코드를 일일이 넣어야 하지만 유지보수 코드인 import 또는 link 태그한줄로 모든페이지에 css를 넣을수가 있습니다. 1.import 유지보수 예제를 보면 style에 ‘@import url(“style.css”) ‘ 를 … Read more
이번 포스팅에서는 css float 속성으로 기본적으로 이미지와 텍스트 정렬이나 레이아웃을 꾸밀때 사용하기도 합니다. 일반적으로 float 는 페이지에 이미지와 본문을 삽입하거나 정렬할때에 주로 사용하게 되며 가끔식 서브 레이아웃을 잡을때에 사용되기도 합니다. 1.float 기본태그 예제를 살펴보면 본문에 img 이미지와 텍스트가 있습니다. style의 img에 ‘float:left;’ 왼쪽정렬 태그를 넣고 margin:20px 를 넣어서 이미지와 텍스트 간격을 20px 을 적용하였습니다. 페이지를 … Read more
지금은 모바일과 같은 작은화면의 기기를 많이 사용하게되는데 이러한 작은장치의 화면에 맞게 디자인하기 위해서 css media query 태그를 사용하게 됩니다. 최근에는 반응형 디자인이라고 해서 웹페이지 화면의 크기에 따라서 홈페이지가 변환하게 되는데 이러한 기능을 부여하는것이 media query 라고 할수가 있습니다. 1.media query 기본태그 시작태그는 @media 로 시작하며 max-width:100px 는 100px 이하일때 변환, min-width:100px 는 100px 이상일때 변환하게 … Read more
CSS에서 flex는 레이아웃을 크기나 위치를 잡아주고 브라우저 크기에 맞게 가격을 조절하는 태그라고 할수가 있습니다. 과거에는 레이아웃을 만들기 위해서 table을 사용하기도 하였지만 지금과 같이 모바일환경등에서 문제점이 많아서 현재는 잘 사용하지 않게 되었습니다. 이번 포스팅에서는 css에서 매우 중요하다고 할수있는 flex 의 다양한 속성들과 기본적인 레이아웃을 꾸며보고자 합니다. 1.flex row column 기본속성 예제와 같이 div class=”container”, div class=”item” … Read more
우리가 레이아웃을 디자인하면서 특정한 엘리먼트를 원하는곳이 위치시키기 위해서 position 속성을 사용할수가 있으며 몇가지 속성에 대해서 알아보고자 합니다. css position 속성으로 static, relative, absolute, fixed 4가지가 있으며 포지션 속성을 이용하여 레이아웃을 자유자재로 꾸미는것이 중요하다고 할수가 있습니다. 1.relative 속성 예제를 보면 #me 선택자를 left:100px, top:100px, 만큼 이동시켰지만 전혀 이동이 없지만 ‘ position: relative; ‘ 속성을 사용하면 지정된 … Read more
이번 포스팅 에서는 css에서 box-sizing 효과와 margin 속성 그리고 겹침현상에 대해서 알아보고자 합니다. 박스의 테두리 두께가 다른경우 width 크기가 다르게 나타나게 되는데 이러한 경우 box-sizing 속성을 넣게되면 width, height를 크기와 넓이를 지정할수가 있습니다. margin 값으로 자주사용하는 속성은 margin-top, margin-bottom 으로 상단 여백과 하단 여백을 조정할수가 있으며 top과 bottom 겹침현상이 발생할수가 있습니다. 1.box-sizing 효과 예제를 보면 … Read more
이번시간에는 웹페이지 CSS 레이아웃으로 텍스트의 줄바꿈 인라인 태그와 블럭 태그, 그리고 박스모델 테두리 여백 태그에 대해서 알아보고자 합니다. 1.인라인 블럭 줄바꿈태그 예제를 보면 태그 hello world 텍스트에 style에 display: inline 인라인 태그속성을 적용하면 줄바꿈 없이 화면에 나타나며 display: block 블럭은 줄바꿈을 가능하게 합니다. 2.박스모델 padding 태그 예제를 보면 p태그 텍스트에 border: 3px solid green 테두리 … Read more
우리가 웹페이지를 디자인하면 폰트, 줄간격, 정렬, 색상, 배경색, 테두리등 CSS에서 가장 많이사용하는 태그와, 캐스케이딩 선택자 우선순위에 대해서 알아보고자 합니다. 1.DIV 태그 사용 웹페이지에 텍스트를 그룹으로 나누어서 CSS 적용하고자 할때에 DIV 태그로 분류해서 사용할수가 있으며 예제를 보면 ‘div id=”아이디선택자이름”‘ 으로 div 태그를 사용하였습니다. sytle안에 #container{color: blue;} 컬러를 파란색으로 적용하였습니다. 이처럼 특정한 태그에 css 속성을 적용할때에 div … Read more
선택자는 스타일스트(style) CSS에서 디자인하는데 가장 중요한 요소라고 할수가 있습니다. 태그에 선택자를 적용해서 다양한 효과를 낼수가 있습니다. 오늘 내용에서는 CSS 선택자 적용, 종류, 여러개 적용, 부모자식 선택자에 대해서 예제를 통해서 자세하게 살펴보고자 합니다. 1.선택자 선언과 종류 기본적으로 선택자는 태그, id, class 3개지로 분류되며 태그선택자는 li{태그} 로 적용되며, id 선택자는 ‘id=선택자이름’ style에는 #선택자이름으로 선언합니다. 클래스 선택자는 class=”클래스이름” … Read more