[CSS]Day6 -Display/Float

Day6 -Display/Float-

<1> Display 속성

1. display: block;   --->width와 height 적용O / 자동 줄바꿈

block-level 요소의 기본값

어떤 요소를 문단처럼 구성할 수 있음

2. display: inline;   --->width, height 적용X / 줄바꿈X

inline-level 요소의 기본값

어떤 요소를 문장처럼 구성할 수 있음

3. display:inline-block;   --->width,height적용O / 문장으로 형성(줄바꿈X)

크기 지정이 가능한 문장요소

inline-block으로 적용 시 가로로 배치되는데 박스 사이에 공백이 생긴다.

공백 제거(코드 상의 줄바꿈을 주석으로 처리

<div id="box1">박스1</div><!--

--><div id="box2">박스2</div>

4. display:none;   --->화면 표시 X(숨김) -JS와 같이 사용

** 주석다는 법:

CSS 상에서: /* 내용 */

html상에서: <!-- 내용 -->

5. <a>태그 영역 확장 -링크의 영역 확장

• <a>태그의 display속성을 block이나 inline-block으로 지정하고 사이즈 적용시킴  ---> 클릭 가능한 영역이 확장
• <a>태그 안에는 block-level요소 포함 X ---><span>태그 사용 후 display속성을 block으로 설정
• <a>태그에 사용 가능한 태그 종류: <span> <br/> <strong> <b> <i> <u> <img>

** 박스 정 중앙에 텍스트를 배치시키는 법:

height값과 line-height값을 같게 설정한다.

6. 목록 정의 요소

list-style:none;   --->목록에 표시되는 기호를 제거

padding:0;   --->기호 제거 후 왼쪽 여백 제거

margin:0;   ---> 외부 요소와의 여백 제거

<ul>, <ol>에게 위 3가지 속성을 부여하면 2중으로 중첩된 <div>요소와 같이 초기화된다. 이후부터 <li>요소의 display 속성을 조절하여 메뉴를 배치

---

<2> Float 속성

:이미지나 박스를 부모의 좌/우에 고정시키고 문장을 그 옆으로 흐르도록 하기 위한 속성

float:left;   --->부모 박스 왼쪽 고정

float:right;   --->부모 박스 오른쪽 고정

float:none;   --->기본값(해제)

float:inherit;   --->부모값 상속(잘 사용 안함)

**주의할 점:

• width:auto값을 사용할 수 없음.   --->안에 <div>태그를 넣어서 auto값을 줘야 함.
• 새로운 문단을 시작하기 위해서는 이전 float을 off시켜야 함.
• 부모 요소가 float이 적용된 자식 요소를 감싸지 못한다.

--> 해결책: 이전 float 속성을 해제.(마감재)

부모요소가 끝나기 전(혹은 새로운 문단이 시작하기 전)

float:none; clear:both가 적용된 Block-Level요소를 배치.

1) 빈 <div>

2) 부모의 :after 가상 클래스를 사용해서

  content:""; display:block; float:none; clear:both;를 적용.

content: "";

display: block;

float: none;

clear: both;

** 두 개 이상의 Block-Level요소에게 float을 연속적으로 적용하면 박스의 배치 효과