Input element / Display : inline, inline-block

 코드카데미 문제를 해결하다가 어려웠던 부분이 있어서 공부하는 겸 기록을 위해 남겨놓는 포스팅. 

 

과제로 주어졌던 문제는, 주어진 inline CSS를 ruleset CSS로 옮기는 작업이었다. 근데 input element와 form element를 처음보다 보니 어떤 부분을 남겨야하고 어떤부분을 옮겨야 하는지 순간 멘붕이 왔었다. 차근차근 다시보니 input의 기본 구조만 남기고 style attribute에 적힌 것들만 옮기면 되는 일이었다. 

 

 input 자체에 딸려있는 type 속성 덕분에 input은 강력한 기능을 발휘하게 된다. 

 

 

다음 문제에서 막혔던 것은 Display를 활용한 도형의 배치. inline 과 inline-block 개념을 익히는 데 스트레스를 너무 많이 받았다 ㅠ