dev-course day21

2rlokr·2025년 4월 1일
TIL

dev-course

목록 보기
21/43
post-thumbnail

오늘 배운 것

CSS (Cascading Style Sheets)

웹 페이지의 외관과 레이아웃을 정의하는 스타일링 언어로, 웹 페이지의 구조를 시각적으로 표현하는 역할을 한다. CSS의 기본적인 개념은 스타일 규칙을 사용하여 HTML 요소의 표현 방식을 제어하는 것이다.

  • CSS의 가장 중요한 특징 중 하나는 계단식(Cascading)이라는 개념이다.
  • CSS에서 스타일 규칙은 여러 소스(예: 외부 스타일 시트, 내부 스타일시트, 인라인 스타일)로부터 적용될 수 있고, 이 스타일 규칙들이 어떻게 상호작용하는지를 정의하는 것이 바로 계단식의 핵심이다.

구조

선택자 {
	속성 : 값
}
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 {
	....
}

클래스 선택자

.클래스이름 {
	....
}
  • 특정 클래스 이름을 가진 모든 요소에 스타일을 적용할 수 있게 해준다.
  • HTML 문서 내에서 여러 요소에 동일한 스타일을 적용하고자 할 때 주로 사용한다.

아이디 선택자

#아이디 {
	....
}
  • 아이디 선택자는 유일하게 식별할 수 있는 요소에 스타일을 적용할 때 유용하다.
  • 태그의 식별자 값이기 때문에 아이디 선택자를 사용하면 하나만 집을 수 있다.

결합자 (Combinator)

자손 결합자

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

자식 결합자

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

인접 형제 결합자

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

일반 형제 결합자

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

선언자(Declaration)

p {
	color : green;
}
  • color, font-size 등이 속성에 올 수 있다.
  • green이 속성 값이다.

캐스캐이딩(Cascading)

스타일 규칙이 어떻게 적용되는지를 정의하는 핵심 원리로, 여러 스타일 규칙이 충돌하거나 중첩될 때 최종적으로 어떤 스타일이 적용될지를 결정한다. 스타일 시트에서 규칙의 우선순위와 적용 방식에 대한 명확한 기준을 제공한다.

우선순위(Specificity)

  • CSS의 우선순위 규칙은 선택자의 구체성에 따라 스타일이 적용되는 순서를 결정한다. 더욱 구체적으로 선택된 CSS를 우선순위로 적용한다.
순위규칙
1!important
2인라인 스타일
3id 선택자
4class 선택자
5태그 선택자

출처(Source Order)

  • 같은 구체성의 선택자들 간에 충돌이 발생할 경우, 정의된 순서에 따라 나중에 작성된 스타일 규칙이 우선 적용된다.

상속(Inheritance)

  • CSS는 특정 스타일 속성을 자식 요소에게 상속하는 방식으로 동작한다.
  • 기본적으로 텍스트 관련 속성은 부모 요소에서 자식 요소로 상속된다.
    그러나, 대부분의 레이아웃 관련 속성은 기본적으로 상속되지 않으며, 별도로 스타일을 지정해야 한다.

디스플레이 (Display)

디스플레이는 요소가 문서 내에서 어떻게 표시되는지를 정의한다. 이 값들은 요소의 박스 모델과 배치 방식에 영향을 미친다.

박스 모델 (Box Model)

웹 페이지의 레이아웃을 구성하는 데 필수적인 개념으로, 각 HTML 요소가 브라우저에 렌더링될 때의 구조를 정의한다.
박스 모델은 요소의 크기와 위치를 설정하는 데 사용되는 다층적 시스템이다.

- 박스 모델은 콘텐츠 영역(Content Area), 패딩 영역 (Padding Area), 테두리 영역 (Border Area), 마진 영역 (Margin Area)으로 구성되어있다.

