HTML 디자인 옵션

✅ 이미지

이미지를 사용하려는 html과 동일한 폴더 아래에 이미지가 있는 경우

<img width="30px" height="30px" src="/image/free-icon-font-java-6422224.png" alt="reponsive image">

-> 이미지 경로의 경우!
html 파일은 src > main > resources > templates 아래에 저장되어 있다
이미지 파일은 src > main > resources > static > image 아래에 저장되어 있다
이때 이미지 파일을 가져오기 위한 경로는 resources 아래의 static을 기준으로 설정하면 된다 ex) /image/이미지파일이름

✅ 제목

<h2>My First Spring</h2>

h 뒤에 오는 숫자로 텍스트 크기 설정

✅ 문단

<p style="font-size:20px;">My First Paragraph</p>

문단(paragraph)을 구성하는 블록 레벨의 태그

✅ 버튼

    <a href="/member/save" title="회원가입 페이지">회원가입</a>

버튼이름

✅ 스타일

<style>
        .color-primary {
            color: red;
        }
    </style>

head에 삽입한 style 부문
color-primary에 지정한 내용을 적용할 수 있음

<p class="color-primary">My First Paragraph</p>

해당 스타일을 사용할 곳에 class="color-primary" 옵션을 지정
2개 이상의 스타일을 사용하면 class="color-primary font-50"와 같이 띄어쓰기로 구분

✅ style.css

html에 개별적으로 형식을 지정하긴 번거로우니 style.css 파일에 스타일을 지정한다

.color-primary {
    color: lightslategray;
}
.font-50 {
    font-size:20px;
}

아까 html의 head에 있던 style을 지우고 아래의 코드를 입력한다

<link rel="stylesheet" href="/style.css">

✅ 콤보박스

<select style="height:20px;font-size:100px;color:cornflowerblue;">
        <option>Month</option>
        <option>Day</option>
</select>

으로 설정된 값들이 콤보박스의 옵션으로 출력다

✅ 테이블

<table>
    <tr>
        <th>id</th>
        <th>memberEmail</th>
        <th>memberPassword</th>
        <th>memberName</th>
        <th>상세조회</th>
        <th>삭제</th>
    </tr>
    <tr th:each="member: ${memberList}">
        <td th:text="${member.id}"></td>
        <td th:text="${member.memberEmail}"></td>
        <td th:text="${member.memberPassword}"></td>
        <td th:text="${member.memberName}"></td>
        <td>
            <!-- query string /member?id=1
                rest api /member/1 -->
            <!--서버에서 가져온 데이터를 같이 표현할 때 버티컬 바|| 사용-->
            <a th:href="@{|/member/${member.id}|}">조회</a>
        </td>
        <td>
            <a th:href="@{|/member/delete/${member.id}|}">삭제</a>
        </td>
    </tr>
</table>

안에 테이블 구성요소를 입력한다 안에는 테이블의 row 구성요소를 입력한다 안에는 테이블의 col(제목) 구성요소를 입력한다 안에는 테이블의 col 구성요소를 입력한다

따라서 위의 코드에서 첫 번째 행에 member.id/Email/Password/Name이 들어가고,
두 번째 행부터 memberList에 저장된 값의 member.id/Email/Password/Name이 차례대로 들어가며 테이블을 구성한다

.tb>td {
    border: 1px solid #000;
}

style.css 안에 위와 같은 스타일 옵션을 설정한다
위의 스타일을 테이블에 적용하기 위해서

에 아래와 같은 코드를 쓴다

<table class="tb">

✅ div

태그를 이용해 웹페이지를 3등분 (header - main - bottom)으로 나눈다

<div class="header">
        <h2><a href="/"><img width="60px" height="60px" src="/image/lion.png" alt="ICON"></a></h2>
        <div class="menu">
            <ul>
                <li><a href="/member/login">LOGIN</a></li>
                <li><a href="/member/save">JOIN</a></li>
                <li><a href="/member/">MemberList</a></li>
            </ul>
        </div>
        <h1>COFFEE WORKS</h1>
    </div>

style.css 파일에서 해당 부분에 스타일을 적용한다면
.header {}, .header menu {} 이런 식으로 함수 안에 옵션을 설정하면 된다

✅ hover

옵션으로 주소로 연결되는 버튼을 생성했을 때
해당 버튼에 마우스를 갖다대면 색이나 배경이 바뀌는 옵션을 설정한다

.header .menu a:hover {
    color: cornflowerblue;
    text-decoration: none;
}

마우스를 올렸을 때 설정한 color로 텍스트 색이 변경된다

✅ a href 점 없애기

.header .menu a {
    text-decoration: none;
    color: inherit;
}

text-decoration을 none으로 설정하지 않으면 텍스트 앞에 점이 붙어서 없애줬다 -> 해당 옵션으로 텍스트 앞에 붙을 기호 설정 가능
color: inherit은 html에서 링크를 사용할 때 보라색으로 자동 표시되는데 이를 없애는 옵션이다

✅ form action 옵션

<div class="section3">
    <h2>GET LOGIN</h2>
    <form action="/member/login" method="post">
        <div class="field">
            <p>Email : </p>
            <input class="input-form" type="text" name="memberEmail"> <br>
        </div>
        <div class="field">
            <p>Password : </p>
            <input class="input-form" type="password" name="memberPassword"> <br>
        </div>
        <input class="submit-form" type="submit" value="로그인">
    </form>
</div>

Email과 Password의 디자인을 변경하려면 .section3 field p {}
입력받는 text의 디자인을 변경하려면 .input-form {}
제출하는 submit의 디자인을 변경하려면 .submit-form {}
섹션을 각각 분리해서 옵션을 지정할 수 있도록 했다

-> submit 버튼의 테두리 없애기
: border-width를 0으로 설정한다
-> 모서리 둥글기 설정하기
: border-radius를 원하는 만큼 설정한다

디자인 적용한 사항이 눈에 바로바로 보이니 편하다
html 페이지를 실행시키면서 디자인이 괜찮은지 눈으로 보면서 하려면 F12(개발자 모드)로 간단하게 옵션을 수정하면 된다