공부/CSS6 기본적인 페이지 구도 이해 블럭 h1 - h6 p ul ol li form filedset sectioning 블럭의 특징 = 가로(border좌우+margin 좌우+ padding 좌우+ width가 auto) == 부모의 width만큼 커진다. 블럭요소의 가장 큰 특징 => 크기 (width , height , margin padding)를 가질수 있다. 아래쪽으로 쌓인다. container 박스가 있다면 그 하위요소를 정리하는것 인라인 = X 크기를 가질수없다.> 행에 들어갈 수 있다. but input, img 태그는 크기는 가질수 있다. 테이블 = O 데이터를 정리하는 역할 인라인블럭 = O 행에들어가지만 크기를가질수있다. ul 의 자식요소는 li만 가능하다. ul과 li이 사이에는 다른요소를 넣을수 없다. 인라인 태그는.. 2022. 5. 17. White space, Animation 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 .area{ width: 300px; background-color: #ddd; } .ell{ white-space: nowrap; /* 줄바꿈금지*/ overflow: hidden; text-overflow: ellipsis;/* clip:자르다 / ellipsis:생략 */ } .nr{ white-space:nowrap; } .nor{ .. 2022. 4. 4. Css Position normal flow 웹 페이지에 나타난 순서대로 HTML 태그 배치 position 프로퍼티를 이용하여 normal flow 무시 가능 position 프로퍼티를 이용한 배치 방법 정적 배치 - position : static(디폴트) 상대 배치 - position : relative 절대 배치 - position : absolute 고정 배치 - position : fixed 유동 배치 - float : left 혹은 float : right position 프로퍼티를 사용할 때, 태그의 위치와 크기 top, bottom, left, right, width, height 프로퍼티로 지정 이들 프로퍼티는 배치 방법에 따라 다르게 사용됨 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 1.. 2022. 3. 24. Css 글꼴과 외부시트, 박스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 ** Font, aTag, Button ** * { font-family: fantasy;} .f1{ font-family: Arial; font-size: small; text-decoration: underline; } .f2{ font-family: test, myFont, wide latin, 맑은 고딕; /* 없는 글꼴은 통과, 먼저 찾은 글꼴이 적용되고, 모두 없으면 브라우저 기본글꼴 적용됨 */ font-size : x-large; text-decoration.. 2022. 3. 17. Css Selector 상속과 종속 123456789101112131415161718#div1 > h4{ /* 부모자식*/ --> 바로 속해있는 것들만color : blue;}#div2 h4{ /*부모 후손*/ --> 간접적으로도 속해있는 것들도color : red;}#div1,h4{ /*합집합 단, id 가우선적용*/color : green;}h2.c1{ /*교집합*/font-style : italic;}h3:nth-child(2) { color : red; } --> body 부분으로부터 2번째 자식 개체h3:nth-child(3) { color : #FF0000; }h3:nth-child(4) { color : rgb(255,0,0); }h3:nth-child(5) { color : rgb(100%,0%,0%); }Colored by.. 2022. 3. 14. Css Tag Style 적용 1. CSS(Cascading Style Sheets) : 웹페이지에 자주 적용되는 부분들은 미리 정리하고 조합하여 정의한 후 페이지 내부에서 필요할 때마다 해당부분을 적용하는 스타일 시트중 하나 `Cascading : => 종속적인, 계층적인 Style Sheets 2. CSS의 특징 ① 기존의 HTML기능을 확장해서 사용할 수 있다. => HTML로는 부족한 레이아웃이나 폰트등에 다양성을 부여해줄 수 있다. - 폰트 크기는 지정하는 수치에 따라 마음대로 조절가능 - 자간/행간 배치가 자유로워 가독성을 높인다. - 링크상의 밑줄 변형이 자유롭다. - 페이지의 여백을 원하는 만큼 만들어 줄 수 있다. ② 한번의 지정으로 웹 문서 모든 곳에 적용할 수 있다. ③ CSS는 상위의 기능을 상속받을 수 있다. .. 2022. 3. 11. 이전 1 다음
