dev-course day20

2rlokr·2025년 4월 1일
TIL

dev-course

목록 보기
20/43
post-thumbnail

오늘 배운 것

실습

Springboot 예제

case 1

@GetMapping("/sum")
public String showSumPage(Numbers numbers, Model model) {

	int result = sum(numbers.getA(), numbers.getB());
	model.addAttribute("result", result);

	return "model_test_page";
}

@Data
class Numbers() {
	public int a = 1;
    public int b = 2;
}
  • 다음과 같이 실행해도 아무 문제가 없다. 하지만, 이건 월권이라고 한다.
  • 연산과 같은 서비스 로직은 Contoller에서 실행하면 안되기 때문에 이를 Service로 빼주어야 한다.

case 2 : FirstService

@Service
public class FirstService {

    public int sum(FifthController.Numbers numbers) {
        return numbers.getA() + numbers.getB();
    }
}
  • 그래서 일단 연산 부분은 FirstService로 빼주어야 한다.
  • 이제 FifthController 와의 의존성을 넣어주어야 할 필요가 있는데 여러 방법이 있다.

의존성 주입

1️⃣ 필드 주입 방법

@Autowired
private FirstService firstService;
  • FirstService가 @Service로 빈으로 등록되어있다.
  • @Autowired를 달면 스프링이 알아서 할당을 해준다.
  • 하지만 이 경우 요즘은 잘 사용하지 않는다.

2️⃣ Setter 주입 방법

private FirstService firstService;

@Autowired
public void setFirstService(FirstService firstService) {
	this.firstService = firstService;
}
  • 이 방법으로도 구현할 수 있다.
  • 하지만, 누군가가 Fifthcontroller를 불러서 서비스 값을 바꿀 수 있기 때문에 위험하다.
  • 특별한 경우가 아니면 잘 사용하지 않는다.

3️⃣ 생성자 주입 방법

private final FirstService firstService;

// @Autowired
//public FifthController(FirstService firstService) {
//	this.firstService = firstService;
//}
  • 생성자가 얘 하나라면 @Autowired를 생략할 수 있다.
  • @RequiredArgsConstructor을 클래스 위에 어노테이션으로 추가해준다.
    • 생성자 주입 방법 때 이 어노테이션을 붙이면 굳이 생성자를 표시해둘 필요가 없다.
  • FirstService를 필수적인 필드로 만들기 위해 final 키워드를 붙여줘야 한다.
  • 가장 많이 사용하는 방법이다.

case 2 : FifthController

@Slf4j
@Controller
@RequiredArgsConstructor 
public class FifthController {
	private final FirstService firstService;
    
    @GetMapping("/sum")
    public String showSumPage(Numbers numbers, Model model) {
    	int result = firstService.sum(numbers); // // model_test_page에서 이 값을 ${result}로 사용하기 때문에 result로 받아줘야 한다.
        model.addAttribute("result", result);
        
        return "model_test_page";
    }
    
    @Data
    public class Numbers {
    	private int a;
        private int b;
    }
}

DTO vs VO
VO : Value Object로, 값 그 자체를 나타낸다.

  • showSumPage에서 파라미터로 받는 Numbers는 VO이다.
    DTO : Data Transfer Object로, 데이터를 전송하는 역할을 한다.
  • firstService.sum의 인자인 numbers는 DTO이다.
  • 앞으로 service로 데이터를 보낼 때는 값 그 자체보다 DTO로 보내야 한다.

HTML (Hyper Text Markup Language)

  • 웹 페이지와 웹 애플리케이션을 구조화하고 내용을 정의하기 위한 표준 마크업 언어 (WWW을 위해 등장한 개념)
  • 이 언어는 텍스트, 이미지, 비디오 및 다양한 다른 콘텐츠를 구조적으로 배치하고. 이를 웹 브라우저가 사용자에게 정보를 어떻게 보여줄지를 정의하는 태그로서 구성한다.

    ✔️ 마크업 언어(Mark-up Language) 란?

    텍스트에 구조와 의미를 부여하기 위해 사용하는 언어이다. 주로 문서의 형식을 지정하고, 내용의 구조를 정의하며, 정보를 시각적으로 표현하는 데 도움을 준다. 주로 태그(tag)와 속성(attribute)을 사용하여 문서의 요소를 정의하고, 이러한 요소들 간의 관계를 명시한다.

