Dungx2

css를 활용한 라운드된 박스와 박스 속성에 대해 알아보자. css3에서 부터 라운드박스의 형태는 지원이 가능합니다. 이미 예전부터 이야기 되고 있었지만 여전한 문제점은 IE이다. IE는 IE9부터 지원이 가능합니다. 먼저 박스의 속성부터 확인해보자. 박스의 속성은 CSS상의 가로세로의 개념을 이야기 하는것이 아나라 계산되어져 화면에 보여진 형태의 박스를 말합니다. 박스의 속성,컨텐츠,마진,패딩,보더 레이아웃을 구성할때 우리는 미리 계산을 잘 하여 만들어야 합니다. 가로는 콘텐츠의 너비 + 패딩 +보더입니다. 브라우저 플러그인 파이어버그를 설치하여 레이아웃을 보면 쉽게 확인가능합니다. 아래의 가름과 같이 border가 계산되어진다는 것을 기억합니다. outline 과 border 그림과 같이 border..

투명도(opacity) 투명도를 만들때는 뒤쪽 z-inex설정 뒤에 엘리먼트나 겹친 엘리먼트를 보이게하는 등의 모습들을 표현 할 수 있습니다. 브라우저ie가 예외이고 ie9은 지원을 합니다. 그러나 ie8이하 버전은 필터를 사용하여야합니다. box1 opctical 60% box2 opctical 40% 포지션은 겹치게 하였습니다. div{ width:280px; height:170px; position:relative;} .box1{left:120px; top:30px; background-color:#FF4220; opacity:.5; } .box2{left:170px; top:-50px; backgroud-color:#FF4220; opacity:.3; } opacity(투명도)를 줄때 알아두어야 ..

1. boxmodel css에서는 모든 요소를 하나의 박스라고 할 수 있습니다. boxmodel이라는 말은 주로 layout 또는 디자인 할때 주로 고려되고 있습니다. css에서 boxmodel은 어떠한 html요소로 감싸여진 하나의 박스를 말합니다. html요소는 margin,padding,border와 내용으로 구성되어집니다. 이러한 boxmodel은 html요소 주변에 서능 긋거나 공간, 여백을 채워서 넣을 수가 있기에 일상 웹페이지를 작업할때 많은 도움이 됩니다. Margin - 경계선(border) 바깝쪽에 여백을 줄때 활요합니다. border - 경계선 padding - 경계선(border) 안쪽부터 내용부분의 사이에 여백을 줄때 사용됩니다. content - text 또는 이미지를 넣을 수 ..

1. box-sizing 예전부터 너비값에 대해서 애매한 부분들 때문에 사람들이 box-sizing이라고 하는 새로운 CSS 테그를 말들었습니다. 엘리먼트에 box-sizing을 설정하면 해당 엘리먼트의 패딩과 테두리가 이제는 너비를 늘리지 않았습니다. 예제는 두 엘리먼트에 모두 box-sizing: border-box;를 지정했습니다. 예제. .ttm { width: 370px; margin: 17px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .ttm_ty { width: 400px; margin: 27px auto; padding: 35px; border: solid red 1..

1. 엘리먼트의 배경 설정하기 엘리먼트의 배경에 컬러를 설정하거나 이미지를 표시하고자 할때 background 효과를 사용합니다. 이 효과를 이용하면 배경에 사용된 이미지의 위치를 지정하거나 반복 할 수 있습니다. 2. 배경컬러 background-color:컬러값 Hex 16진수로 컬러 값을 표현,ff0000(붉은컬러), 00ff00(초록컬러), 0000ff(파란컬러) RGB 붉은색,초록,파란색의 컬러값을 조합하여 색상 값을 표현합니다., RGB(255,0,0) RGB(0M,255,0) RGB(0,0,255) 별명 red,blue,green등 다양한 컬러 코드가 있습니다. 3. 배경 이미지 background-image:url(이미지 url) 4. 배경 이미지의 반복 background-repeat: ..

링크의 상태에 대하여 링크는 하단과 같은 4가지 형태를 가지고 있습니다. 각각 상태에 따라 시각적으로 다른 형태를 가질수있습니다. 방문하지 않은 링크 a:link{} 방문했던 링크 a:visited{} 마우스 오버한 상태의 링크 a:hover{} a:link와 a:visited 뒤에 와야합니다. 마우스 누른 상태에 링크 a:active{} a:hover 뒤에 와야합니다. 예문 표의 특징에 대하여 표에 대한 html의 기본 디자인은 표 전체의 테두리와 셀사이에 여백이 기본적으로 지정되어 있습니다. 이 여백을 무시하려면 태그에서 border-collapse의 값으로 collapse를 주면 됩니다. 예문 번호 교제과목 교제과목수 01 국어 5 02 영어 7 03 수학 3 04 과학 7

1. font의 정의 font란 글의 형태를 의미하는데, 글자의 서체를 말합니다. 2. font family 일반적인 사용으론 webpage에 폰트를 포함할수 없습니다. 그러하기에 webpage에 설정된 폰트를 사용자가 보기위해선 사용자의 디바이스에도 해당되는폰트가 포함되어야 합니다. 그래서 css에선 font family라는 형식이 있는데. 폰트에 우선순위를 정하여 여러가지를 지정하면 그중에서 사용할 수 있는 폰트를 상용하게 됩니다. 예제를 들어 하단의 구문은 사용자 컴퓨터의 arial black 폰트가 있다면 적용하고 없으면 Arial 폰트를 상용합니다. p{font-family:"arial black",Arial, serif;} 둥둥이블로그 3. 고정,가변폭이란 통상적으로 폰트를 디자인 할때 문자의..

1. span 태그 활용 텍스트는 태그가 아니라 컨텐츠이기에 텍스트를 꾸미기 위해선 텍스트를 감싸고 있는 태그가 필요합니다. 줄바꿈같은 것이 없이 일부 텍스트를 꾸며주기 위해선 꾸미기위한 텍스트를 "span" 태그로 감싼 후 여기에 효과를 넣어줍니다. 세상이 그대를 속일지 몰라도, 나 자신은 세상을 속이지말자. 2. 색상 텍스트에 컬러를 줄때는 color효과를 사용합니다. css에서는 컬러를 지정하는 3가지의 방법이 있는데, 아래에 설명하였습니다. Hex 16진수로 색상을 표현. #ff000(빨간색), #00ff00(초록색), #0000ff(파란색) RGB 빨간색,초록색,파란색의 색상들을 조합해서 색상 값을 표현합니다. RGB(255.0.0) RGB(0.255.0), RGB(0,0.255) 별명 red,..

1. 하위 선택자에 대해서 1)공백을 통하여 부모와 자식을 구분지어 준다. 2)부모가 먼저 나오고 자식이 나중에 나온다. 3)특정한 엘리먼트의 하위에 나오는 엘리먼트를 선택하는데 사용한다. 메인 회사소개 제품소개 메인 회사소개 제품소개 2. 하나의 css선언을 통해 여러개의 선택자에게 적용하기 1)선택자와 선택자를 ',(콤마)'로 구분합니다. 2)하나의 css선언을 여러 엘리먼트 셀렉트에 적용하고 싶어할때 사용합니다. 둥둥이 싸이트 오늘도 이렇게 하루가 흘러간다. 둥둥이 3.자식선택자 chid selector 1)ie6은 지원하지 않음 2)특정한 엘리먼트에 직접적인 하위 엘리먼트에 대하여만 선택할 때 사용합니다. (하위 선택자와 다름니다.) 메인 약도 제품소개 회사소개

선택자에 대해서.. css 효과가 적용되는 태그를 지정합니다. selector declaration declaration h1 {color:blue;font-size:12px;} property value property value 1. id 선택자에 대해 1) 우선 순위가 가장 높습니다. 2) css 선택자에서는 #을 상요하여 id라는 것을 표시합니다. 3) id속성은 전체의 문서에서 하나의 태그를 식별하기 위해서만 사용됩니다. 4) 아래의 예제는 id값이 dung인 태그의 컨텐츠를 파란색으로 표시하도록 합니다. blue 2. class 선택자에 대해 1)css선택자에서는 ','을 사용하여 class 입을 표시합니다. 2)class 속성에서는 공백으로 구분되는 여러개의 class가 표시될 수 있습니다...