1️⃣ 콘텐츠 영역 (Content Area)

  • 요소(Element)의 실제 내용을 포함하는 부분이다.
  • 텍스트, 이미지, 비디오 등 HTML 콘텐츠가 배치되는 공간을 의미한다.
  • 이 콘텐츠 영역의 크기는 요소의 width와 height 속성으로 정의된다.
  • 이 크기는 요소의 실제 내용이 들어갈 공간을 결정하며, 해당 영역 내의 텍스트나 이미지가 이 영역을 넘어서지 않고 잘 배치될 수 있도록 한다.

2️⃣ 패딩 영역 (Padding Area)

  • 콘텐츠 영역과 테두리 영역 사이에 위치하며, 콘텐츠와 테두리 사이의 여백을 정의한다.
  • padding 속성을 사용하여 조절할 수 있고, 상하좌우 각각의 패딩을 개별적으로 설정할 수 있다.
  • 패딩 영역은 요소의 배경색이나 배경 이미지가 적용되는 영역으로, 콘텐츠와 테두리 사이에 추가적인 공간을 제공하여 시각적으로 여유를 주고, 콘텐츠가 테두리에 닿지 않도록 한다.

3️⃣ 테두리 영역 (Border Area)

  • 패딩 영역을 둘러싼 선을 포함하며, 요소의 외곽선을 정의한다.
  • 테두리는 border 속성을 통해 설정되며, 두께, 스타일, 색상을 지정할 수 있다.
  • 테두리 영역은 패딩과 마진 사이의 구분 역할을 한다.
  • 테두리는 요소의 전체적인 시각적 윤곽을 형성한다.

4️⃣ 마진 영역 (Margin Area)

  • 요소의 테두리와 다른 요소 또는 부모 요소의 경계 사이의 공간을 정의한다.
  • margin 속성을 사용하여 조절하며, 상하좌우 각각의 마진을 개별적으로 설정할 수 있다.
  • 마진은 요소와 다른 요소들 사이의 간격을 조절하고, 요소 간의 공간 배치를 조정하는 데 사용된다.
  • 배경색이나 배경 이미지가 적용되지 않으며, 주로 요소 간의 격리와 정렬에 사용된다.

블록 속성 (Block)

  • display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다.
  • 대표적으로 <div>, <p>, <h1> 태그 등이 block 엘리먼트이다.
  • 여러 개의 block 엘리먼트들을 두면 매번 줄바꿈 되어 여러 줄에 보이게 된다.
  • block 엘리먼트는 inline 엘리먼트와 달리 width, height, margin, padding 속성이 모두 반영이 됩니다.

인라인 속성 (Inline)

  • display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.
  • 대표적으로 span, <a>, <em> 태그 등이 inline 엘리먼트이다.
  • 여러 개의 inline 엘리먼트들을 두면 줄바꿈 없이 순서대로 한 줄에 보인다.
  • 주의할 점은, width와 height 속성을 지정해도 무시된다는 것이다.
    • 왜냐하면, 해당 태그가 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지하도록 되어있기 때문이다.
  • 또한, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않는다.

인라인 블록 (Inline Block)

  • display 속성이 inline-block으로 지정된 엘리먼트는 마치 하이브리드 모드처럼 동작한다.
  • 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능하다.
  • 다시 말해서, 내부적으로는 block 엘리먼트의 규칙을 따르면서 외부적으로 inline 엘리먼트의 규칙을 따르게 되는 것이다.
  • 대표적으로 <button>, <input>, <select> 태그 등이 inline block 엘리먼트이다.

none

  • div를 두어도 시각적으로 보이지 않는다.

레이아웃 (Layout)

CSS의 Flexbox와 Grid는 웹 디자인에서 레이아웃을 구성하는 데 있어 강력한 도구이다. 이 두 레이아웃 시스템은 각각 고유의 접근 방식을 제공하여, 복잡한 레이아웃 문제를 효율적으로 해결할 수 있다.

플렉스 (Flexible Box Layout)