구성요소

HTML의 구조는 태그(Tag)로 구성되어있다. HTML 문서는 계층적 구조를 가지며, 웹 페이지의 내용을 정의하고 브라우저가 이를 렌더링하는 데 필요한 정보를 제공한다.

✔️ 렌더링이란?

디지털 데이터를 시각적으로 표현하는 작업을 일컫는다.

태그

태그는 웹 페이지의 구조와 내용을 정의하는 기본적인 구성 요소이다.

<div class="mt-10"> <!--여는 태그(시작태그)-->
  Hello <!--내용(컨텐츠) : 브라주어제 표현될 내용들을 포함한다.-->
</div> <!--닫는 태그(종료태그)-->
<br /> <!--자기 닫힘 태그 : 열림과 동시에 닫힘을 표현한다.-->

태그를 열고 닫을 때 올바른 순서로 하지 않을 땐 알아서 넣어준다. 다만, 우리가 원하는대로 넣어주진 않기 때문에 태그 계층을 잘 지켜서 작성해야 한다.

요소
<div> ~ </div>

  • 요소는 속성을 가질 수 있다.

속성
class : 속성 이름, "mt-10" : 속성 값

  • 시작 태그 안에 추가적인 정보를 제공하는 부분이다.
    속성은 속성명="값" 형태로 작성되며, 태그의 기능이나 스타일을 조정하는 데 사용된다.

주석
<!-- -->

구조

HTML은 계층적 구조(트리구조)를 가지고 있다.

문서 선언

<!DOCTYPE html>
  • HTML 문서의 최상단에 기재하는 태그이다.
  • 해당 태그는 HTML5 문서임을 선언하는 일종의 선언부이다.
  • <!DOCTYPE html> 태그로 브라우저에 해당 문서가 HTML임(HTML5 표준을 따르고 있음)을 명시하여, 브라우저가 문서를 적절하게 해석하고 렌더링하는 데 도움이 된다.
    • 아니면 xml로 오해할 수도 있다.

문서 본문

<html>
  <head></head>
  <body></body>
</html>
  • HTML 문서의 실질적인 본문 부분이다.
  • <html> 태그로 전체 틀을 구성하고, 크게 <head> 와 <body>로 영역을 나눈다.

head

  • 문서의 메타 데이터와 문서 전반에 영향을 미치는 설정들을 포함한다.
  • 헤드 태그 사이에는 사용자 눈에는 보이지 않지만, 브라우저가 해당 문서를 해석하는데 필요한 여러 정보(metadata)를 표기한다.

body

  • 바디 태그 사이에는 사용자 눈에 보이는, 즉 브라우저를 통해 표시될 내용을 담는다.

메타데이터 태그

meta
항상 <head> 안에 들어가며, 일반적으로 문자 인코딩, 페이지 설명, 키워드, 문서 작성자 및 뷰포트 설정을 지정하는 데 사용된다. 메타데이터는 페이지에 표시되지 않지만, 컴퓨터가 분석할 수 있다. 또한, SEO를 통해 검색 엔진에 등록을 해줄 수 있다.

  • SEO (검색 엔진 최적화) : 이는 웹 사이트나 웹 사이트를 검색 엔진에서 더 잘 찾을 수 있도록 최적화하는 과정을 말한다.
<meta name="viewport" content="width=device-width, initial=scale=1.0">
  • viewport : 스마트폰과 같은 모바일 장치에서의 표시 방식을 설정한다.

title
문서의 제목을 정의한다. 브라우저의 제목 표시줄이나 탭에 나타나며, 검색 엔진 결과에서 페이지 제목으로 표시된다.

link
외부 리소스와 문서 간의 관계를 정의한다.

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

style
문서에 직접 적용할 CSS 스타일 규칙을 정의한다.

<style>
  /*CSS 코드 작성*/
</style>

script
JavaScript 코드나 외부 스크립트 파일을 포함한다. 문서의 기능을 동적으로 조작할 수 있다.

<script>
  // JavaScript 코드 잓ㅇ
</script>

<script src="/js/파일/위치"></script>

본문 태그

HTML의 <body>는 웹 페이지의 실제 콘텐츠를 포함하는 부분으로, 다양한 HTML 태그들을 사용하여 텍스트, 이미지, 링크, 폼 등 다양한 요소를 배치하고 구성할 수 있다.

