IT/WEB20 [Bootstrap] Grid System 그리드는 사람들이 부트스트랩을 이용하는 가장 큰 이유이다. 그리드 시스템(Grid System)이란 페이지의 정보를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽 디자인 시스템을 말한다. 배운 것 부트스트랩3에서 Grid는 기본적으로 12개의 열로 분할하여 이용된다. col-lg-* 형태의 클래스로 구분한다. 예를 들어 col-lg-4가 3개이면 4*3=12 이므로 한줄로 표현 가능하다. 4개로 분할한 후 분할한 것 중 하나를 또 하나의 행을 만들어 분할 가능하다 예시 FIRST HALF OTHER HALF TOUR DATE! TOUR DATE! 초소형,소형,중간,대형 4가지 단계의 뷰가 존재하는데 각 크기마다 보여지는 모습을 다르게 할 수 있다. 예를 들어 가장클 때는 한줄에 4.. 2020. 10. 7. [Bootstrap] 부트스트랩 프로젝트 시작하기(버전3) 배운 것 부트스트랩은 css,javascript 라이브러리 부트스트랩을 이용하면 기존에 만들어진 디자인들을 빠르고 편리하게 이용가능하다. 부트스트랩 설치 및 이용방법(css) 부트스트랩 홈페이지에 들어가서 직접다운로드를 한 후 css/bootstrap.css 파일을 html 파일과 연결해서 사용하거나 홈페이지에 있는 css 링크태그를 html에 추가하여 사용가능하다. 부트스트랩 문서를 잘 활용하면 원하는 디자인을 추가할 수 있다. 2020. 10. 7. [CSS] Image 갤러리 만들기 실습 아래와 같은 갤러리 페이지를 만드는 실습을 해보았다. DAVE/Photo photos.css img{ width: 30%; float: left; /*이미지간 공백없앰*/ margin: 1.66%; } p{ font-family: Raleway ; margin-left:1.66%; font-size:23px; font-weight: 800; text-transform: uppercase; border-bottom:2px solid #f1f1f1 ; padding-bottom: 20px; width: 30%; } Raleway 폰트는 구글 폰트를 통해 다운로드했다. margin은 딱 100을 맞추기 위해(1.66 * 6 + 30*3) 1.66%로 주었다. 2020. 10. 7. [CSS]Box Model,실습 Box Model margin 경계선 외부의 공간 p{ margin:100px; margin-top :10px; margin: 10px 20px 40px 10px; margin: 10px 40px; } border 경계선 p{ border: 2px solid blue; border-color:red; /* border-bottom: 10px; */ } padding 실제 내용과 경계선 사이의 공간 /* Padding */ padding: 10px; padding-left:40px; content ( width and height) 실제 내용 width: 50%; /* %는 부모요소에 따른 비율을 말한다 */ /* height: 300px; */ 전체 사용예제 p{ /* Content - Width and.. 2020. 10. 7. 이전 1 2 3 4 5 다음
