웹개발 수업/CSS (9) 썸네일형 리스트형 [Day +57 / CSS 과제]홈페이지 직접 만들어보기 보호되어 있는 글입니다. [Day +55 / CSS]CSS 기초(14. 컬럼 나누기 실습2, 15. 그리드 실습) 보호되어 있는 글입니다. [Day +54 / CSS 과제]레이아웃 스타일 실습2 보호되어 있는 글입니다. [Day +54 / CSS]CSS 기초(13. 풀스크린 실습, 14. 컬럼 나누기 실습1) 보호되어 있는 글입니다. [Day +54 / CSS]CSS 기초(10. 레이아웃 스타일(배치) , 11. 레이아웃 스타일(flex), 12. 레이아웃 스타일(grid)) 210907 화 10) 레이아웃 스타일(배치) 배치 관련 스타일 -position 속성 -static : 일반적인 문서 흐름에 따라 배치(기본 값). top, right, bottom, left, z-index 등의 속성이 아무런 영향도 주지 못함. -relative : 일반적인 문서 흐름 따라 배치. 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용함 다른 요소에는 영향을 주지 않아 공간 차지는 static일 때와 같음 -absolute : 일반적인 문서 흐름에서 제외되며 공간도 차지하지 않음. 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치되며 top, right, bottom, left가 위치 결정 -fixed : 일반적인 문서 흐름에서 제외되며 .. [Day +53 / CSS 과제]텍스트 스타일 실습, 레이아웃 스타일 실습 보호되어 있는 글입니다. [Day +53 / CSS]CSS 기초(7. 테두리 스타일, 8. 레이아웃 스타일(인라인 블럭), 9. 레이아웃 스타일(여백)) 210906 월 7) 테두리 스타일 레이아웃 스타일 width와 height 내용이 차지하고 있는 영역의 크기를 조절할 수 있는 속성 고정 크기 가변 크기 화면 배치 방법 변경 블럭 요소와 인라인 요소의 속성을 변경하여 배치 방식을 변경할 수 있다. 블럭 요소 : 한 줄 전체 차지하는 요소. 한 줄에 여러 요소가 올 수 없는 요소. Ex. div, p, hn, ul, ol, form, hr, table, fieldset, ... 인라인 요소 : 한 줄에서 일부분만 차지하는 요소. 한 줄에 여러 요소가 올 수 있는 요소. Ex. span, img, input, textarea, lable, button, br 두 요소의 특징 블럭 요소는 줄 바꿈 발생, 인라인 요소는 발생하지 않음 블럭 요소는 width와.. [Day +53 / CSS]CSS 기초(5. 텍스트 스타일, 6. 배경 스타일) 210906 월 #ff1 { font-family: "궁서체"; } #ff2 { font-family: "돋움체"; } #ff3 { font-family: "없는글꼴", "굴림체"; } #web-font{ font-family: 'Allison', cursive; } /*font-size 속성*/ #size1{ font-size : 30px; } #size2{ font-size : 2em; } #size3{ font-size : 150%; } /*부모 요소 ul의 크기 변경*/ #size4{ font-size : 200%; } /*고정크기 px의 경우 위의 ul과 다르지 않음*/ #size5{ font-size : 30px; } /*부모 요소의 2배*/ #size6{ font-size : 2em; } #.. [Day +52 / CSS]CSS 기초(1. 기본 선택자, 2. 다양한 선택자1, 3. 다양한 선택자2, 4. 선택자 우선순위) 210903 금 CSS 1. 웹페이지 구성 -문서 내용 작성과 꾸미는 부분을 분리하여 내용을 수정해도 디자인을 바꿀 필요가 없고 디자인을 수정해도 글 내용을 바꿀 필요가 없음 -다양한 기기에도 디자인만 따로 적용하여 구동시킬 수 있음 2. style과 stylesheet -style은 정해진 속성을 입력하여 웹 페이지를 꾸미는 것 -stylesheet는 웹 페이지에서 반복적으로 쓰는 style을 모아놓은 것 *스타일 기본 형식 p{text-align: center;} 1) 기본 선택자 CSS 기본 선택자 선택자란 특정한 HTML 태그를 선택할 때 사용하는 기능으로, 태그를 선택하여 원하는 스타일과 기능을 적용할 수 있다 모든 선택자 HTML 문서 안의 모든 태그를 선택할 때 전체 선택자를 사용할 수 있다.. 이전 1 다음