1차원 레이아웃으로, 가상의 가로축과 세로축을 기준으로 컨테이너의 요소들을 옮겨주는 것이다.

  • 기본 개념은 주축(main axis)과 교차 축(cross axis)를 설정하여, 요소들을 유연하게 배치하고 정렬한다.
  • 주축은 flex 컨테이너의 flex-direction 속성에 의해 정의되며, 요소들은 주축 방향으로 나열된다.
  • 교차 축은 주축에 수직인 방향으로, align-items 및 align-content 속성을 사용하여 요소들을 정렬할 수 있다.
  • 일반적으로 그리드로 페이지의 전체적인 레이아웃을 잡고, 그 레이아웃 안에서 요소들을 정렬하거나 위치시켜줄 때 플렉스를 사용한다.

그리드 (Grid)

2차원 레이아웃으로, 행과 열로 구성되어있는 그리드에 그리드 아이템을 옮기는 것이다. 일반적으로 페이지의 전체적인 레이아웃을 잡을 때 사용한다.

  • 기본 개념은 그리드 컨테이너를 정의하고, 이 컨테이너 내에 그리드 항목을 배치하여 복잡한 레이아웃을 효과적으로 구현한다.
  • 보이지 않는 가상의 줄들이 있다.
  • 그리드셀 사이의 간격은 갭(Gap)이라고 부른다.

장점
레이아웃의 위치를 명시적으로 정의할 수 있다.
grid-template-areas를 사용하면 그리드 레이아웃을 시각적으로 정의하고, 각 영역의 이름을 지정하여 요소를 배치할 수 있다.

그리드 라인

  • 행 번호와 열 번호를 가지고 그리드 셀을 위치시킬 수 있다.

미디어 쿼리 (Media Query)

웹 디자인에서 다양한 디바이스와 화면 크기에 맞춰 스타일을 동적으로 적용할 수 있는 강력한 도구이다.

  • 미디어 쿼리는 특정 조건에 따라 CSS 스타일 규칙을 적용하거나 제외할 수 있게 하여, 반응형 디자인을 구현하는 데 필수적인 기술이다.

반응형 디자인 (Responsive Design)
다양한 디바이스와 화면 크기에 맞춰 웹 페이지가 자동으로 조정되도록 설계하는 웹 디자인 접근 방식이다. 이는 사용자가 어떤 기기를 사용하든지 웹 페이지가 최적화된 사용자 경험을 제공하도록 하기 위한 기법이다.

원리
기본 원리는 조건부 스타일링이다. 즉, CSS 규칙은 특정 미디어 특성 (media features)에 맞춰 적용된다. 미디어 쿼리는 @media규칙을 사용하여 정의되며, 그 안에 특정 조건을 설정하여 스타일을 조절한다. 

@media (조건) {
	/* 스타일 규칙 */
}
  • 미디어 쿼리를 사용하여 다양한 화면 크기와 디바이스 환경에 맞춘 스타일을 정의할 수 있으며, 이를 통해 반응형 디자인을 구현할 수 있다.

Thymeleaf

타임리프는 자바 기반 웹 애플리케이션 개발에서 널리 사용되는 템플릿 엔진 (Template Engine)이다.

템플릿 엔진 (Template Engine)

템플릿 엔진은 미리 정의된 템플릿 파일에 데이터를 삽입하여 동적 콘텐츠를 생성하는 도구를 의미한다. 템플릿 엔진에서 사용하는 템플릿(Template)은 정적(static)인 부분과 동적(dynamic)으로 바뀔 수 있는 부분으로 구성되며, 동적인 부분은 데이터나 비즈니스 로직에 따라 달라질 수 있다.

  • 웹 애플리케이션에서 사용자에게 보여줄 HTML 페이지는 대부분의 구조가 동일하지만, 사용자의 이름, 프로필 사진, 개별 콘텐츠 등은 사용자마다 다를 수 있는데, 템플릿 엔진은 이러한 가변적인 데이터를 템플릿(Template)이라는 것에 삽입하여 각각의 사용자에게 맞춤형 HTML 페이지를 생성하는 역할을 수행하는 것이다.

의존성 주입
io.spring.dependency-management에 의해서 자동적으로 버전 관리를 받고 있다. 가장 호환이 잘 되는 버전으로 알아서 주입해준다. 

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}

타임리프 문법

<div th:xxx=""> ... </div>

th로 시작하는 것이 타임리프를 사용하는 것임을 알려줄 수 있다.

