CSS 7

Float

html요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만드는 속성 현재 웹페이지의 레이아웃을 작성할때 자주사용 left 자신포함 블록의 좌측에 있음 right 자신포함 블록의 우측에 있음 none 아무것도 없음 inline-start 자신포함 블록의 시작 쪽에 있음 inline-end 자신포함 블록의 끝쪽에 있음 clear:both; float속성 영향을 받지 않도록 하기 위해사용한다 overflow html요소가 자신을 감싸고 있는 컨테이너 요소보다 크면 해당요소의 일부가 밖으로 흘러넘친다 overflow: auto를 하면 자동으로 내부요소 감쌀만큼 커진다 html nav nav nav section 태그입니다 float: left를 해주었습니다 article 태그입니다 margin-left: 28..

CSS 2022.02.15

position

정적위치(static position) {position : static;} 아무런 영향주지 않는다 기본값이다 html position의 속성확인 인라인블럭으로 정적위치 : position의 기본값 css .static{ position: static; background-color: aquamarine; width: 200px; height: 100px; } 상대위치(relative postion) {position : relative; left: 30px;} 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용 오프셋은 다른 요소에는 영향을 주지 않는다 html 상대위치 : 원래 가진 정적 위치의 값에서 이동한 위치 css .relative{ position: ..

CSS 2022.02.14

visibility속성

문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨긴다 table태그에도 사용가능하다 visible 해당 HTML 요소를 웹페이지에 나타낸다 hidden HTML요소를 웹페이지에 나타내지않음 여전히 웹페이지의 레이아웃에는 존재 collapse 동적인 테이블에서만 사용가능. 테이블의 테두리를 한 줄로만 보여준다 display를 none으로 설정한 것과 동일하게 요소를 숨기고 차지하던 공간도 제거한다 hidden과 collapse는 화면상으로는 나오지 않지만 레이아웃만 존재한다none은 화면상으로 나오지도 않고 레이아웃도존재하지 않는다

CSS 2022.02.14

Block vs Inline

Block 자동 줄바꿈이 되어 한줄을 다 차지하게 된다 전체 영역구조 차지 크기 지정반영된다 ex) 서식을 입력합니다 서식을 입력합니다 * display값을 inline으로 바꿔주면 한줄을 다 차지하지 않고 그 콘텐츠만차지한다. 서식을 입력합니다 서식을 입력합니다 Inline 자동 줄바꿈이 되지 않아 요소의 컨텐츠의 크기만큼 공간을 차지하고 있다 weight height 적용불가 margin paddin top bottom 적용불가 text-aline: center 가운데 정렬 불가 ex) 서식을 입력합니다 서식을 입력합니다 * display값을 block으로 바꿔주면 새로운 줄에서 시작하고 한줄을 다 차지한다. 서식을 입력합니다 서식을 입력합니다 lnline-block block과 inline 특징을 ..

CSS 2022.01.31