- 오늘의 자체 평가 및 느낀점 -
-> 오늘은 CSS를 배우는 날. 어떤 것을 배울지 머리를 비우고 새로운 내용을 받아들일 준비를 하자.
-> 커리큘럼 상 첫 CSS를 배운 날이다. 강사님이 기본적인 것만 가르쳐 주셔서 그런지 모르지만 생각보다 어려운 개념은 없었다.
난 항상 개발 공부 관련해서 무지성으로 공부를 해왔던 것 같다. 일례로 독학 시절에는 정확한 개념을 이해도 못하고 따라치기 급급했다. 이론이 미흡했던 것만 아니라 코드가 실행되는 흐름을 전혀 몰랐던 것이다. 또 이론이 모라자라고 느끼니 계속 이론을 찾아가면서 영상으로만 공부를 해왔다. 결과적으로 내 손으로 하나 코드를 짜보지도 못한 상태로 머리 속에만 자리잡고 있기에 조금의 응용이 일어나면 흐름을 잡지 못하여 공부 중 포기가 많았던 기억이 난다.
학원에 들어와 강사님의 강의를 수강하면서 두번 세번 반복해서 보고 쓰고 하니 이제서야 조금씩 개념이 머리에 들어오는 기분이다. 학원을 다니기로 한 결정은 참 잘했다고 스스로 생각한다. 강사님의 반복적인 설명은 개념을 더 굳건하게 자리잡게 만든다. 이를 잘 활용하여 매일매일 실습을 해 내 것으로 만들것이다.
집에 와서 CSS 개념중 class 선택자, id 선택자의 개념을 확실히 다졌다. 중복성, 단일성의 가장 큰 차이. 오늘 짠 코드의 유일한 오점의 개념을 복습했다.
내일은 스터디원들과 Git으로 협업을 하는 날이다. 대비를 잘해가야지.
- 오늘 공부 계획 -
- 자바스크립트 공부 (뉴렉처) 28강~(복습겸)
- css 강의 내용 복습
- HTML 지난 주 내용 복습
- 일주일 간 쇼핑몰 세미 프로젝트의 사이트를 찾고 구현할 기능 생각하기
- 공부 내용 -
- HTML 각종 태그들 (HTML5)
- CSS 선택자
- Input 태그
- form 태그
- label 태그
- textarea 태그
- select 태그
- datalist 태그
- fieldset 태그
- style 태그
- link 태그
- 선택자
- 전체 선택자
- 클래스 선택자
- id 선택자
- 후손 선택자
- 자식 선택자
- 필터 선택자
- 형제 선택자
- 인접 형제 선택자
- 속성 선택자
- 가상 선택자
- 뉴렉처 JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="javascript-dom1.js"></script>
</head>
<body>
<section id="section5">
<h1>Ex5 : 엘리먼트 노드의 속성 변경</h1>
<div>
<input class="src-input" list="img-list" />
<datalist id="img-list">
<option value="img1.jfif">img</option>
<option value="lion.jpg">img2</option>
<option value="library.jfif">img3</option>
</datalist>
<select class="img-select">
<option value="img1.jfif">img</option>
<option value="lion.jpg">img2</option>
<option value="library.jfif">img3</option>
</select>
<input class="change-button" type="button" value="변경하기" />
</div>
<div>
<img class="img" />
</div>
</section>
<hr />
<section id="section4">
<h1>Ex4 : childNodes를 이용한 노드 선택</h1>
<div class="box"><input /><input />
</div>
</section>
<hr />
<section id="section3">
<h1>Ex3 : Selectors API Level1</h1>
<div>
<input name="x" type="text" value="0" dir="rtl" />
+
<input class="y" type="text" value="0" dir="rtl" />
<input class="btn-add" type="button" value="=" />
<input class="sum" type="text" value="0" readonly dir="rtl" />
</div>
</section>
<hr />
<section id="section2">
<h1>Ex2 : 엘리먼트 선택방법 개선하기</h1>
<div>
<input class="txt-x" type="text" value="0" dir="rtl" />
+
<input class="txt-y" type="text" value="0" dir="rtl" />
<input class="btn-add" type="button" value="=" />
<input class="txt-sum" type="text" value="0" readonly dir="rtl" />
</div>
</section>
<hr />
<section>
<h1>Ex1 : 계산기 프로그램</h1>
<div>
<input id="txt-x" type="text" value="0" dir="rtl" />
+
<input id="txt-y" type="text" value="0" dir="rtl" />
<input id="btn-add" type="button" value="=" />
<input id="txt-sum" type="text" value="0" readonly dir="rtl" />
</div>
</section>
<hr />
</body>
</html>- 뉴렉처 강의를 보며 사용한 JS 코드 노드의 속성을 이용하여 그림을 삽입한 웹 프로그래밍.
- 스터디 계획 및 결과 -
> 오늘 스터디 계획은 오늘 강의 내용의 주된 복습이었다. 강의중 코드를 전부 리뷰하고 서로 애매한 개념에 대해 묻고 답하는 시간이었다. HTML 태그와 CSS 선택자의 대한 내용들.
리뷰를 마치고 지금까지 배운 CSL로 간단한 자기만의 웹 페이지를 작성하는 시간을 가졌다. 복습 겸 머리속의 개념을 활용한 코드를 작성하니 내가 부족한 개념에 대해 느낌을 동시에 스터디원 각자의 코드와 웹페이지를 보며 저런 코드를 작성할 수도 있다는 확장성을 띄게 해준 유익한 시간.
'Front' 카테고리의 다른 글
| 2021.12.22의 기록 (0) | 2021.12.22 |
|---|---|
| 2021.12.21의 기록 (0) | 2021.12.21 |
| 2021.12.18~12.19의 기록 (2) | 2021.12.19 |
| 2021.12.17의 기록 (0) | 2021.12.17 |
| 2021.12.16의 기록 (2) | 2021.12.17 |
