동현의 나불나불

homepage

Contact

Copyright © 2024 | Yankos
Contents

Home > Today I Learned > 2026_04_27~2026_05_01 > 2026-04-30 정리본

2026-04-30 정리본
Today I Learned 2026-04-30 - -
web spring html css

CSS 보충

어제 작성한 CSS이외에도 다양하게 활용가능한 부분이 더 있어서 정리해보겠다.

CSS emmet 활용 보충

  • 리스트 표현
    <!-- ul>li*5 -->
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
  • 계층 표현
<!-- div>(nav>ol>li*3)+div -->    
    <div>
        <nav>
            <ol>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </nav>
        <div></div>
    </div>

/>를 통해 아래 계층으로 지정해서 작성할 수가 있고 *을 통해 어느부분에 반복을 넣을지 지정할 수가 있다.

  • id표현
<!-- id속성 -->
    <!--span#font-lg-->
    <span id="font-lg"></span>

id 속성은 #을 두어 id의 이름을 어떻게 할지 지정할 수가 있다.

  • 번호매김 및 리스트 반복 동시에 활용 
    <!-- ol>li.item$@10*5 -->
  <ol>
      <li class="item10"></li>
      <li class="item11"></li>
      <li class="item12"></li>
      <li class="item13"></li>
      <li class="item14"></li>
  </ol>
  • href 활용한 번호매김 및 값 삽입
 <!-- .controller>ol>li.item*5>a[href='#']{아이템$} -->
    <div class="controller">
        <ol>
            <li class="item"><a href="#">아이템1</a></li>
            <li class="item"><a href="#">아이템2</a></li>
            <li class="item"><a href="#">아이템3</a></li>
            <li class="item"><a href="#">아이템4</a></li>
            <li class="item"><a href="#">아이템5</a></li>
        </ol>
    </div>

이미지 활용

웹사이트에 이미지 링크만 가져와서 표현하는 방법과 로컬에서 저장한 이미지를 불러오는 방법 2가지가 존재한다.

    <div>
        <h2>이미지</h2>
        <p>HTML페이지에 이미지(그림)을 포함하기 위한 태그</p>
        <img src="https://images.unsplash.com/photo-1490750967868-88aa4486c946?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8U3ByaW5nfGVufDB8fDB8fHww" alt="Image">

        <hr>
        <img src="/img/flower.jpg" width="300" height="400" title ="예쁜 꽃 사진입니다.">

    </div>

오디오는 직접 로컬에서 가져와야만 사용가능하다. 예전에는 autoplay 기능이 되었으나 보안상의 이유로 지금은 사용자의 허락을 맡는 기능이 구현되어야 사용가능하다고 한다.

<div>
        <h2>오디오</h2>
        <audio src = "audio.mp3" controls></audio>
    </div>

텍스트 강조

텍스트의 강조, 기울기 등을 하고싶을 때 활용

    <div>
        <p>
            Strong 태그는 중요한 텍스트를 
            <strong> 강조</strong> 해 <strong> 굵은 글씨</strong>로
            표시합니다.
        </p>

    </div>

    <div>
        <p>
            b 태그는 중요한 텍스트를 
            <b> 강조</b> 해 <b> 굵은 글씨</b>로
            표시합니다.
        </p>

    </div>

    <div>
        <p>
            i 태그는 텍스트를 <i> 강조</i> 해 <i> Italic</i>로
            표시합니다.
        </p>

    </div>

    <div>
        <p>
            em 태그는 텍스트를 <em> 강조</em> 해 <em> Italic</em>로
            표시합니다.
        </p>

    </div>

참고
무료 이미지 불러오는 사이트
개발자들도 저작권에 민감하기 때문에 올바른 레퍼런스를 표시하는 것은 중요하다. 사용하는것이 무료인 사이트들이 있다.
1. lorem picsum
lorem_picsum
2. unsplash
unsplash
참고로 더미 텍스트를 제공해주는 lorem ipsum도 있다.
lorem_ipsum

