JAVA 웹개발 과정 국비 38일차 정리

38일차

※ 배우는 과정이므로 정확하지 않을 수 있습니다.
잘못된 점은 알려주시면 수정하도록 하겠습니다!

---

37일차에는 비반응형 웹사이트를 만들어보는 실습을 했다.
나는 창작의 고통을 겪고 싶지 않았기 때문에 웹사이트를 카피했다.
재밌는 시간이었다.

1. Bootstrap

1) Bootstrap 이란

프론트엔드 개발을 빠르고 쉽게 할 수 있는 프레임 워크
웹 페이지 제작시 CDN 방식으로 링크해서 사용할 수 있다.
다운로드로도 가능하다고 한다.
오픈소스이며 상업적으로 이용이 가능하다.
뷰, 리액트가 나오면서 인기가 좀 떨어졌지만 여전히 많이 쓰이고 있다.

2) 사용 방법

1. 구글에서 bootstrap 검색해서 웹사이트 들어가기
2. Getting started 클릭하여 CSS 링크와 JS 링크 복사하여 원하는 프로젝트 head 태그 안에 붙여넣는다.
3. 만들고 싶은 기능을 잘 찾아서 예시를 보면서 class 이름을 잘 붙여넣는다.
4. 끝~!

3) Grid System

12개의 컬럼으로 반응형 처리를 쉽게 할 수 있는 레이아웃 시스템

혼자 독학할 때는 부트스트랩이 정말 이해가 안갔었다.
뭐 어찌저찌 div 몇개 만들고서 포기했었는데.. 수업을 들으면서 이렇게 쉬울 수가 있나 싶었다.

실습을 하면서 어려웠던 개념 몇가지만 정리하고 bootstrap은 넘어간다.

① container, row, col

col은 꼭 row 안에, row는 꼭 container 안에 넣어야 한다.
가끔 row를 빼먹고 col만 container 안에 넣는 실수를 했다.

② container에는 높이를 주지 않는다.

내용이 들어감으로써 높이가 자동으로 변하게 해야 반응형 레이아웃이 오류가 나지 않고 잘 나타난다.

③ Ordering

왼쪽에 contents, 오른쪽에 login div를 만들어준다면, mobile 반응형에서는 login 영역이 contents 영역보다 아래에 위치해서 미관상 보기 좋지 않다.
login 영역을 contents 영역보다 위에 위치시키려면 기본적으로 contents와 login 의 영역을 바꿔버리는 방법이 있는데, 바꾸지 않고도 login만 위로 올릴 수 있는 방법이 있다.

바로 Ordering을 이용하는 것이다.

<div class="order-1 order-md-2">login</div>
<div class="order-2 order-md-1">contents</div>

xs는 생략 가능하므로 order-1은 ‘xs부터는 1번 순서로 둬라’라는 뜻이다. 마찬가지로 뒤의 order-md-2는 ‘md부터는 2번 순서로 둬라’라는 뜻이다.
즉, login 영역은 xs사이즈일때 위쪽으로 올라가고, md사이즈일때 2번째로 오른쪽에 보여진다.
주의할 점은 ‘일 때’ 라고 해석하지 말고, ‘부터’라고 해석해야한다.

④ none

게시판의 예를 들면, 큰 사이즈였을때는 글번호, 제목, 작성자, 조회수, 날짜가 순서대로 잘 보이다가 모바일 사이즈로 바뀌면 제목 안에 작성자, 조회수, 날짜가 들어가는 경우를 봤던 적이 있을 것이다.
display:none 속성을 이용해서 구현이 가능하다.

<div class="d-none d-md-block">작성자</div>
<div class="d-md-none">제목 안 작성자</div>

작성자에 class를 위와 같이 주면, ‘xs(생략)부터는 보여주지 않고, md부터는 보여준다’라는 뜻이다.
즉, md사이즈부터는 작성자 영역을 보여주지만 그 아래 사이즈에서는 감추고 제목 안에 있는 작성자영역을 활성화 시킨다.
큰 사이즈에 none을 주면 default가 보여주는 것이므로 아래 제목 안 작성자 div 같은 경우에는 d-xs-block을 써주지 않아도 xs부터는 보여지다가 md사이즈부터 보이지 않게 적용된다.