백엔드 개발을 위한 CSS, Bootstrap 기본 사용법

개요 목적

백엔드 개발자도 개발자 페이지를 만들거나, 백엔드 서버를 테스트할 웹페이지를 만들 때가 있다. 그럴 때 유용하게 사용할 수 있는 기본적인 css와 bootstrap 기술들을 내가 만든 웹페이지 이미지를 참고하면서 알아보자.

기초적인 CSS, Bootstrap 사용법

페이지의 요소들을 번호를 매겨 해당 요소의 구성 방법을 알아보자.

해당 html과 css 소스 코드 원본은

깃허브 주소

IgnorantEnglish\UI\src\main\resources\templates\admin\page.html 와

IgnorantEnglish\UI\src\main\resources\static\css\admin\page.css 에서 확인할 수 있다.

0. normalize.css 적용 CSS 통일 일관화

브라우저(모바일 브라우저를 포함하여)를 광범위하게 지원하며, HTML5 요소, 타이포그래피, 목록(lists), embeded 콘텐츠, 폼과 테이블을 일관성 있게 통일하는 CSS를 포함한다.

<!--스타일 초기화  아이콘 폰트 등록-->
<link rel="stylesheet" href="/css/normalize.css"/>

https://necolas.github.io/normalize.css/ 해당 사이트에 가서 css 파일을 다운 받으면 된다.

1. 전체 부분 border-box 사이즈 지정(selector, box-model)

* {
  box-sizing: border-box;
}

*는 html 전체를 나타내는 Selector이다.

<Selector> - HTML 특정 부분을 선택하기 위한 문법

1. 전체 
* {}
2. 태그 선택
h1 {}
3. ID 선택
#id {}
4. 클래스 선택
.class {}

<box-sizing> - width, height 대상 영역 설정을 한다

1. box-sizing: content-box;
width, height 값은 content 영역만을 고려한다.

2. box-sizing: border-box;
width, height 프로퍼티 값은 content+padding+border를 포함한다.
-> 버튼 같은 것을 만들 때, 콘텐츠 내용물 높이가 달라질 수 있는데,
이 설정이 있어야 동일한 크기의 버튼을 만들 수 있다.
이 설정을 보통 사용한다. 

<박스 모델(box model)> - HTML 요소를 구성하는 박스(box) 요소들

1. content - 텍스트나 이미지 등 실제 내용이 위치하는 영역
2. padding - border 안쪽에 위치 요소 내부의 여백 영역
요소에 적용된 배켱의 컬러가 색이된다.
3. border 테두리 영역, property 값으로 테두리 두께 지정 가능
4. margitn border 바깥에 위치하는 외부 여백 영역

+margin 또는 padding에 -top - right - botton - left 붙여서 마진 패딩 두께 지정 가능하다.

2. 내가 원하는 font 종류 스타일 지정하기 (font)

//html
<link href="//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css" rel="stylesheet"
          type="text/css"/>

//css
body {
  font-family: "Spoqa Han Sans Neo";
}

font-family로 웹 폰트를 지정 할 수 있다. 웹 폰트 뿐만 아니라 일반 폰트도 지정 가능하다.

https://fonts.google.com/ 에 들어가 원하는 폰트를 찾고

href 와 font-family에 사이트가 지정하는 값을 입력하면 된다.

<font의 주요 속성들>

• font–weight 글자 굵기 결정
• font–size 글자 모양 결정
• font-style 글자 모양 결정
• letter-spacing 글자 사이 간격 결정
• word-spacing 단어 사이 간격 결정
• text-aligh 글자 수평 정렬(왼쪽 오른 쪽 가운데 등) 설정

3. 페이지 전체 가운데로 정렬하기 (미디어 쿼리)

body {
  margin: 0 auto;
}

margin: 0 auto는

margin-top: 0 margin-botton: 0

margin-right: auto margin-left: auto

로 같은 의미이다.

양 옆 마진을 auto 처리를 해서 페이지 전체를 가운데 정렬 하도록 했다.

<프로퍼티 값에 따라서 margin padding 적용 방법>

ex)
h1 {margin: 10px 5px 15px 20px;} /* top-10px, right-5px, bottom-15px, right-20px */
h2 {margin: 10px 5px 15px;} /* top-10px, right & left-5px, bottom-15px */
h3 {margin: 10px 5px;} /* top & bottom-10px, right & left-5px */
h4 {margin: 10px;} /* all four margins are 10px */

