-
- 목차
- 중첩 박스란?
- HTML, css를 이용해 중첩박스 적용해보기
- clear 속성의 이해
- HTML, css를 이용해 clear속성 적용해보기
- 내 멋대로 꾸며보기
1. 중첩 박스란?
박스에도 부모자식 관계가 있습니다.
감싸고 있는 박스를 부모박스라 부르고, 안에 들어있는 박스를 자식 박스라고 부릅니다.
중첩 박스는 곧 부모자식 관계를 가진 박스를 의미하고, 박스를 정렬하는 방법이 중요합니다.
2. 중첩 박스를 만들기 위한 HTML 작성 예시
3. css 적용법 예시
4. 박스를 가로로 배치하는 float 속성
float속성은 사전적인 의미로 '떠오르다' , '떠다니다'라는 의미를 가지고 있습니다.
웹 페이지에서는 float을 이용해 박스를 왼쪽이나 오른쪽으로 배치할 때 사용합니다.
만약 배치 하지 않을 경우 float : none; 속성이나 clear 속성을 이용한다.5. float 속성의 배치 방법
- float : Left; : 박스를 영역의 왼쪽으로 배치합니다.
- float : right; : 박스를 영역의 오른쪽으로 배치합니다.
- float : none; : 박스를 배치하지 않습니다.
6. float을 해제하는 clear 속성
float이 적용 된 박스는 해당 위치로부터 살짝 떨어지게 됩니다.
아래에 있는 박스들은 빈 공간을 채우기 위해 위로 치고 올라오는 현상이 생기는데,
이 현상을 막고 박스를 위에서 아래로 배치하려면 clear 속성을 이용해야 합니다.7. clear 속성의 종류
- clear : none; 기본값으로 clear 속성을 사용하지 않은것과 같습니다.
- clear : Left; 왼쪽으로 적용 된 float 속성을 해제합니다.
- clear : right; 오른쪽으로 적용 된 float 속성을 해제합니다.
알림. float 속성은 z축을 의미합니다.
8. clear속성을 적용하기 위한 HTML 작성법 예시
9. css 적용법 예시
알림. clear: both; 는 다시 처음으로 돌아간다는 뜻입니다.
컬러가 같을때 float: left;만 있는 애들은 div한테 적용해주면 더 빠르게 적용할 수 있고,
색이 다 다를경우엔 각각마다 다 float: left;를 적용해주어야 합니다.
10. box에 넓이, 높이, 글자 정렬, 줄 높이 적용해주기
많은 속성들을 사용하여 이렇게도 해보세요:) 주의. text-align: center; 사용 시 글자가 두글 이상이면 안됩니다.
11. 이모지도 넣어보기!
이렇게 이모지도 넣을 수 있어요! 마무리
오늘은 이렇게 중첩박스, float, clear 속성에 대해 배워보았는데요!
어떠셨나요?! 계속 복습을 하시다보면 점점 실력이 향상되는 걸 경험하실 수 있을거에요:)
저는 복습할 때 '안좋은 예' '좋은 예' 를 번갈아 적용시키면 속성들의 특징이 더 뚜렸하게
보이는 것 같아 이해하기가 더 좋더라구요!
오늘 하루도 정말 고생 많으셨고 모두모두 행복한 밤 되세용:)😍