hr
수평선을 삽입하여 내용을 시각적으로 구분한다.

<p>
  첫 번째 문장입니다.
</p>

<hr />
<p>
  두 번째 문장입니다.
</p>

strong
중요한 텍스트를 갖오한다. 일반적으로 굵은 글씨로 표시된다.

<strong>굵은 글씨</strong>와 일반 글씨입니다.

i
기울임꼴을 표시한다.

<p>i태그는 텍스트를 <i>기울임꼴</i>로 표시한다.</p>

목록

리스트는 중접해서 사용하능 하다.

ul
순서 없는 목록(Unordered List)을 정의한다. 

<ul>
	<li>부침개 재료</li> 
	<ul>
		<li>부침 가루</li> 
    	<li>파</li> 
    	<li>계란</li> 
    	<li>식용유</li>
	</ul> 
  	<li>생수</li> 
  	<li>아이스크림</li>
</ul>

ol
순서 있는 목록(Ordered List)을 정의한다.

<ol type="a" start="5" reversed>
  <li> TIL 작성하기 </li>
  <li> DFS/BFS, 그래프 공부하기 </li>
  <li> 알고리즘 문제 풀기 </li>
</ol>
  • type 을 통해 1,2,3..., A,B,C..., a,b,c... 등 어떤 방식으로 순서를 나타낼 것인지 지정할 수 있다.
  • start 속성을 추가하면 시작 번호를 설정할 수 있다. 위의 경우, type에서 설정해둔 것의 5번째부터 시작하는 것이다.
  • reversed 속성으로 순서가 반대로 진행되게 할 수 있다.

li
목록 항목을 정의한다. <ul> 또는 <ol> 태그 안에서 사용된다.

링크

a
HTML에서 하이퍼링크를 만들기 위해 사용하는 태그이다. 웹사이트 내의 다른 페이지, 같은 페이지 내의 특정 위치, 다른 웹사이트의 URL로 연결할 수 있다.

<a href="https://naver.com" target="_blank">Naver</a>

<a href="./lib/hello.txt" download>Hello.txt</a>
  • target 속성의 값
    • _blank를 주면 새 창에서 열린다.
    • self : 기본값으로, 현재 창에서 열린다.
    • parent : 현재 창을 불러낸 부모 창이 있다면 그 창을 바꾸고, 없으면 그 창이 바뀐다.
    • top : 최상위 탭이 바뀌고 없다면 현재 탭이 바뀐다.
  • download 속성을 추가하면 해당 파일을 다운받을 수 있도록 해준다.
<ul>
	<li>
		<a href="#section1">섹션 1로 이동</a>
	</li>
	<li>
		<a href="#section2">섹션 2로 이동</a>
  	</li>
</ul>
<section>
	<h2 id="section1">섹션 1</h2>
	<p>섹션 1입니다.</p>
</section>
<section>
	<h2 id="section2">섹션 2</h2>
	<p>섹션 2입니다.</p>
</section>
  • id 값을 넣어주면 그 곳으로 이동이 된다.

경로

  • 절대 경로 : 실제로 파일, 자원이 위치하는 경로
  • 상대 경로 : 기준점으로부터 그 파일이 어디있는지 나타내는 경로
<a href="./pages/page1.html">페이지 1</a>
  • 해당 경로에 있는 페이지로 이동한다.

멀티 미디어

img
이미지를 삽입한다. src 속성으로 이미지 파일 경로를 지정하고, alt 속성으로 대체 텍스트를 제공한다.

<img src="./img/img_1.jpg" alt="img" width="300" height="400">
  • 픽셀 단위로 너비와 길이를 정해줄 수 있다.

audio
오디오를 삽입한다. 

<audio src="./audio/audio_1.mp3" controls autoplay loop muted></audio>
  • controls로 사운드 바가 보이게 할 수 있다.
  • autoplay를 통해 자동 재생을 시킬 수 있다. (하지만 요즘은 자동 재생이 안되도록 막아놨다고 한다.) - loop를 통해 끝나면 다시 자동 재생을 시킬 수 있다.
  • muted를 통해 기본값으로 음소거를 설정해둔다.

video
비디오를 삽입한다.

<video src="video.mp4" width="300" controls poster = "./img/image.jpg"></video>
  • controls 속성을 추가하면 비디오 컨트롤이 제공된다.
  • poster 속성으로 비디오 썸네일을 지정해줄 수 있다.

