HTML&CSS 1. 사각형안에 사각형안에 사각형을 만들기

사각형 안에 사각형 안에 사각형을 만들어보기

사실 이거 하나 만드는 데 수십번은 실패했었다....

저 파란색 사각형들이 왼쪽으로 밀려서 ^_ㅜ 도무지 해결이 안됐었는데

역시 끊임없이 만지다보면 얼떨결에 얻어걸리고 왜 됐는지 생각하게 되는게 혼자 고군분투 하는 것의 묘미가 아닐까...

(사실 왜 안되냐고 소리 백번 지름...)

 

1. HTML 안에 style 넣기

 

See the Pen Squere-HTML by baeseohee (@baeseohee) on CodePen.

 

2. HTML과 CSS 분리하기

 

See the Pen Squere-HTML_CSS by baeseohee (@baeseohee) on CodePen.

적용한 것

 

1. flex 사용
   • flex는 정렬이 쉽도록 도와준다.
   • display를 flex로 선언하면 부가적인 속성을 사용할 수 있다.
2. flex-direction: column;
   • 청록색 박스들이 세로로 정렬되어 있어서 flex의 주축과 교차축을 바꿔주는 column을 사용했다.
   • 더불어, 주축의 정렬을 정하는 justify-content와 교차축의 정렬을 정하는 align-items을 사용했다.
3. 다양한 border property 사용
   • 다양한 border property 중에 solid와 dashed를 사용했다.
4. 클래스 셀렉터
   • 보다시피 박스들은 여러가지 같은 특징을 공유하는데 색, 크기 등이 그 예이다.
   • 이런 것들을 클래스를 이용해 묶어서 정리할 수 있고, 클래스 셀렉터를 이용해 CSS에서 지목할 수 있다.