Dungx2

투명도(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. 하위 선택자에 대해서 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가 표시될 수 있습니다...

html에서의 css 사용해보기 1. inline 1)엘리먼트에다 스타일을 직접 기술하는 방법 2)셀렉트가 필요 엄씁니다. 3)css선언이 분명해서리 style tag 방식에 비하여 엘리먼트에다 영향을 주고 있는 css를 추적하기가 용이하다. 4)코드가 많아지고 (코드 생성양들이 많아진다),의미와 디자인의 분리라는 css의 방식에 벗어나게 된다. 2. style tag방법 1) style 태그에 적용하는 방법 2) 의미와 디자인의 나눔이라는 css의 방식에 부합한다. 3) inline 방식 대비하여 효과적으로 코딩 할 수 있다. 3.외부 파일 방식 1) 파일의 교체로 디자인을 변경할수 있단느 부분에서 유지 및 보수가 용의하다. 2) 문법적으로 style tag와 동일하다. 3) css를 별도의 파일로 분..

웹에 문서들과 디자인의 내용을 분리합니다. 웹의 표준에 의해 제작된 웹 문서들은 디자인과 내용들이 나누어져 있습니다. 내용들은 html을 이용하여서 구성하며, 디자인된 화면이나 디자인은 css를 사용하여 제작하는 것입니다. 내용들과 디자인은 구분되어 있기 떄문에, 사이트들 내용을 수정하여야 할때는 디자인에 절대적으로 영향을 주지 아니하고 내용들만 수정할수 있습니다. css 스타일 형식 1.내부 스타일시트 태그가 나타나기 전에 태그사이에는 스타일 규칙을 기록해줍니다. 2.외부 스타일시트 스타일 정보들을 별도로 파일로 저장한느 것 내용만 복사하여 메모장같은 곳에 붙여넣고 별도에 파일로 저장합니다. 스타일 속성에선 한가지 주의할것은, 스타일에 모든 속성들이 부모 요소에서 자식요소로 상속되는 것이 아니라는 사실..