표

table

<table border="2">
  <caption>학생 정보</caption>
  <thead>
	<tr>
		<!-- 테이블 헤더 -->
		<th>이름</th>
		<th>나이</th>
		<th>전공</th>
		<th>성적</th>
	</tr>
  </thead>
  <tbody>
    <tr>
		<td>김철수</td>
		<td>21</td>
		<td>정보통신</td>
		<td>A+</td>
	</tr>
	<tr>
		<td>박민수</td>
		<td>20</td>
		<td>컴퓨터공학</td>
		<td>B0</td>
    </tr>
  </tbody>
</table>
  • table 의 속성으로 border="2" 을 설정해둠으로써 표의 테두리 선을 해당 굵기로 표현할 수 있다.
  • caption 속성을 추가하면 표의 제목을 달 수 있다.
  • thead와 tbody 도 시맨틱 태그로 표의 제목행, 표의 본문행을 나타내준다.
  • <tr> : 테이블 행을 정의한다.
  • <td> : 테이블의 데이터 셀을 정의한다.
  • <th> : 테이블의 헤더 셀을 정의한다. 기본적으로 굵게 표시된다.
<tfoot>
	<td colspan="3">총계</td>
	<td>106,000</td>
</tfoot>
  • tfoot 은 표의 바닥글을 고정시켜두는 역할을 하는 시맨틱 태그이다.
  • colspan, rowspan을 통해 셀을 옆 혹은 아래로 밀 수 있다.
    • 위의 경우 3개의 컬럼을 총계가 차지하는 것이다.

폼 (Form)

폼은 사용자가 입력 데이터를 웹 서버에 제출할 수 있게 해주는 태그이다. 폼은 일반적으로 텍스트 입력, 라디오 버튼, 체크박스, 드롭다운 메뉴, 제출 버튼 등과 같은 다양한 입력 필드를 포함한다.

form

<form action="/submit" method="get"></form>
  • action : 제출될 URL을 지정하여 데이터의 목적지를 설정한다.
    • 표시해두지 않으면 현재 창으로 전달된다.
  • method : http 메서드를 무엇으로 보낼지 결정한다. (GET, POST) default = GET
  • name : form 자체의 이름 (마치 객체처럼 묶인다.)
  • get 방식 : url에 파라미터가 다 드러난다.

input
사용자로부터 데이터를 입력받기 위한 다양한 유형의 입력 필드를 생성한다. type 속성으로 입력 유형을 정의한다.

<label for="name">이름:</label>
<input type="text" id="name" name="name" placeholder="이름을 입력하세요!" required>
<input type="checkbox" name="terms" readonly> 약관에 동의합니다.
<input type="hidden" name="userId" value="12345">
  • type 종류
    • text : 일반 텍스트로 입력받는다.
    • number : 숫자를 입력받는다.
    • email : @, . 가 포함되어있는지 확인한다.
    • password : 암호화처리 돼서 입력하는 문자가 안 보인다.
    • file : 파일을 받을 수 있다.
    • date : 달력으로 연.월.일을 선택할 수 있다.
    • time : 시간을 선택할 수 있다.
    • datetime-local : 년월일, 시간 모두 정할 수 있다.
    • color : 색상표가 나오고, 색상을 선택할 수 있다.
    • checkbox : 체크박스가 나온다.
    • radio : 여러 개의 선택지 중에 선택할 수 있다. 라디오 방식이라 하나를 선택하면, 다른 것은 선택이 해제된다.
    • hidden : 투명하게 안 보이는 인풋 박스를 두고 그 안에 값을 넣어둘 수 있다.
  • name 속성을 추가하면 url에서 username=aaa 이런 식으로 파라미터처럼 넘어간다.
  • placeholder 속성을 통해 희미하게 예시를 보여줄 수 있다. 하지만, 실제로 입력된 값은 아니다.
  • required 가 있으면 값을 입력하지 않을 때 제출되지 않는다.
  • readonly : 읽을 수만 있고 값을 쓸 수는 없어진다.
  • value: 값을 미리 넣어둘 수 있다.

textarea
여러 줄의 텍스트를 입력받기 위한 영역을 생성한다.

<textarea name="body" rows="기본 행 개수" cols="기본 열 개수"></textarea>

