안녕하세요 아기크롱입니다.
작성된 글을 읽으시면서 빼먹은 부족한 부분은 댓글고고^^
그럼 시작합시다
" 간단히 익히는 div의 float 속성 "
** 박스 이동, 정렬(float 속성)
속성 float
값 left, right, none, inherit
기본값 none
적용대상 position 속성의 값이 "static"인 element(content 속성으로 생성된 내용 제외)
속성 값에 대한 의미는 다음과 같습니다.
(1) float: left 그 element를 왼쪽으로 float된 블록 박스로 만듭니다.
(2) float: right 그 element를 오른쪽으로 float된 블록 박스로 만듭니다.
(3) float: none 그 element를 float하지 않습니다.
float 속성을 적용하는 element는 어떠한 형태로든 폭을 지정해야 하는 규칙이 있습니다.
float는 뒤에 이어지는 다른 블록 레벨 element의 박스에서도 유효하며 float가 해제되지 않습니다.(clear 속성으로 해제 가능)
** 박스 이동, 정렬 해제(clear 속성)
속성 clear
값 left, right, none, both, inherit
기본값 none
적용대상 블록 레벨 element
속성 값에 대한 의미는 다음과 같습니다.
(1) clear: none float에 대하여 박스의 위치를 제약하지 않고 float는 계속해서 유효,
float는 해제되지 않습니다.
(2 )clear: left 왼쪽으로 float된 박스보다 아래에 새로운 박스를 생성하여 표시,
왼쪽 float 해제
(3) clear: right 오른쪽으로 float된 박스보다 아래에 새로운 박스를 생성하여 표시,
오른쪽 float 해제
(4) clear: both 좌우로 float된 박스보다 아래에 새로운 박스를 생성하여 표시,
좌우 양측 float 해제
참고1) "image파일을 정렬하기위하여 div안에 넣고 float를 사용하면 되겟구나"하는 생각을 문득 하게되었습니다
참고2) 중앙 정렬을 만들기 위해서는 margin: 0 auto; 와 같이 "auto"속성을 적용해야한다.
'WEB 기초 > HTML' 카테고리의 다른 글
| 특수문자와 문장/문단태그 사용법 (0) | 2018.11.17 |
|---|---|
| [input Tag] Input태그 사용법, 정규식표현 (0) | 2018.11.17 |
| [Table Tag] 테이블 태그 (0) | 2018.11.15 |
| [ul/ol Tag] 리스트 태그와 정렬태그 (0) | 2018.11.15 |
| 멀티미디어(이미지, 오디오, 비디오) 태그 (0) | 2018.11.15 |