CSS flex, grid 사용한 배치

웹페이지에 내용을 담아야 하고 이를 위한 시각화를 할 때 가장 좋은 것은 격자를 활용하는 것이다. 흔히 사용하는 네이버, 구글과 같은 웹사이트들도 가상의 격자를 두어 배치를 한다. 그리고 간격을 통해 내용의 구분을 하기도 한다. 몇몇 유명 사이트들은 여러 메뉴를 topbar를 통해 표기하고 스크롤을 통해 내용을 보여주도록 설계하는 경우가 많다. 이러한 구조에서 많이 사용하는 것이 Flex와 Grid이다.

이를 위해 flex나 grid가 필요한데 컨텐츠를 가운데로 밀거나 스프레드를 시켜야 한다. 또한 전체 레이아웃을 잡을 때 그리드가 들어가고 하나의 줄을 flex로 둔다.

CSS flex

플렉스는 가능한 하나의 상자에 구현한다. 이는 1차원에 진행을 하게되고 플렉스가 구현되는 공간을 flex box, 여기있는 요소를 item이라고 한다. 그리고 주축과 교차축을 두어 활용하게 된다.

flex를 사용하게 되면 반응형 웹에서 자신의 자리를 최대한 지키면서 객체의 크기가 화면에 맞게 적절히 늘어났다가 줄어드는 것이 가능하기 때문이다.

    <style>
        .container{
            display: flex;
            /* flex-direction: column; */

            /* 주축 */
            justify-content: center;

            align-items: baseline;

        }
    </style>

<style>
    
        .container {

        display: flex;

        justify-content: center;

        border: .3px dashed gray;

        }

        .flex-grow-1 {
        flex-grow: 1;
        }

        .flex-grow-2 {
        flex-grow: 2;
        }

        .flex-basis {
        flex-basis: 300px;
        }


    </style>

<body>
  <!-- .container>.box#item_$*5 -->
  <div class="container">
    <!-- <div class="box" id="item_1"></div> -->
    <div class="box flex-basis" id="item_1"></div>
    <!-- <div class="box" id="item_2"></div> -->
    <div class="box flex-grow-1" id="item_2"></div>
    <!-- <div class="box" id="item_3"></div> -->
     <div class="box flex-grow-2" id="item_3"></div>
  </div>
</body>

이렇게 코드가 있다고 하면

  • justify-content : 남는 공간을 어떻게 배치할 것인지 정한다.
  • flex-basis : flex box안에서의 시작크기를 설정하는 것이다.
  • flex-grow : 컨테이너에 남는 공간이 있다면 그 공간을 가져가는 비율을 정한다.

참고: 폰트를 따로 설정하지 않으면 기본내장 폰트 16px이 된다. 이를 고려하여 보이는 화면을 구성해보도록 하자.

CSS grid

flex가 1차원을 제어한다면 grid는 행 + 열을 사용하여 2차원을 제어하는 것이 가능하다. 또한 grid-area를 통해 코드 가독성을 높였고 fr을 사용하여 화면의 크기에 따라 자동 배치하는 것이 좋다.

  • grid-template-columns로 컬럼기준으로 크기와 개수를 정한다.
  • repeat(인수,크기) 크기를 인수만큼 반복한다.
  • fr단위 : fraction의 약자로 사용가능한 공간의 비율을 나타낸다.
  • grid-auto-rows: 명시적으로 지정하지 않은 자동생성 행의 높이를 지정
.container{
            display: grid;

            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: 200px;

            gap: 10px;
        }

지정된 그리드 영역이름(grid-area)를 참조하여 그리드 템플릿을 생성한다.

