오늘도 쓰는 어제 배웠던 수업 내용 정리.
레이아웃을 만드는 속성 float에 대해 배웠다.
정말 어려웠댜.. 흑흑흑흑흑
하지만 이해하고 소화해내야해,, 왜냠 난 프론트엔드 개발자가 될 거니까!!!!!!!!!!!!!!
그. 러. 나.
나는 웹표준 수업을 들은지 이제 한 달 지난 초짜기 때문에~^^^
내가 배운 내용을 정리하는 용도이므로 오류가 있을 수 있습니다~~~
만약 오류가 있다면 댓글로 친절히 알려주세요.
참고로 내 의문사항은 밑줄이 쳐져있음.
레이아웃 속성은 아니지만 레이아웃에 많이 사용하고 있음.
여백속성
1. margin 박스의 바깥쪽
2. padding 박스의 안쪽
margin
1. 바깥쪽 여백(**위치를 바꿀 수 있다!!!)
2. margin-top / margin-right / margin-bottom / margin-left
3. margin: top right bottom left
margin: top right bottom (same right)
margin: top / bottom right / left
margin: all
4. margin: auto
상하 여백 0, 좌우 여백 동일
블럭 요소를 가운데로 정렬하고 싶다면
= margin : 0 auto 이렇게 써주면 된당.
margin은 T R B L 열두시 시계 방향 순으로 적용된다.
위는 margin을 10px 20px 30px 40px로 넣었을 때 코드.
요렇게 보인다.
top에 10px, right에 20px, bottom에 30px, left에 40px가 적용된 모습.
만약 어느 한 방향의 값이 없으면 반대쪽과 똑같은 값이다.
(left값 없으면 오른쪽의 값과 똑같음)
생략된 방향이 아랫쪽과 왼쪽이면 위, 오른쪽과 똑같은 값!
값이 하나면 네 개의 방향에 똑같은 값을 준다.
padding과 border도(둘다 크기 바뀜) margin과 사용방법 똑같다.
* 인라인을 가운데로 보내는 건(text일 경우엔) text-align:center
*padding
1. 안쪽 여백(**크기가 바뀔 수 있다!!!)
2. margin 사용법과 동일하다.
필요한 크기가 있으면 더하기 빼기 해야 된다.
코드는 margin과 똑같다.
자세히 보면 점선으로 padding 값을 준만큼
크기가 커진 것을 확인할 수 있다.
★★★그리고 오늘 배운 중요한 속성!!!!★★★
* float (별명은 옆으로 나란히~)
1. 선택된 요소를 위로 띄우는 속성
2. 위로 이동하면서 생긴 빈 자리에 다른 요소가 이동
3. left / right
4. 요소의 레벨이 inline-block 형식으로 변경!!!!!!!!!!!
5. 형제와 부모 관계의 요소들끼리만 적용★
6. 수직 구조의 요소를 수평 구조로 변경
7. 수평으로 나열될 모든 요소에 float 속성 적용
8. 자식 요소의 길이합이 부모 요소의 길이보다 길면
부모 요소의 길이를 초과하는 요소들이 아래쪽으로 이동
(태그 작성 순)
이런 정신 사나운 세로 박스 상태에서
레이아웃의 모습을 갖춘 정돈된 박스를 보고 싶다면??
float을 사용하면 된다!!!!
이렇게 float을 주면
짜잔~ 깔끔쓰한 레이아웃 완성.
만약 footer에 float:left를 주지 않으면 저렇게 위로 올라가 버린다.
왜냠 float을 주면 아까 설명했던 그림처럼 레이어가 붕 뜨니까!
(참고로 위로 올라가 버리는 걸 보이기 위해서
footer의 width를 1000으로 수정했다)
따라서 float은 float을 막는 용도로 사용이 가능하다.
그 다음 배운 게 clear.
* clear
1. float 속성을 해제한다.
2. left / right / both
clear를 사용하는 이유는
float을 매꾸는 역할!!
부모요소가 바뀌어도 올라가지 않게 하려면 사용한다.
근데 왜 clear:both를 footer한테 주지..???????
선생님이 마지막으로 뭐 하면서
css 속성의 종류 / 우선순위, 상생을 꼭 공부하라고 하셨다.
★★★ position: Absolute/Fixed > float > margin:Auto(+witdth, p:Static/Relative)
다음 시간에 position 배운다면서
float의 약점을 얘기했는데(float과 뭘 동시에 쓸 수 없다고 했던 거 같은데
기억이 나질 않아....... ★ 암튼 오늘 정리는 여기까지,,,)
'HTML 웹표준 수업 정리' 카테고리의 다른 글
| position relative, absolute, fixed 정리 (0) | 2020.07.07 |
|---|---|
| 가변형 레이아웃을 만드는 세 가지 방법~~~ (0) | 2020.06.24 |
| 레이아웃을 하기 위해 알아야 하는 선행 지식, html 상식 (0) | 2020.06.13 |
| form 태그 표준화 마크업, 접근성 높이기 (0) | 2020.06.12 |