CSS 바깥여백(margin), 안 여백(padding), 경계선

오늘은 CSS 바깥여백(margin), 안 여백(padding), 경계선

내용을 정리해 볼 것이다.

 

와 개졸려

 

와~~~~

 

 

 

이렇게 입력 가능.

 

 

 

 

 

근데 height를 지정할 경우,

박스의 내용이 길면 삐져 나오게 된다.

이렇게 

 

내용 출처: <“중요한 것은 세계를 변화시키는 것”임을 몸소 실천한 혁명가 > https://wspaper.org/article/20029

이런 상황을 overflow라고 한다. 

 

 

그럼 네 가지로 overflow를 조정하면 된다.

 

1) visible

보통 브라우저가 태그 밖으로 넘치는 내용을 처리하는 값이다.

 

 

2) scroll

 항상 스크롤이 생긴다는 단점이 있다.

 

 

3) auto

스크롤바가 필요 시에만 나타날 수 있게 한다. 

 

 

4) hidden 

박스 밖으로 넘치는 부분은 표시되지 않지만

float을 사용해 레이아웃을 잡을 때

유용하게 사용할 수 있다.

 

 

최소/최대 속성 정하기

만약 페이지 폭을 최소 760픽셀로 하되

1200픽셀 이상으로 커지는 일은 방지하고 싶다면

min-width, max-width 를 사용하면 된다.

 

 

워후.. 나 탈모인가 머리카락이 막 빠지네.

 

 

부유 요소(floating content)로 내용 감싸기

float은 HTML 수업 내용 정리에서도 

열라게 정리했던 내용이라 겹치는 내용은 빼고

내가 새롭게 알게 된 내용 위주로 정리해보고자 한다.

 

float은 <img>같은 인라인 요소에도 사용할 수 있다.

웹 브라우저는 부유 인라인 요소

(floated inline element)를 블록 수준 요소와

동일하게 취급한다.

 

블록 수준 요소에 float을 적용할 땐

width를 설정해야 한다.

이미지를 제외한 모든 부유 요소에

float을 적용할 때는 width를 설정해야 한다.

 

 

 

 

 

와...

 

때로 float에 부유 요소를 무시하라고

지시해야 될 때가 있다.

 

 

왜냐면 부유 요소들끼리 서로의 옆에 모이면

디자인이 이상해질 때도 있기 때문이다.

 

이렇게.. 

 

따라서 CSS에는 clear 속성이 있다.

 

clear 속성이 적용된 요소는

부유 요소의 주변을 감싸지 않는다.

 

clear: both를 활용하면 해결 가능.

 

 

 

 

어휴

이렇게 하는 게 맞는지 모르겠네 ㅋㅋㅋㅋㅋㅋㅋ 

왜 창을 움직이면 글씨가 따라서 움직여 ㅇ ㅏ ㅇ ㅏ~~!!!!!!

화난다!!!!!!!