4. 페이지 크기 800px로 제한하기 (미디어 쿼리)

@media only screen and (min-width: 800px) {
  .inner {
    max-width: 800px;
  }
}

화면이 옆으로 아무리 넓어져도 사이즈는 800px로 고정을 한다.

5. 요소들 수평 배치하기 (flex - display)

<header>
    <div class="inner">
        <div class="head-container">
            <div class="head-brand">무식한 영어 공부</div>
            <a class="btn btn-primary head" href="" role="button" style="color: #ffffff"
               id="home-button">Home</a>
        </div>
    </div>
</header>

.head-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<CSS flexbox>

웹페이지의 수평 정렬을 도와 준다.

부모 요소(.head-container)에 display: flex라고 설정해주면 수평으로 요소를 배치해준다.

설정 요소로는

• flex-direction : 어느 방향에서 정렬할 지 설정(좌→우, 우→좌 등)
• flex-wrap : 1행 또는 복수의 행으로 배치하는 설정
• flex-flow : flex-direction와 flex-wrap를 한번에 쓸 수 있는 프로퍼티
• justify-content: 수평 정렬 방법 설정( 좌우 끝부터, 좌부터 등등)
• align-content : 각 행마다 교차 추 기반 정렬
• align-items : 복수의 행 동시에 교차 축 기반 정렬

6. 백그라운드 색 지정하기 (backgroud)

header {
  width: 100%;
  height: 60px;
  background-color: lightblue;
}

헤더 클래스에 background-coloer를 지정해서 색을 넣을 수 있다.

색 외에도 이미지 같은 요소들을 배경에 넣는 프로퍼티에 대해서 알아보자.

<CSS backgroud 프로퍼티>

• background-color : 배경색을 의미하며, 값은 color 속성의 포맷을 사용한다.
• background-image : 배경 이미지를 설정하며, 주로 이미지 경로를 지정하는 방식으로 사용한다.
• background-repeat : background-image로 컨테이너보다 작은 이미지를 적용하면 이미지가 반복되어 출력된다. 이때 background-repeat 속성을 사용하면 반복여부를 지정 할 수 있다.
• background-position : 일반적으로 background-image는 위부터 이미지를 출력한다 속성을 통해 이미지의 좌표를 수정 할 수 있다.

7. 부트스트랩 등록 버튼 만들기

<부트스트랩 사용 적용 방법>

부트스트랩은 웹 프론트 개발 잘 꾸며진 구조와 요소들을 제공하는 프레임 워크이다.

부트스트랩 파일을 다운 받거나, 나처럼 링크를 참조하면 된다.

//html 파일 내 배치
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

부트스트랩 파일을 등록했으면 이제 부트스트랩 홈페이지에 들어가서 원하는 요소 html 코드를 자신의 코드에 붙여 넣으면 된다.

부트스트랩 요소들을 커스텀 하는 방법은 해당 블로그 글을 확인하면 좋다.

https://inpa.tistory.com/entry/BootStrap5-📚-SassSCSS-커스터마이징

부트스트랩에서 원하는 버튼을 선택하고,

나의 html 코드에 가져와서 적용한다. 그리고 class나 id를 추가로 붙여서 나의 페이지에 맞게 커스텀이 가능하다.

//html
<section>
    <div class="inner">
        <div class="button-container">
            <a class="btn btn-primary middle" href="../admin/sentence/add" role="button"
               style="color: #ffffff">문장 올리기</a>
            <a class="btn btn-primary middle" href="../admin/sentence/list" role="button"
               style="color: #ffffff">문장 목록</a>
        </div>
    </div>
</section>

//css
.btn.middle {
  width: 40%;
  height: 40px;
  font-weight: bold;
  font-size: 1.6rem;
}

 

CSS 공부 목록 

• CSS 단위 이해
• CSS Selector(html 요소 선택 하는 방법)
• CSS boxmodel (content, padding, border, margin 지정하기)
• CSS layout - flexbox( 원소 정렬하기 float, position 대체)
• CSS backgroud(이미지나 색상 지정)
• CSS media query(반응형 레이아웃 만들기)

---

Reference

https://ofcourse.kr/css-course/background-속성

https://getbootstrap.kr/