Enjoy Programming

그리드 템플릿의 영역 지정에 대해서 알아보자. 4개의 박스를 그리드로 지정하고 grid-template-columns를 200px씩 지정해주고 grid-template-rows를 300px씩 지정해줬다. 이걸 간편하게 쓰는 방법이 있는데 바로 repeat()함수를 사용하면된다. repeat( lines, px ) 이런 식으로 지정해주면 된다. 상기 이미지의 경우 rows와 columns를 repeat(4, 200px), repeat(4, 300px)로 지정하면된다. 자 이상태에서 html의 골격에 맞게 header는 위쪽 가운데 content와 nav를 가장 아래 footer를 넣어주자 이때 사용할 속성이 grid-template-areas: 이다!! 사용방법은 먼저 내가 배치하고 싶은 박스들에 이름을 ..

오늘 챌린지 종목은 box다루기 이다.,~ 이런 box layout 만들기. requirement - use external css 외부 css 파일 임포트 하기가 전부다 자 만들어보자 그냥 보면 배경화면색주고 div로 박스 하나 만들어주고 박스안에 박스 세개를 만들어주자. 그리고 background-color에 #ff6447을 바디에 준다. ( colorzilla로 색은 따오면 된다. ) 똑같이 바디안의 첫번째 박스에 #f5deb3색상을 주자 그리고 그안 박스에 #008080색을 준다. 아직 박스 크기들을 설정은 안해줬으니 될리가 없다. 음 페이지롤러로 사이즈 재보니 대충 첫번째 박스가 240px씩이고 그 안에 세개는 60px씩이다 주자 이런 박스가 만들어졌다~~~ 이제 해야할 것은 화면 중앙에 배치해..