.container{
            display: grid;

            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: 200px;

            gap: 10px;

            grid-template-areas:
                'tea1 tea1 tea1'
                'tree tree tea2'
                'tree tree tea2'
                'tea3 tea3 tea4'
                'tea5 tea5 tea4'                
            ;
        }

        .img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }


        .tree{
            grid-area: tree;
        }
        
        .tea1{
            grid-area: tea1;
        }

        .tea2{
            grid-area: tea2;
        }

        .tea3{
            grid-area: tea4;
        }

        .tea4{
            grid-area: tea4;
        }

        .tea5{
            grid-area: tea5;
        }

지정된 그리드 영역이름(grid-area)를 참조하여 그리드 템플릿을 생성한다.
이를 응용하여 각 html헤더에 맞게 원하는 격자의 설정을 배정하여 만들 수가 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height: 100vh;
            margin:0;

            display: grid;

            grid-template-columns: 1fr 4fr;
            grid-template-rows: 100px auto 200px;

            grid-template-areas:
                'header header'
                'nav sec'
                'footer footer'
        }

        header{
            grid-area: header;
            background-color: #b1d5c2;

            height: 100%;
            width: 100%;
        }

        aside{
            grid-area:nav;
            background-color: #F0EBCB;

            height: 100%;
            width: 100%;
        }

        section{
            grid-area : sec;
            background-color: #CCE4C3;
            height: 100%;
            width : 100%;
        }

        footer{
            grid-area : footer;
            background-color: #b1d5c2;
            
            height: 100%;
            width : 100%;
        }
    </style>
</head>
<body>
    <header></header>
    <aside></aside>
    <section></section>
    <footer></footer>
</body>
</html>

HTML Form 태그 활용


    <!--
    HTML Form Based
    GET
    POST

    PUT
    PATCH
    DELETE
    -->
    <form method="get" action="/users/login">

        <h2>
            로그인
        </h2>

        <label for="username">
            아이디 : 
        </label>        
        <input id="username" type="text" name ="username">
        <br>

        <label for="password">
            비밀번호 : 
        </label>                
        <input id="password" type="password" name ="password" placeholder="비밀번호 입력">
        <br>
        
        이메일:
        <input type="email" name ="email" placeholder="이메일을 잘 입력해주십쇼">
        <br>

        <button type = "reset" style="margin-top:10px">
            제출
        </button>

    </form>

이렇게 로그인 정보를 받는 웹페이지를 만드는 경우 GET을 통해 서버에 request를 보내게 된다. 이 경우 url에 모든 정보가 들어가 있어서
보안에 매우 취약한 요청방식이 될 수밖에 없다.

이를 위해 post를 사용하여 정보를 넘기도록 하자. post로 request를 요청하면 URL이 아닌 body부분에 관련정보를 넣어 보이지 않게 보낼 수가 있다.
그리고 URL 길이 제한이 있어 더 긴 데이터도 보내기 좋다. 또한 POST방식은 데이터의 수정/생성/삭제 등을 담당하여 데이터가 변경되기 때문에 캐싱되지 않아
보안에 더 좋다고 볼 수가 있다.

Spring Controller

Spring Controller은 사용자의 요청을 처리하는 객체이다. 사용자의 요청이 있는 경우 이는 Dispatcher Servlet이 가장 먼저 받고 URL 경로를 기반으로 어떤 컨트롤러로 보낼지 판단하고 보내게 된다.

@Controller은 서블렛의 일종은 아니고 그냥 일반 java객체이다.

요청을 처리받은 Controller는 View객체, ModelAndView, String등을 반환하게 된다.

@RequestMapping을 통해 매핑이 된 컨텍스트 메서드에 대해 수행을 하게된다.

참고
- SpringBoot의 모든 패키지는 @SpringBootApplication 하위에 설계가 되어야 한다. 그리고 이 하위 패키지들에 대해 컴포넌트 스캔을 시도하게 된다.
그리고 @Component, @Service, @Controller와 같이 bean으로 등록해놓은 것을 bean객체로 인식한다.
- static은 정적파일을 저장하고 templates는 동적 페이지를 저장하게 된다.
- Springboot는 에러를 하나의 페이지처럼 처리하는 것이 가능하다.