Text-Shadow : h-shadow v-shadow blur color;- 그림자 오른쪽이동,그림자 아래쪽이동,블러, 색상. 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 #p1:hover{ text-shadow: 3px 3px 2px #aaa; } #p2{ border: 1px solid gray; box-shadow:3px 3px 3px #aaa; } #list{ border:10px solid gray; width:710px; } #list img{ border:1px solid gray; float:left; margin-left:10px; margin-..
요소의 위치를 지정하는 방법 1. padding - 내부요소의 위치를 지정할 때만 사용2. margin - 블럭(인라인) 요소의 위치를 지정할 때 사용.3. position - 애가 정석임.4. transform 요소의 위치, position- x좌표, y좌표- 좌표를 지정하는 방식이 여러가지 제공된다.- 좌표계 지정.1. position: static; -정적 좌표 - 좌표값을 이용해서 배치하는 방식이 아니다.(left와 top 무용지물.) - Flow Layout 방식+6333333333333333333333333336+ 2. position: absolute; - 절대 좌표 - 문서의 좌측 상단을 기준으로하는 좌표계 - 원래 있는 공간은 사라진다 - (**)자신의 직계조상 부모태그중 순서대로 검색하..
display- 요소의 출력 방식을 제어- none : 안보이기- block : 블럭태그- inline : 인라인 태그- inline-block : 인라인 태그(+크기(여백) 조절), 인라인이지만 블럭태그 처럼 너비를 가질 수 있음. 블럭태그의 속성 예제보기 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 #menu ul{ width:500px; border:0px solid black; padding:0px; } #menu ul li{ border:0px solid red; outline:0px solid red; display:inline-block;/* 성질(인라인) + 크기조절*/ widt..
Overflow 속성 - 부모태그 영역을 벗어날 만큼 자식이 많으면 부모를 빠져나감- 대부분의 사이트는 일정한 비율 혹은 공간(px)을 차지하게 되는데 이를 넘기는 경우 제어가 필요함.- 블럭태그- 속성값 : visible(default), hidden, scroll, auto 특징 1. overflow속성을 선언하지 않으면 해당 공간은 visible과 같다. - 디폴트값이 visible이기 때문에 2. hidden과 auto값을 이용할 경우엔 width와 height가 먼저 정해져야 함. - width와 height가 정해지지 않으면 content의 크기에 따라 자동적으로 늘어나게 되므로 어느 선에서 overflow가 되는지 논리적으로도 알 수가 없음. 3. hidden 태그는 내용만 잘린다. 잘리는 ..
HTML 수치 표현 1. 숫자 : px , 문자수2. 숫자% : 부모를 기준으로 하는 상대값.CSS 수치 표현- 반드시 수치 뒤에는 단위를 표시해야 한다. 1. pt : 포인트(글꼴 단위) 1/72 단위 2. px : 픽셀(화소) 크기,글꼴,여백,위치 등/* 글꼴크기 */font-size:14px3. em : 이엠 - 기본 글꼴 크기를 기준으로하는 상대크기 표현(%와 유사) : 알파벳 대문자 M의 높이가 기준.!/* 자간(글자 간격) */letter-spacing:0em;4. % : 퍼센트 - 부모를 기준으로 하는 상대 크기, 크기, 여백, 위치,정렬 등.../* 태그 너비 상대적 기준 */div{width:100%;}5. rem : 알이엠 -> 잘 안씀. --------------------------..
cs 2. id선택자- 태그에 명시된 id속성을 검색하는 선택자- 태그명#아이디- 아이디는 유일해야 한다. 1234567891011121314151617181920212223242526272829303132h1#title1 { color: red;}p#content1{ color :orange} 자기소개 자기소개 회사소개 회사소개회 강아지 괭이 병아리 송아지 망아지 cs 3. class 선택자- 태그에 명시된 class 속성을 검색하는 선택자- 태그명.클래스- 클래스는 중복 가능하다. 123456789101112131415161718192021222324252627282930313233343536p.content { color: orange;}li#cat{ color:orange;} li.pet1{ co..
CSS의 개념 및 특징, 사용법 CSS, Cascading Style Sheet- HTML의 요소(태그)에 서식을 적용하는 언어- 디자인 담당- 독립사용이 불가능. HTML언어에 기생하는 언어CSS 특징1. 골격(태그 + 데이터)과 서식을 분리2. 서식 관련 기능 강화 CSS적용방법 1. Inline Style Sheet, 인라인 스타일 시트-HTML 태그에 style 속성을 사용해서 적용하는 방식- style="CSS구문"- 특정태그 1개에만 적용하는 서식- 단점 : 서식코드를 재사용할 수 없다.- 장점 : 가독성 높음- (*)재사용이 필요없는 서식을 적용하는 용도.. 1회용 서식 ex) 문단입니다. 2. Embeded Style Sheet, 내부 스타일 시트- 페이지 상단에 3. External St..
