Contact Us 페이지 만들기 (semantic tag, float)

HTML/CSS 활용해서 아래와 같은 페이지 만들기

 

[HTML]

Semantic tag 를 사용해서 코드를 작성해보았다

Semantic tag에 대한 설명 없이 <div> 태그로만 배우게 되는 강의를 몇 번 들었었는데 

우연히 유튜브 드림코딩에서 시맨틱 태그 강의를 보았고 <div> 만 사용하는 것보다 훨씬 구조를 파악하는데 쉬워보여서 

시맨틱 태그를 사용하는 습관을 들여야겠다고 생각했다

 

 

- 잊지 말고 기억해야 할 것

[CSS]

float를 주면 그 다음 요소에 꼭 clear: both 적용할 것! 

 

MDN 에서 float 에 대해 살펴보았다

내가 이해한 바로는 float 은 흐름에서부터 떨어져 나와서 왼쪽이나 오른쪽에 배치할 수 있는 속성인 것 같다

흐름에서부터 떨어져 나왔기 때문에 그 다음 요소에 clear 를 주지 않으면 float 을 준 요소를 인식하지 않기 때문에 float을 준 요소는 생각하지 않고 자기 갈 길을 가는 느낌...? 

 

다음 번에 float 을 해제할 수 있는 다른 방법들도 찾아봐야겠다