타임리프 네임스페이스

Thymeleaf를 사용하기에 앞서 HTML 문서의 최상단에 다음과 같은 네임스페이스(namespace)를 추가한다.

<html xmlns:th="http://www.thymeleaf.org">
  • 위의 코드를 통해 해당 HTML 문서의 속성중 th로 시작하는 것이 타임리프를 사용하는 것임을 IDE에게 알릴 수 있다.

타임리프 네임스페이스 속성

Thymeleaf는 다양한 속성을 제공하여 HTML 템플릿에서 동적인 콘텐츠를 렌더링할 수 있다.

th:text

요소 내의 텍스트를 동적으로 삽입할 때 사용된다. HTML 내의 텍스트 노드를 대체한다.

<p th:text="${message}">This is a message.</p>
  • message라는 변수를 템플릿 엔진이 렌더링할 때 해당 값으로 대체한다.
  • th:text 방식은 XSS(Cross Site Scripting)을 방지하기 위해서 관련 문자열이 전부 이스케이핑 처리되어 나타난다.
    • 렌더링 될 때 숨겨놓은 속성이나 값이 보이면 안되는데, 보이게 될 수 있다.
      => 이스케이핑 처리를 해서 이 문제를 방지할 수 있다.
  • 예를 들어, ${message}에서 message가 <b>Hello</b>라면, 화면에 <b>Hello</b> 가 텍스트로 표시된다.

이스케이핑 처리란?
웹 개발에서 특정 문자가 HTML 코드나 다른 마크업 언어로 해석되지 않도록 변환하는 과정이다.

th:utext

텍스트를 HTML로 해석하여 삽입할 때 사용된다.

<p th:utext="${htmlContent}">This is HTML content.</p>
  • htmlContent에 들어가는 내용이 HTML 코드라면, 이 속성을 사용하여 HTML을 그대로 출력할 수 있다.
  • XSS 공격에 대해서 유의해서 사용해야 한다.
  • 이스케이프 처리를 하지 않고 원본 HTML을 그대로 출력한다. 따라서, HTML 태그가 실제 HTML로 해석되어 브라우저에서 해당 태그가 적용된 스타일로 표시된다.
  • 예를 들어, ${message}에서 message가 <b>Hello</b>라면, 화면에 Hello 가 굵게 표시된다.

th:value

<input>, <option>, <textarea> 등에서 value 속성을 동적으로 설정한다.

<input type="text" th:value="${user.name}" />

th:href 및 th:src

링크나 이미지를 동적으로 설정할 때 사용한다.

<a th:href="@{/home}">Home</a>
<img th:src="@{/images/logo.png}" alt="Logo"/>
  • @{}는 URL을 자동으로 생성해준다.
  • 객체에서 값을 꺼내다가 주소를 합쳐서 보여주는 것도 가능하다.

th:if 및 th:unless

특정 조건에 따라 HTML 요소를 렌더링할지 여부를 결정하는 데 사용된다.

<p th:if="${user != null}">Hello, <span th:text="${user.name}"></span>!</p>
<p th:unless="${user != null}">Please log in.</p>
  • user 변수가 null이 아닌 경우 첫 번째 문단이 렌더링되고, 그렇지 않으면 두 번째 문단이 렌더링 된다.
  • 첫번째 문단이 거짓이 나왔다고 바로 밑에 문단을 실행하는 것이 아니라 unless를 다시 검사한다.
  • th:if와 th:unless의 조건식은 같아야 한다.

th:each

리스트나 배열과 같은 컬렉션을 반복하여 렌더링할 때 사용한다.

<ul>
    <li th:each="item : ${items}" th:text="${item.name}"></li>
</ul>
  • items 라는 리스트를 반복하여 <li> 태그로 각 항목을 렌더링한다.

th.object

form 전체를 특정 객체에 바인딩(Binding)하여, 해당 객체의 속성들과 form 필드를 연결한다.

<form th:object="${user}">
    <input type="text" th:field="*{name}" />
</form>
  • 커맨드 객체를 지정할 수 있다.

th:field

