꾸밍

출처: https://k9e4h.tistory.com/141 [Kim's :D]

<tr> -> table row  셀의 가로줄 생성

<th> -> table header 셀의 제목 데이터 생성

<td> -> table data 셀의 데이터 넣기

출처: https://marga.tistory.com/80 [margalog]

우선 질문 + 용어정리가 우선일듯하다.

1. 이전과 같이 <script ~~>가 왜 안들어가는지 이전에는 데이터바인딩 하려면 꼭 들어가야 하는줄 알았는데

2. xmlns:th="http://www.thymeleaf.org" 은 무슨 의미일까?

-> Server-side Template Engine으로 순수 HTML문서에 HTML5문법으로 Server-side로직을 수행하고 적용시킬 수 있다.

->Thymeleaf는 순수 HTML에 HTML5문법을 사용하여 Server side 로직을 수행할 수 있는 HTML 태그 및 속성 기반의 Template Engine입니다.

xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"

layout:decorator="/common/defaultLayout"

angularjs, reactjs, viewjs 등이 웹 회면에서 많이 사용되면서부터 Server-side template language의 역활이 많이 감소하였습니다. 지금 프로젝트에서도 주 역할은 화면 구성 정도 입니다. 기존에 화면 구성은 Tiles, Sitemesh 등을 많이 사용하였는데 요즘은 개인적으로 Thymeleaf을 많이 선호하는 편입니다. Thymeleaf이 layout 구성하는데 쉽고 명시적이기 때문입니다. 

3. <script th:inline="javascript">

-> 스크립트 태그에 인라인 속성 추가

-> 서버에서 view로 넘긴값을 html의 javascript에 json형태로 넘김

-> 여기서 인라인이라는 의미는 서버에서 뷰 생성을 위한 데이터를 웹브라우저로 그대로 넘긴다는 의미로 볼 수 있다.

-> 이렇게 넘기는 객체를 json으로 변환해서 변수에 할당하면 javascript 라이브러리에서 바로 사용할 수 있다.

-> 이런 기능이 없다면 최초의 데이터는 서버스크립트로 처리하고 자바스크립트에서 데이터를 읽어오기 위해서는 ajax로 별도의 서버요청을 통해서 데이터를 읽어와야된다.

Vue 인스턴스를 생성하는 역활을 합니다.

https://adrenal.tistory.com/18 

4. div와 span은 단지 레이아웃을 만드는 태그이다. div의 display속성은 block이고, span의 display 속성은 inline이다.

block은 말그대로 하나의 큰 사각형 틀이고, inline은 직렬, 횡렬이라는 뜻

쉽게 정리를 하자면 div라는 블록은 하나의 큰 사각형 박스이므로 한 줄에 하나씩만 생기지. span은 직렬, 횡렬이므로 한 줄에 여러 개가 다닥다닥 붙어있게 되는거야. 

이것만 가지고 설명이 안 되는 부분이 있지. 왜 div는 가로세로 사이즈가 적용이 되는데 span은 안 될까? 스판이니까 쭉쭉 늘어나야 되는 거 아닌가? inline의 사전적 의미 외에 한 가지를 더 붙여보자. inline 속성은 그 안에 들어가는 내용의 크기만큼만 커진다는 거지. span 태그 안에 크기가 큰 이미지가 들어가면 더 커지고, 작은 게 들어오면 작아진다는 소리야. 그러니까 정말로 스판(=span) 쫄쫄이랑 똑같지? 

http://mkcomputer.co.kr/bbs/board.php?bo_table=menu1_1&wr_id=75&page=5

5. HTML,CSS,JavaScript 설명

