부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기-7
Grid의 다앙한 옵션 : offset, nesting, ordering.prefix.
Grid options structure : .col - device prefix(디바이스크기)-숫자
offset : .col-*-offset*
ex) .col-xs-offest-6 , .col-sm-offset-4
code
PC screen
TB screen before
code
TB screen
ordering :순서 바꾸기
.col-*-push-* : 왼쪽에서 오른쪽으로 당겨움
.col-*-pull-* : 오른쪽으로 왼쪽으로 당겨옴
push,pull의 활용
*offset은 뒤의 요소가 같이 밀리는데 push는 뒤의 요소에는 영향을 끼치지 않는다.
code
screen
nesting : .row 안에 또 .row를 사용하는 중첩구문
nesting의 활용
code
PC screen
TB screen
MB screen
code
PC screen
TB screen
MB screen
예제 실습하기
self-code
PC screen
self-code-edit
warning class에 col-md-10을 삭제.
main2 class 삭제.
PC screen
self-code
CSS에서 명령어를 입력했지만
primary height가 잡히지 않는다.
TB screen
self-code
MB screen
스마트폰 이상의 화면에서면 CSS를 설정하려면 @media를 입력하고 난 뒤에 변경하려는 CSS 명령어를 넣어준다.
code
screen
그런데 info부분은 왜 오른쪽으로 넘어 오지 않고 계속 하단에 머물러 있는건지...
구조가 잘 못되었는지 다시 체크 해봤지만 잘 모르겠다.
code
HTML짜는 부분 다시 돌려보기 시작
오류가 있는 부분을 제외한 다른 부분을 주석 처리 하고 난 뒤 출력화면을 보자 정상적으로 보임
screen
코드를 처음부터 다시 짜는데
역시 HTML 로직 짜는게 어렵다
뭔가 내가 짠 코드는 어려운데 가르쳐 주는 코드는 심플한 느낌
container는 대치되는 div가 없고
div는 내부에서 row 박스로 만들어진다.
그리고 border를 넣어서 보니 어디가 잘못되었는지 확실하게 보인다.
어디가 잘못되었는지 모르겠으면 border 값넣어서 확인해보기
강의에서 가르쳐 준 code
screen big PC
screen small pc
screen TB
screen MB
데스크탑 사이즈에서 원하는 요소를 그리 드영역안에서 두 칸 이동시키려면 .col-md-offset-2를 사용한다.
그리드 영역 안에서 순서를 바꿀 때 사용하는 클래스명은 오른쪽으로 밀어 줄 때는 .col-*-push-*
왼쪽으로 잡아 당길때는 .col-*-pull-*를 사용한다.
.row 안에 또 .row를 사용하여 해당요소 안에서 계속 12개의 그리드를 나눌 수 있는데 이러한 구문을 중첩구문 이라한다.