[chap.2]overflow visibility display

안냐심까~~~ 저번글(box model)이 너무 길어져서 왠지 제가 루즈해지는 거 같아 한 번 끊고 왔습니다

그럼 바로 시작합니다

 

overflow

위처럼, content가 너무 커서 요소의 box안에 다 담을 수 없을 때 처리할 수 있는 방법.

아래의 세가지가 있다.

overflow:hidden; 요소의 크기보다 큰 부분은 가려짐

overflow:auto; 요소의 크기보다 큰 부분이 있으면 스크롤생성, 키보드 컨트롤x

overflow:visible; 그냥 기본형태. 위의 이미지가 이것이다. auto, hidden 속성을 초기화

 

 

1. overflow: hidden;

처음 이미지에 hidden값을 주면 이처럼 초과되는 content는 그냥 안 보이게 된다.

 

 

2. overflow: auto;

스크롤이 생성된다

 

 

hidden과 auto의 경우엔 반드시 height값이나 width와 height값 둘 다 설정해주어야한다.

그렇지 않으면 어차피 box가 무한대로 늘어나서

content가 숨겨질일도, 스크롤이 필요할 일도 없을테니 말이다

 

 

 

CSS reset

 

마침 내가 조금 전까지 이유를 몰라 헤매고 고민하던 내용이 지금 등장했다. 

분명 margin값을 설정한 적이 없는데 이상하게 렌더링만 하면 자동으로 간격이 띄워져있더랬다.

마진상쇄도 아니고 대체 뭘까 긴긴 고민 끝에 일단 그 태그에 margin:0;을 주는 걸로 마무리 했었는데

알고보니 크롬 브라우저에서 기본으로 설정되어있는 스타일 때문이었다.

이렇게 간단한 이유였다니..

그래도 덕분에 이 리셋의 목적을 바로 이해할 수 있었다.

위는 아~주 간단한 css reset이다.

따로 margin과 padding을 설정하지 않은 태그, 속성 등은 그것들을 다 0으로 맞춘다는 의미

검색해보면 css reset 코드가 많이 나온다. 가져다가 내가 원하는대로 변형하고 덧붙여서 쓰면 된다.

 

http://meyerweb.com/eric/tools/css/reset/

이건 Eric meyer이라는 분이 만든 css reset. 기본적인 내용을 담고있다

찾아보면 약간의 스타일이 가미된 css reset도 많다.

 

 

Visibility

요소에 의해 생선된 박스가 보여질 것인지 말것인지 결정.

display:none; 으로 설정하지 않는이상 모든 박스는 레이아웃에 영향을 미친다

• hidden — hides an element.
• visible — displays an element.
• collapse — collapses an element.

+ 부모요소로부터 값을 상속받는 inherit도 있다

 

 

귀여운 table이 있습니다~

이게 기본상태 즉 visible이다.

 

이건 palm tree visibility에 hidden값을 준 경우! 그 자리만 비어져 있다

collapse도 hidden과 같은 결과를 보이는데 collapse는 table에만 적용할 수 있다.

 

display: none; 을 입력한 경우 아예 재정렬이 되어버렸다.

screen reader에도 인식되지 않는다

그럼 display요소에 대해 더 알아보자

 

display

 

visibility가 보일지 말지를 결정하는 요소라면

display는 어떻게 보일지를 결정한다.

크게, 인라인 요소를 블록처럼 작용하게 하거나 그 반대일 때 많이 쓰인다.

위에서 display:none; 에 대해선 알아봤고,

여기선 크게 세가지를 알아볼것이다

display:block;

diplay:inline;

display:inline-block

 

display:block과 display:inline은 각각 인라인요소를 블록요소로,

블록요소를 인라인 요소처럼 보이게 만들 수 있다.

 

 

우선, 블록태그와 인라인태그에 똑같이 스타일을 주었다

인라인태그에는 width, height가 적용되지 않았다. padding과 margins은 가로로만 적용(위아래x)

 

여기서 블록태그에 dispaly:inline;을 주면

당연함. 상하 마진값도 적용이 안 돼서 아주 맨위에 착 붙어버렸다.

이번엔 inline과 inline-block을 비교해보겠다.

빠른 이해를 위해 텍스트를 더 입력해보았다.

 

 

border에 padding과 margin이 적용은 되었지만 cotent 자체가 차지하는 건 역시 한줄 뿐이다.

그럼 이제 이 인라인요소를 inline-block으로 바꿔보자

(와중에 liine 뭐야 그냥 넘어가자 ㅎ..)

짠

완전히 박스 전체의 공간을 차지해 버린다. 즉 블록요소가 되지만.

두 블록이 같은 라인에 자리할 수 있게된다.

근데 왜 저렇게 두 블록이 줄이 안 맞나

이것저것 실험해본 결과

안에 content가 있을시 마지막 줄로 라인을 맞추는 것이었다.

오~~~ overflow:hidden; (혹은 auto)으로 맞춰주니까 얌전(?)해졌다. (쓸 일은 없겠지만..ㅋㅋ)

근데 이렇게 어거지로 박스 맞추는 거 말고

분명 첫줄로 라인을 맞추게 하는 방법이 있긴 할 거다

일단 지금은 패스~

정리해보자면

inline elements: width, height 수용x padding, margin은 좌우로만.

block elements: 다 수용. 라인 전체를 다 차지. 옆에 다른 element 올 수 없다

inline-block: 다 수용. 근데 옆에 다

른 element가 올 수 있음