form 요소와 model 객체의 속성을 매핑하여 자동으로 name 및 value 속성을 설정한다.

<form th:object="${user}">
    <input type="text" th:field="*{name}" />
</form>

렌더링 후
<input type="text" id="name" name="name" th:value="*{name}" />

th.action

form 의 action 속성을 동적으로 설정한다.

<form th:action="@{/submit}" method="post">
    <input type="text" th:field="*{name}" />
    <button type="submit">Submit</button>
</form>
  • @{}는 Thymeleaf의 링크 URL 표현식이다.
  • @{/submit}은 현재 애플리케이션의 컨텍스트 루트(context path) 를 기준으로 /submit URL을 설정한다.
  • CSRF 토큰을 자동적으로 넣어주기 때문에 보안적으로도 좋다.

표현식(Expression)

타임리프 표현식은 타임리프 템플릿 엔진에서 동적인 데이터를 템플릿에 삽입하고, 다양한 조건과 로직을 적용하여 HTML 등을 생성하는 데 사용되는 기능이다.

변수 표현식

타임리프에서 가장 기본적인 표현식으로서, 스프링 애플리케이션에서 전달된 데이터를 템플릿에서 바로 사용하는 데 활용된다. 변수 표현식은 ${} 로 감싸서 사용되며, Model객체나 Map객체의 데이터를 참조할 수 있게 도와준다.

<p th:text="${user.name}">User Name</p>
  • user객체의 name 속성 값을 HTML 요소의 텍스트로 출력한다.

선택 변수 표현식

변수를 일종의 기준으로 설정하고, 그 기준에 따라 속성을 간결하게 참조하는 방식이다. 선택 변수 표현식은 *{}로 표시되며, 선택된 변수는 th:object 속성을 통해 설정된다.

<div th:object="${user}">
  <p>Name: <span th:text="*{name}">Name</span></p>
  <p>Age: <span th:text="*{age}">Age</span></p>
</div>
  • th:object로 user 객체가 선택되었기 때문에 *{name}은 ${user.name} 과 같은 의미로 해석된다.

메시지 표현식

국제화(i18n)를 지원하기 위해 사용되며, 외부 메시지 파일(일반적으로는 properties 파일)에 정의된 키 값을 참조하여 다국어 지원을 위한 텍스트를 출력할 수 있다. 메시지 표현식은 #{}로 표시된다.

<p th:text="#{welcome.message}">Welcome</p>
  • messages.properties 파일(국제화 메시지가 정의되어있는 파일)에서 welcome.message 키에 대응하는 값을 가져와 출력한다.

링크 URL 표현식

동적인 URL을 생성하는 데 사용된다. @{}을 사용하여 URL을 생성하고, 이를 통해 동적으로 생성된 URL을 템플릿에 삽입할 수 있다.

<a th:href="@{/user/profile/{id}(id=${user.id})}">
  My Page
</a>
  • {id} : 변수, (id=${user.id}) : 변수값 (변수이름 = 값)

조각 표현식

Thymeleaf의 템플릿 프래그먼트에 사용되는 표현식이다. 조각 표현식은 템플릿의 특정 부분을 다른 템플릿에서 호출하거나 삽입할 때 사용되며, ~{} 로 표시된다.

<div th:insert="~{fragments/header :: title}"></div>
  • resources/templates/fragments 디렉토리에 존재하는 header.html 파일의 title이라는 이름의 프래그먼트(Fragment)를 현재 템플릿에 삽입한다는 의미이다.

텍스트 대체 표현식

텍스트 대체 표현식은 템플릿 대상이 되는 HTML의 텍스트의 일부를 동적으로 대체하는 표현식이다. |..|를 사용하여 문자열의 일부 혹은 전체를 대상이 되는 태그의 내부 문자열로 치환할 때 사용한다.

<p th:text="|Hello, ${user.name}!|"> Origin Text </p>
  • | 을 쓰고, 문자열을 쭉 쓰면, 값 이외에 문자열도 함께 넣어줄 수 있다.
    • Hello, 민수! 라고 출력되는 것이다.
  • user.name이 null이면, 오류가 나지 않고 null이 출력된다.
    • user자체가 null이면, 문제가 있다.
  • 대체하고나면 Origin Text는 사라진다.

