Enjoy Programming

노마드 코더 챌린지 2번째 css-master 코스다 현재 코코아 클론 챌린지는 끝냈고 css-master코스와 vanilla javascript 코스 두개를 병행한다 그리고 유튜브 클론코딩과 es6강의도 함께 병행 하고있다.~ 시간이 부족하다 ㅋㅋ 어제 첫 레이아웃 챌린지는 이 포스터를 클론했다. flex-box를 이용해서 하는 건데 우선 내가 짠 html코드는 이렇다. 총 세개의 섹션으로 구분하고 헤더부분에 heading tag 두개 그리고 보더라인 아래 리스트 형태의 텍스트가 있는데 이것은 ul과 span으로 구분하고 ul에 li를 다 때려박았다. 마지막 섹션은 서클들이 들어가는데 아무래도 배운내용이 flex-wrap을 이용하는 것 같으니 하나의 박스에 다담았다 위 ul도 마찬가지다. 이제 css를..

flexbox는 width와 height를 설정했더라도 몇개를 만들었든 한 라인에 모두 정렬된다. 만약 7개의 200width를 가진 박스를 flexbox로 만들어주면 사진에서 보이 듯 그냥 다 때려박는다. 이말은 flex-wrap이 default로 no wrap상태라는 거다. flex-wrap이란 The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked. CSS: Cascading Style Sheets | MDN CSS: Cascading St..