이런저런 개발 이야기

Block 요소들을 배치할 때 플렉스를 사용하면 다양하게 요소들을 배치할 수가 있게 된다. 이 플렉스의 자유로운 요소배치를 이용해서 반응형 웹의 프레임을 설계할 수도 있다. 플렉스를 사용해보기에 앞서 다음 코드를 확인해본다. ( 영역간의 배치를 확인해보기 위해 각각의 div에 border 클래스를 주어 경계선이 표시되게 하였다. ) 영역1 영역2 영역3 div는 block특성의 요소이므로 부모요소의 가로를 꽉 채운 상태로 각각 세로로 나열이 되게 된다. 1. d-flex 이 상태에서 영역을 감싸고 있는 div에 d-flex 클래스를 준다. 영역1 영역2 영역3 block 요소들인데도 in-line으로 성격이 바뀌어 위와 같이 가로로 자기 크기만큼 줄어든 상태로 배치가 된다. 한가지 유심히 볼 것은 d-f..

부트스트랩을 사용하면, 테이블 태그에 몇가지 클래스만 부여해 주기만 해도 테이블이 디자이너가 손본듯한 테이블로 깔끔하게 다듬어 준다. 먼저 꾸며볼 테이블은 아래와 같다. 컬럼1 컬럼2 컬럼3 컬럼4 항목1-1 항목1-2 항목1-3 항목1-4 항목2-1 항목2-2 항목2-3 항목2-4 항목3-1 항목3-2 항목3-3 항목3-4 보기만 해도 숨이 막히는 듯한 테이블이다.. 이걸 이쁘게 다듬어 나가보자. 1. 부트스트랩 테이블 지정 : table 일반 테이블을 부트스트랩 테이블로 만들려면 table 태그에 table 클래스만 주면 된다. ... 클래스 하나만 줬을 뿐인데, 테이블이 잘 정리가 되어졌다. 특징을 자세히 보면, - 테두리와 세로선은 보이지 않는다. ( 위 이미지는 일정부분 캡쳐 뜨면서 테두리가 보..

부트스트랩의 그리드 시스템은 반응형으로 동작하므로, 반응형 화면을 설계할 때 부트스트랩의 그리드 시스템을 이용하면 수월하다. 부트스트랩의 그리드 시스템에서는 가로 전체를 12칸으로 가정한다. 이 12칸을 이용해서 모바일화면, 태블릿화면, PC화면 등 해상도에 따라 어떻게 공간을 차지할지에 대해 정의를 할 수가 있다. 기본 예) 왼쪽영역 가운데영역 오른쪽영역 ( 위 예에서는 경계선을 주어(border 클래스) 눈으로 확인하기 쉽게 하였다. ) 전체를 div.row 로 감싸고 그 안에 위와 같이 div로 영역을 정의한다. 부여된 클래스의 의미는 다음과 같다. col-숫자 : 숫자에는 1부터 12까지의 숫자가 들어갈 수 있다. 전체 12중에서 지정된 숫자만큼의 가로폭을 가지게 된다. 위 예는 2칸씩의 공간을 ..

부트스트랩4를 사용하려면 아래와 같은 파일들을 인클루드해야 한다. ~~~~~ 위와 같이 부트스트랩파일과 jQuery 를 인클루드한 후 body에 부트스트랩 코드를 작성하면 된다.