button
버튼을 생성한다. 클릭 시 폼을 제출하거나 다른 동작을 수행한다.

<button type="button">제출</button>
<button>제출</button>
  • button의 default 값이 submit이다.
  • 그냥 버튼으로 사용하고 싶을 때는 타입 속성을 button으로 주면 된다.

select
드롭다운 목록을 생성한다.

option
목록 항목을 정의한다.

<select name="size" id="size" multiple size="2">
	<option value="xs">xs</option>
	<option value="s">s</option>
	<option value="m" selected>m</option> 
	<option value="l">l</option>
	<option value="xl" disabled>xl</option>
	<option value="xxl">xxl</option>
</select>
  • select에 size를 두면 n개씩 보이게 된다. (여기선 두 개씩 보이게 되는 것이다.)
  • 사이즈 m에서와 같이 selected 속성을 추가하면 해당 옵션이 초기로 설정되어있게 된다.
  • disabled : 해당 인풋 태그를 못 쓰게 하고 싶을 때 선택할 수 없어진다.
  • multiple 속성을 추가하면 여러 옵션을 shift로 다중 선택해서 제출할 수 있다.
    • 그렇게 되면, ?size=s&size=xxl로 전달되어 배열로 전달되게 된다.

optgroup
옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)에서 사용되는 옵션들의 그룹을 정의할 때 사용한다.

<optgroup label="Electronic" >
	<option value="laptop">노트북</option>
	<option value="smartphone">스마트폰</option>
	<option value="headphones">헤드폰</option>
</optgroup>

datalist
사용자가 <input> 요소에 데이터를 입력할 때 미리 정의된 옵션을 드롭다운 리스트로 보여줌으로써 자동완성 기능을 제공한다.

<input type="text" id="car"  list="car-brands" placeholder="브랜드를 입력하세요" required>
<datalist id="car-brands">
	<option value="Hyundai">
	<option value="Kia">
	<option value="Mercedes-Benz">
	<option value="Tesla">
</datalist>

fieldset
관련된 input 태그들을 묶어줄 때 사용할 수 있다.

<fieldset>
	<legend>주소 정보</legend>
	<label for="adress">주소</label>
	<input type="text" id="adress" name="adress" required>
  	<br />
	<label for="zipcode">우편번호</label>
	<input type="text" id="zipcode" name="zipcode" required>
</fieldset>
  • 다음과 같이 보이게 된다.

시맨틱 태그 (Semantic Tag)

시맨틱 태그(Semantic Tags)는 웹 페이지의 콘텐츠를 보다 명확하게 설명하고, 구조를 의미적으로 구분하기 위해 사용되는 태그들이다. 시맨틱 태그는 브라우저, 검색 엔진, 그리고 페이지의 내용과 구조를 더 잘 이해할 수 있도록 도움을 준다.

검색 엔진은 시맨틱 태그를 통해 웹 페이지의 구조와 내용을 더 잘 이해할 수 있다. 이를 통해 검색 결과에서 페이지의 순위를 높이는 데 도움이 될 수 있다.

header
페이지나 섹션의 머리글 부분을 정의한다. 일반적으로 로고, 제목, 내비게이션 링크 등을 포함한다.

<header>
  <h1> 중요한 제목 </h1>
</header>

nav
내비게이션 링크를 포함하는 부분을 정의한다. 주로 페이지 내의 주요 링크들을 그룹화할 때 사용된다.

<nav>
  <ul>
    <li><a>홈으로</a></li>
    <li><a>기업소개</a></li>
	<li><a>커리어</a></li>
  </ul>
</nav>

main
문서의 주요 콘텐츠를 나타낸다. 이 태그 안에는 문서의 고유하고 중심적인 콘텐츠가 포함된다.

<main>
  <h2>본문의 제목</h2>
  <p>이제 본격적으로 이야기 하고자 하는 내용이 등장!</p>
</main>

section
문서의 논리적인 섹션(단락)을 정의한다. 주제별로 관련된 콘텐츠를 그룹화할 때 사용된다.

<section>
  <h2>구역 제목</h2>
  <p>구역에 대한 내용</p>
</section>

article
독립적이고 자족적인 콘텐츠를 나타낸다.

<article>
  <h2>1번 게시물</h2>
  <p>안녕! 오늘은 HTML에 대해서 알아볼겡~</p>
</article>