인라인 표현식

대상이 되는 HTML 문서 내에서 직접 데이터를 바인딩(Binding)하거나 템플릿의 동적 기능을 적용할 수 있는 방법을 제공하며, 이를 통해 서버 측에서 동적으로 생성되는 콘텐츠를 보다 간결하고 직관적으로 처리할 수 있도록 하는 표현이다.

  • Thymeleaf의 표준 표현식은 ${}으로 구성되어있는 것에 반해 인라인 표현식은 [[]]으로 구성되어있다.

th.inline

JavaScript 인라이닝
Javascript로 작성된 코드에 Model 객체가 보유하고 있는 값을 할당하여 사용할 때 사용될 수 있다. JavaScript 인라이닝을 사용하면 HTML과 JavaScript 코드 사이의 데이터를 쉽게 전달할 수 있다.

<script th:inline="javascript">
  const userName=/*[[${session.user.name}]]*/"user1";
  console.log(`username:${username}`);
</script>
  • 인라인을 사용하고자 하는 태그에 th:inline 네임스페이스(속성)을 부여하고 해당 태그 내부에 Thymeleaf에서 지정한 규칙에 맞추어 값을 사용하면 되는 것이다.
  • 이 때 표현식은 /*[[${ }]]*/으로 구성되어 있으며, 표현식 다음에 해당 변수에 기본값을 할당할 수 있다. ("user"이 기본값이 되는 것이다.)

CSS 인라이닝

<style th:inline="css">
  .[[${classname}]] {
  text-align: /*[[${align}]]*/ left;
 }
</style>
  • 마찬가지로 표현식은 /*[[${ }]]*/으로 구성되어 있으며, 표현식 다음에 해당 변수에 기본값을 할당할 수 있다.

참고할 사이트

CSS 연습 게임
https://flukeout.github.io/
https://flexboxfroggy.com/#ko
https://cssgridgarden.com/#ko
daisyUI
https://daisyui.com
copyright free image
https://picsum.photos

느낀점

오늘도.. 내용이 너무 많았다. 난이도가 어렵다기보단 아직 익숙하지 않아서 내가 흡수해야 할 내용들이 많아서 어려운 것 같다. 하지만, html도 그렇고 css도 그렇고 아주 일부만 본 거려나.. 하하

어제 TIL + 오늘 TIL 2일차 정리하려니까 내용이 너~무 많다 !!! 악 !! html & css 라서 내용이 더 많게 느껴지는 것 같기두..

오늘 팀 활동 때 강사님이 들어오셨는데, 좋은 말씀을 많이 해주셨다. 이렇게 꾸준히 열심히 하다보면 언젠간 나도 많이 성장해있을 거라고 해주셨고, 잘하는 분들을 보고 동기부여를 얻는 것은 좋으나, 스트레스 받지 말고 끝까지 할 수 있도록 하라고 하셨다. :) 새겨들어야겠다.

다행히.. 스트레스를 받아도 회복탄력성이 많이 좋아서 하하 속상해도 내가 할 수 있는 것에 집중해서 하는 편이라 지금까지는 꽤 괜찮게 해오고 있는 것 같다.

학교에서 html, css 했을 때는 무작정 코드부터 짜고.. 설명도 이렇게 구체적이지 않았어서 이해하지 못하고 넘어가는 것들이 많았는데, 수업들을 통해서 알게 된 것이 엄청 많은 것 같다!! 많이 신기해하며,, 많이 오호..응?? 어렵다.. 이러면서 들었던 것 같다. ㅋㅋ 복습하면서도 와 내용.. 짱 많다. 라고 느낀다. 실습 내용도 다시 보고 추가적인 내용이 있다면 기록해야겠다 ! :)

컨디션이 많이 좋아져서 오늘 수업을 잘 들을 수 있었다 아주 굿!

profile
2rlokr
이전 포스트

dev-course day20

다음 포스트

dev-course day22

0개의 댓글