• HTML 은 웹 페이지상에서 문단, 제목, 표, 이미지, 동영상등을 정의하고 그 구조와 의미를 부여하는 마크업 언어이다.
• CSS 는 배경색, 폰트, 컨텐츠의 레이아웃등을 지정하여, HTML 컨텐츠를 꾸며주는 스타일 규칙 언어이다.
• JavaScript 는 동적으로 컨텐츠를 바꾸고, 멀티미디어를 다루고, 움직이는 이미지등 웹 페이지를 꾸며주도록 하는 프로그래밍 언어이다. 물론, 전부는 아니지만 몇 줄만의 자바스크립트 코드만으로 꽤나 훌륭한 작품을 만들 수 있다.

        <div id="wrap">
id 2개하는 이유 + class 차이

id는 스타일을 지정할 떄 한 가지만 지정해서 쓰는 이름이고 하나의 문서에 고유한 id하나밖에 쓸수 없습니다.

class 그룹으로 묶어서 스타일을 지정할 때 쓰는 이름이다.

ID,CLASS 이름은 자유롭게 지을 수 있지만 수자로 시작하면 안된다.

* 스타일을 주는 방식중 (inline, internal,external)이렇게 3가지가 있다. 

id와 class의 차이점
-id는 한 페이지에 하나의 정의(style/css)로 하나의 태그(id="")만 사용할 수 있다. 즉, 로고, 상단메뉴, 하단정보 같은 스타일을 지정할 떄 id를 사용한다.
-class는 한페이지에 반복적으로 사용되는 스타일을 정의 할 수 다.

반복적으로 사용되는 스타일에는 class를 사용하여 그 내부에 세부 스타일을 정의 할 때는 id를 사용하면 좋다.

https://boogis.tistory.com/48

다른 태그들을 배우기 전에 id와 class에 대해서 알아보고 가겠습니다.
id란 무엇일까요 ? 회원가입을 할 때 입력하는 id를 생각해보시면 간단합니다. 동일한 id는 존재할 수 없습니다. 동일한 것이 없으니 고유 식별자라고 표현할 수 있겠네요. HTML 문서도 마찬가지입니다. id는 중복될 수 없고, 단 하나여야 합니다. 그리고 주어진 id를 제어할 때는 "#id값"으로 제어 할 수 있습니다. 소스코드를 보시면 <div>태그에 one, two, three, four라는 id값을 각각 주었고, <style>태그 내부에 #one, #two, #three, #four이라는 형태로 제어하고 있는 것을 볼 수 있습니다. 
HTML문서 내에서 동일한 id값은 중복 사용 못하고, 제어할 땐 #id값 이라는 형태를 씁니다.  
똑같은 형태로 꾸밀건데 하나씩 제어해야 한다면 엄청 불편하겠죠? 그럴땐 그룹을 묶고 그 그룹에 똑같은 스타일을 지정해 준다면 아주 편할 겁니다. 그래서 class값이 필요합니다. class는 id와 다르게 똑같은 class값을 여러 태그에 줄 수 있습니다. 소스코드를 보시면 큰 상자를 나타내는 <div>태그마다 "many"라는 같은 class값을 주었습니다. class 값을 여러 태그들에게 줄 수 있다면 어떤 태그는 두개 이상의 class 값을 가질수도 있습니다. 그럴땐 class="first second"처럼 띄어쓰기로 구분해서 first와 second라는 두개의 class값을 줄 수 있습니다. 그리고 제어할 때는 .class값 이라는 형태를 씁니다. 소스코드 에서도 many라는 class값을 가진 태그들에게 똑같은 스타일을 지정한 것을 볼 수 있습니다.
id와 다르게 class는 중복 사용 가능하고, 값을 여러개 줄 땐 class="first second"처럼 띄어쓰기로 구분하고, .class값 이라는 형태로 제어한다.

8. <ul>태그와 <li>태그
ul -> unordered list의 약자로, 순서가 필요없는 목록을 만든다.
li -> list item의 약자로 각 항목들을 나열 할 때 사용

9. <pager v-if="loadedCount" :parameters="parameters" :count="totalCount" v-on:pagechange="onPageChange">
v-on 은 이벤트 핸들러로 무엇인가 클릭하거나 change할때 많이 사용된다. 페이지를 바꿀때 사용하기 때문에 필수적이다.