footer
페이지나 섹션의 바닥글 부분을 정의한다. 저작권 정보, 링크, 연락처 정보 등이 포함될 수 있다.

<footer>
  <p> 오시는 길 : ... </p>
</footer>

em
em은 i 태그의 시맨틱 태그이다.

<p>em 태그는 텍스트를 의미적으로 강조해서 <em>기울임꼴</em>로 표시합니다.</p>

emmet

HTML, CSS, XML, XSL 등의 문서를 편집할 때 사용하는 플러그인으로, 빠른 코딩을 지원한다. 자동완성 기능을 통해 HTML 작성 속도를 크게 향상시켜주는 도구이다.

lorem
lorem + tab을 할 경우 글이 쭈욱 나온다. css를 할 때 활용하면 좋다고 한다.
lorem : 한 문단 생성; lorem5 : 다섯 단어 생성; lorem*3

🔹 태그 자동완성
<!-- 태그 이름 + tab -->
<div></div>

🔹 부모요소와 자식요소
<!-- div>ul>li + tab -->
<div>
	<ul>
		<li>
		</li>
	</ul>
</div>

🔹 형제요소
<!--div>h2+span + tab -->
<div>
	<h2></h2>
	<span></span>
</div>

🔹 부모 요소로 다시 돌아가기 (^을 사용하며, 여러 번도 사용 가능하다.)
<!--div>ul>li^h2+span-->
<div>
  <ul>
    	<li></li>
  </ul>
  <h2></h2>
  <span></span>
</div>

🔹 반복해서 표현해야 할 때
<!--div>ul>li*3-->
<div>
  <ul>
	<li></li>
	<li></li>
	<li></li>
  </ul>
</div>

🔹 그룹화해야 할 때 (아래의 두 표현은 같은 구조를 나타낸다. 하지만, 두 번째 emmet은 그룹화를 시켜 더 간단하다.
<!-- div>nav>ol>li*3^^div -->
<!-- div>(nav>ol>li*3)+div -->
<div>
  <nav>
	<ol>
		<li></li>
		<li></li>
		<li></li>
	</ol>
  </nav>
  <div></div>
</div>

🔹 클래스를 나타내고 싶을 때
다른 태그도 .이름 하면 tag에 클래스를 부여해줄 수 있다.
div는 생략 가능하다.
<!--div.mx-10  OR .mx-10-->
<div class="mx-10"></div>

🔹 태그는 두 개의 클래스도 가질 수 있고 띄어쓰기로 구분한다. 
<!--div.mx-10.mt-10-->
<div class="mb-10 mt-10"></div>

🔹 id를 나타내고 싶을 때
<!-- span#font-lg -->
<span id="font-lg"></span>

🔹 마찬가지로 div 태그일 경우 생략할 수 있다.
<!--#font-lg-->
<div id="font-lg"></div>

🔹 a 태그와 주소를 넣어줄 때
<!-- a[href="https://google.com"] + tab -->
<a href="https://google.com"></a>

<!-- img[src=“dkdk.jpg”] -->
<img src="dkdk.jpg" alt="">

🔹 응용
<!-- ol>li.item*5 -->
<ol>
	<li class="item"></li>
	<li class="item"></li>
	<li class="item"></li>
	<li class="item"></li>
	<li class="item"></li>
</ol>

🔹 동적으로 변수를 넣어주고 싶을 때
<!-- 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>

🔹 시작 번호를 정해주고 싶을 때
<!-- 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>

🔹 태그 안에 컨텐츠를 넣어주고 싶을 때
<!-- div.box{HelloWorld!} -->
<div class="box">HelloWorld!</div>

🔹 응용
<!-- div.container>ol>li.item*3>a[href="#"]{아이템 $} -->
<div class="conatiner">
	<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>
	</ol>
</div>

<!-- .list-container>.item>{$}*5 -->
<div class="list-container">
	<div class="item">
		1
		2
		3
		4
		5
	</div>
</div>

<!-- .list-container>.item*5>{$} -->
<div class="list-container">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
</div>

CSS (Cascading Style Sheets)

웹 페이지의 외관과 레이아웃을 정의하는 스타일링 언어 (시각적인 표현을 담당한다.)

구조

선택자 {
	속성 : 값
}
p {
	color : green;
}
  • CSS는 선택자(Selector)와 선언(Declaration)으로 구성된다.
    • 선택자 : 스타일을 적용할 HTML 요소를 지정한다. -> p
    • 선언 : 스타일 규칙을 정의한다. -> color:green;
  • 선언은 속성(Property)과 값(Value)으로 이루어져 있다.
    • color : 속성, green : 속성 값
<p style="color:green;">
	저는 초록색으로 작성된 문단입니다.
</p>
  • style이라는 속성을 통해서 css를 사용하면 위와 같이 표현할 수 있다.

선택자 (Selector)

특정 HTML 요소에 스타일을 적용하기 위해 사용된다.
선택자는 HTML 문서 내에서 어떤 요소에 스타일 규칙을 적용할지 지정하는 역할을 한다.

전체 선택자

* {
	....
}

태그 선택자

p {
	....
}

클래스 선택자

.클래스이름 {
	....
}
  • 여러 군데에 적용될 수 있다.

아이디 선택자

#아이디 {
	....
}
  • 태그의 식별자 값이기 때문에 아이디 선택자를 사용하면 하나만 집을 수 있다.

