반응형 HTML+CSS35 부트스트랩 Layout의 시작 - BreakPoints, Container, Grid Bootstrap은 그냥 예제 코드를 가져다 복붙해서 사용하는 아주 편리한 방식을 제공합니다. 그래서 보통은 Button과 같은 엘리먼트를 먼저 사용해보면서 작동방식을 익혀나가게 되는데요, 웹사이트를 만들면서 정말 정말 중요한 것은 바로 Layout을 잡아나가는 과정이 될 것입니다. 레이아웃을 잡지 않은 상태로 버튼만 가져다가 사용하거나 하진 않을테니까요. 그래서 이번에는 부트스트랩을 사용할 때 마다 매번 반복되는, 초기 세팅방식과 레이아웃에 대한 이해를 해두기로 합니다. 부트스트랩 Layout의 시작 부트스트랩의 표어는 Build fast, responsive sites. 즉 반응형 사이트들을 빠르게 만들수 있다! 라는 것입니다. 사실 부트스트랩이 얼마나 큰 편리함을 제공하는가에 대해서는, 이미 HTM.. 2022. 12. 24. Bootstrap을 이용한 반응형 Article 만들기 기초 부트스트랩(Bootstrap) 부트스트랩은 CSS를 활용한 프레임워크라고 볼 수 있습니다. 뭔가 상당히 어려운 말로 들리기는 한데 결론적으로 웹 페이지 제작시 사용하게 되면 매우 큰 도움을 줍니다. Boot + strap = 신발끈? 부츠 앞을 조이는 끈을 영어로 부트스트랩이라고 하죠. 그래서 이번에는 아주 기초적인 부트스트랩 사용법을 정리해보기로 합니다. 결과물 미리보기 아래와 같은 결과물을 만들려고 합니다. 웹 페이지에서 흔히 볼 수 있는 제목 + 내용 + 버튼의 조합을 이루는 컨텐츠의 형태입니다. 부트스트랩은 '반응형'을 기본으로 하고 있기 때문에 기본적으로 반응형 결과물로 만들어집니다. 같은 결과물을 가지고 브라우저 가로 폭을 늘려보면 알아서 잘 반응형으로 보여집니다. 빈 HTML 문서 준비 VS.. 2022. 12. 11. 재미있게 Grid 공부하기 - Grid Graden 문제풀이 15~28 CSS에서의 Grid 시스템 이란? 이전 포스팅에서도 알려드렸던 내용을 잠깐 복습하고 가도록 합니다. Flex와 달리 Grid는 각 셀을 이루는 가로축 세로축 가이드라인(=Grid)를 기준으로 합니다. 양수로 카운트 할 때는 좌에서 우로 음수로 카운트 할 때는 우에서 좌로 Grid Number를 지정할 수 있다고 했습니다. 그리고 Grid의 시작은 부모(Container) 요소에서 display: grid;를 주는 것으로 시작합니다. 그리고 grid-template-columns와 grid-template-rows를 이용해서 바둑판 모양의 격자를 만들고 시작하게 된다고 했죠? #garden { display: grid; grid-template-columns: 20% 20% 20% 20% 20%; gri.. 2022. 12. 8. 재미있게 Grid 공부하기 - Grid Garden 문제풀이 1~14 얼마 전 포스팅에서 다룬 Flexbox Froggy와 더불어 Grid를 재미있게 학습할 수 있는 Grid Garden을 한번 풀어보았습니다. 이 문제도 한 1년 전쯤에 이미 풀어보았던 것인데요, 저의 경우 Flex를 더 자주 사용하다보니 Grid에 대한 기억이 가물가물해진 김에 다시 한번 문제를 풀어보게 되었습니다. 문제는 https://codepip.com/ 에서 회원가입/로그인을 진행하면 풀 수 있습니다. 저는 처음에는 Grid가 Flex 보다 더 직관적인 것도 같고 쉬운 것도 같고 그랬던 거 같았는데 Flex를 자주 사용하다보니 Flex가 오히려 쉬워진 감이 있습니다.^^; 최근 Web에서는 Layout 배치에 있어 Flex와 Grid를 잘 섞어서(?) 사용하고 있으니 두 가지 기능 모두 잘 살펴두.. 2022. 12. 7. 이전 1 ··· 5 6 7 8 9 다음 반응형
