본문 바로가기

WEB/CSS3

CSS3 레이아웃 Block 과 Inline block : 한 줄을 전부 차지 ,,,,,,,,, 공부를 좀 재밌게 하는 방법이 없을까? 이것저것 해보면서 재미를 붙여보는 게 어때애?! 솔직히 문과 공부보다는 재밌을 수밖에 없을텐데 그치그치?! 기술이잖아. 배우면 는다고! div1 div2 div3 div4 레이어(z-index) : 레이아웃이 겹칠 때 태그 { z -index : 값 } : z-index가 클 경우 위에 표시되고, z-index가 낮은 경우 가려진다. (3차원 큐브도형의z축) OverFlow 블록1 블록2 블록3 블록4 블록5 레이아웃 nav content footer 제주도 민박 가장 제주다운 민박집 이용안내 객실소개 예약방법 예약하기 제주 민박 소개 제주 서귀포 게스트 하우스형식의 현대적 민박집을 소개.. 2022. 6. 20.
CSS - 박스 모델 박스 모델 - 웹 브라우저는 HTML 내의 요소들을 사각형으로 간주하고 웹 페이지에 출력시킨다. - 요소들을 박스 형태로 그리는 것을 박스 모델이라 한다. - 박스는 배치, 색상, 경계 등의 속성을 가진다. - 각 박스는 margin(바깥쪽 여백),border(경계선),padding(안쪽 여백)을 가진다. - 경계선(border) - 경계선과 내용 사이의 간격 : 안쪽여백 (padding) - 요소와 요소 사이의 간격 : 바깥여백(margin) - 스타일 측면에서 문서는 하나 이상의 엘리먼트 박스(body)들로 구성되어있다. - 안쪽 박스 모델 영역은 바깥쪽 상위 박스 모델의 내용 영역 안으로 제한됨 (박스 안에 박스가 포함되어 있을 수 있음) 예) 상위박스중간제일안쪽 박스 모델 스타일 속성 width .. 2022. 6. 16.
CSS 기본 예제 CSS 기본 예제를 통해서 어떤 화면이 출력되는지 확인해보자 예제 1) - 와 태그는 인라인 요소 - 태그는 블럭 요소 - >(gt;) 직계 자손을 가리킴 - a:hover (마우스가 태그 위에 올라갔을 때) / a:link(링크로 연결) / a: active(마우스 클릭 시 효과)/ a:visited(한 번 이상 방문한 링크) 버튼1 버튼2 버튼3 버튼4 버튼5 버튼6 버튼7 버튼8 예제2 - 스타일 적용 우선순위 : 인라인 > 내부 스타일 시트 > 외부 스타일 시트 - 실습 스타일 시트 내부 스타일 시트에 의해 적용됩니다. 실습 외부 스타일 시트에 의해 적용됩니다. @charset "UTF-8"; h1 { color: red; } p { color: #0026ff; } 예제3 - id는 클래스와 달리.. 2022. 6. 15.

티스토리툴바