결합자 (Combinator)

자손 결합자

div p {
	....
}
  • 앞에 것의 자손인 뒤에 거를 싹 다 선택할 수 있다.
  • 띄어쓰기로 나타낼 수 있다.

자식 결합자

ul > li {
	....
}
  • 직계 자식만 적용된다.
  • 특정 부모 요소 바로 아래 있는 자식 요소에만 적용된다.

인접 형제 결합자

h1 + p {
	....
}
  • 특정 요소 바로 다음에 오는 형제 요소에 적용하기 위해서 사용한다.
  • 연속된 형제 요소들이 있다면 첫번째에 있는 인접 형제 요소에만 적용된다.

일반 형제 결합자

h1 ~ p {
	....
}
  • 특정 요소의 모든 형제에 적용된다.
  • 인접 형제는 바로 다음에 오는 첫 번째 형제 요소만, 일반 형제는 모든 형제에 적용된다는 것이 다르다.

느낀점

오늘은 아침에 너무 컨디션이 안 좋아서 일찍 깼다. 침을 못 삼킬 정도로 목이 붓고, 머리도 너무 아프고, 안압도 높아져서 터질 것 같았다 흑흑.. 이제 월요일인데 아프면 이거 이번 주 큰일난다... 싶어서 (병원 싫어 인간이) 병원을 가기로 했다. 수업 시작 할 때 열을 쟀는데 이미 37도가 넘어있었다. 그 때부터 수업을 듣는데 머리는 너무 터질 것 같았고, html 내용은 너무 너무 많았다 하하하

힘들었지만,,, 수업시간에 병원가서 강의를 놓치면,, 사고 날 것 같아서 수업 중 병원을 갈 순 없었다. 아주 뿌듯하게 수업을 다 들었다. (뿌듯한 거 맞냐고) 4시 땅 되자마자 바로 옷 입고 병원을 갔는데 열이 38.6이었다. 병원에 사람이 얼마나 많던지.. 기다리는데 정말 어지러워서 힘들었다.. ㅠ 무릎 관절이랑 허리도 아프고 온몸에 근육통도 엄청났다. 독감인 것 같다고 하셔서 독감 검사도 했는데 다행히 ! 음성이 나왔다 (휴..)

아픈 상태로 수업을 들으니 이건 오바세요~ 라 빨리 낫고 싶어서 (주사 무서워 인간이) 주사 한 방 달라고 부탁드렸다 ㅋㅋㅎㅋ 약을 받고 돌아오는데 오랜만에 이 시간에 밖인 것 같아 맛난 거라도 사서 집 가고 싶었는데 입맛이 없어서 그냥 집으로 왔다.

TIL을 적어야 했지만,, 오늘 쉬지 않으면 내일도 아플 거라 생각돼서 저녁 먹고 약 먹고 바로 잤다!
아, 아니. 오늘은 스터디 있는 날이라.. 스터디 하고 잤다 !

난 왤케 안 아프고 튼튼이 장군이지 생각했는데, 역시 안 아픈 게 최고고 그것에 감사해야 한다. 난 아픈 게 제일 싫엉 ,, ㅎㅋ

아프지말고,, 빠이링!!!!

profile
2rlokr
이전 포스트

dev-course day19

다음 포스트

dev-course day21

0개의 댓글