스터디 준비하느라 새벽 4시 넘어서 잤더니 정말 죽을거 같은 날이었다
강사님 목소리가 마치 자장가처럼 들리고 내 눈은 뭔 자석마냥 붙으려고 난리..
그래도 HTML 오랜만에 해보니까 재밌었다ㅎㅎ 내일 CSS도 기대중
@RestController → @ResponseBody + @Controller
의존성 주입
1) 필드 주입 방법 → @Autowired
@Autowired
private FirstService firstService;2) Setter주입
private FirstService firstService;
@Autowired
public void setFifthService(FirstService firstService) {
this.firstService = firstService;
}- 특별한 경우가 아니면 잘 사용하지 않음
- 값을 변경할 수 있기 때문에
3) 생성자 주입
private FirstService firstService;
@Autowired
public FifthController(FirstService firstService) {
this.firstService = firstService;
}@RequiredArgsConstructor 를 이용하면 lombok을 이용해 생성자 주입 가능
private final FirstService firstService;HTML
마크업 언어
<div class = “mt-10”> —> 여는 태그
Hlleo
</div> —> 닫는 캐그- 여는 태그부터 닫는 태크 까지 → 요소
- 속성을 가질 수 있음
- 속성 이름 = “속성 값”
계층적 구조를 가짐
- 상위 태그 - 하위 태크
- 트리 구조로 나타낼 수 있음 → DOM(Document Object Model)
<section>
<P> 단락 </p>
<p> 단락 </p>
</section><section>→ 부모요소<p>→ 자식 요소 /<p>끼리는 형제 요소
Emmet
-
! + tap
-
태크 이름 + tap
-
부모>자식1>자식2 + tap
-
부모>형제+형제 + tap
-
부모>자식1>자식2^자식1의형제+자식1의형제
-
부모>자식1>자식2*5 (반복해서 생성)
-
div>(nav>ol>li*3)>div
<div>
<nav>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</nav>
<div></div>
</div>- class와 id
<!--
class .
id #
div.mx-10
-->
<div class="mx-10"></div>
<!--
id는 태그 이름 뒤에 #
div#text
-->
<div id="text"></div>- 그냥 ‘.’나 ‘#’뒤에 클래스 이름을 붙이면 div 생략 가능
<!--
ol>li*5
ol>li.item$*5
-->
<ol>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ol> <!--
.cntainer>ol>li.item*5>a[href="#"]{아이템 $}
-->
<div class="cntainer">
<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><!--
.list-container>.item>{$}*10
-->
<div class="list-container">
<div class="item">
1
2
3
4
5
6
7
8
9
10
</div>
</div>Form 태그
- 속성
<form action="" method="" name="">- action - 경로를 설정
- method - http 메서드를 결정 (GET, POST만 가능)
- name - form내부 요소를 객체처럼 묶을 수 있음
- placeholder
<label for="user">
아이디:
</label>
<input id="user" type="text">- <'input> : 값을 입력받는 태그
- 한줄만 입력이 가능
- type - 입력할 수 있는 자료의 종류 (text, file, password 등)
- email → 이메일 형식만 입력 가능
- date, time을 이용하면 날짜와 시간을 고를 수 있음
- number → 숫자만 입력 가능 / min, max로 수량 제한
- file → 파일을 선택 가능
- id
- name - 파라미터 값을 받음
- required를 붙이면 값을 필수로 입력받도록 함
- disable - 입력자체가 불가능
- readonly - 선택은 되지만 읽는 것만 가능
❗️GET 방식의 문제점 - 파라미터의 내용이 URL에 공개됨
→ POST를 사용하면 해결
- <'textarea> : 여러줄을 입력받을 수 있는 태그
- <'select> : 선택 창을 보여줌
- <'option> : 선택 가능한 옵션을 추가
- selected요소를 두면 기본 선택으로 둘 수 있음
- disable - 해당 옵션 선택 불가능
- multiple은 여러개 선택 가능
- <'option> : 선택 가능한 옵션을 추가
- <'fieldset> : 관련있는 inputa 태그들을 묶을 수 있음
- <'legend>로 박스 이름 설정 가능
CSS
웹페이지의 레이아웃과 스타일을 제어
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1 {
color: aqua;
</style>
</head>h1: 선택자 (selector){}: 선언 블록color: aqua;: 선언문color: 속성(property)aqua: 값(value)
h1(선택자) + {color: red;}(선언블록): 규칙(Rule)규칙 묶음: 스타일 시트(stylesheet)
선택자
■ 전체 선택자
전체 요소를 선택하며 핵심 기호는 *
/* 전체 선택자 */
* {
font-size: 16px;
}■ 태그 선택자
핵심 기호 없이 태그명만 입력
/* 태그 선택자 */
p {
font-size: 16px;
}■ 클래스 선택자
클래스명을 입력하며 앞에 class를 나타내는 핵심 기호 . 을 붙여줌.
/* 클래스 선택자 */
.class {
font-size: 16px;
}■ 아이디 선택자
id명을 입력하며 앞에 id를 나타내는 핵심 기호 #을 붙여줌
❗️HTML 문서에서 중복되어 사용할 수 없다.
/* 아이디 선택자 */
#id {
font-size: 16px;
}후손 결합자
.box p {
color: red;
}<div class="box"><p>Text in .box</p></div>
<p>Text not in .box</p>자식 결합자
article > p
인접 형제 결합자
p + img
인접해 있는 첫번째 형제만 적용된다.
Abong_log