언어의 필요성을 알려주기가 제일 먼저!

 

언어 치료사 선생님과 수업을 시작한 지 한달 째 이야기를 적어봅니다.

 

언어치료라고 한다면 제가 생각했던 수업은
물건의 이름을 불러보며 반복하고 발성을 연습이였다.

하지면 언어치료의 처음부터 바로 말을 배우는 것이 아닌
말의 필요성을 가르치셨다.

첫날에는 아이의 성향을 관찰을 하셨다. 아이의 행동 중 기차, 자동차에 관심을 보이는 걸 보셨고,
그 장난감은 혼자놀이의 시간을 보내는 것이기에 다음 수업 시간에는 숨겨놓겠다고 하셨다.

그리고 제게도 집에서 아이가 혼자서 노는 장난감들은 숨겨놓는게 좋겠다고 하셨다.

그 말을 듣고 좀 놀랬다. 평상시 아이가 혼자 논다라고 생각하지 않았었다.
기차놀이를 할 때도 각자 기차를 가지고 끌고 다니며 놀았기 때문이다.
그런데 생각해보면 그걸 하는 동안 칙칙폭폭 뿌웅과 같은 의성어를 내며 놀았지
아이와 저의 둘 간의 대화를 하는 게 아니였다.

집에 와서 장난감도 치우고 혼자노는 장난감들을 우선 치웠다.


그리고 생각했다.

저는 아이와 소통하며 놀고 있다고 했지만
아이가 하라는 대로 움직였고 그거에 반응만 했었지 그건 대화가 아니였구나하고 말이다.

 

 


그 다음에는 아이는 40분 이라는 시간을 앉아서 수업을 듣는 것에 집중하는 데에 신경을 써주셨다.

그리고 3번째 수업때 아이는 40분 수업 시간 동안 의자에 앉아서 시간을 보내는 데 익숙해졌다.

아이의 성향마다 차이는 있겠지만 선생님께서 재밋는 놀이를 가져오고

같이 놀고 싶다면 와서 의자에 앉아야 한다는 걸 아이도 이해를 했던 것 같다.


아이가 수업을 듣는 책상 위에는 과자가 통에 담겨져 있었고
평상 시에 떼를 써야지만 먹을 수 있던 게 상대방의 입에 집중하고
뭔가를 해야하는 지를 이해해야 얻을 수 있다는 걸 가르키셨다.

아이는 뭔가를 얻었을 때 들었던 이야기 들보단 그 때 본인의 행동에 기억을 갖게 되서
보호자가 안내하는 이야기보단 떼를 써서 받은 행동으로 얻었다고 생각한다고 한다.

그래서 떼를 쓸 때 원하는 걸 주기 보다는
지시에 따르거나 칭찬을 할 때 주는 게 좋다고 하셨다. 그러면서 아이가 말을 해야하는 필요성을 가르키고 서로 노는 방법을 알려주셨다.

언어치료와 전반적인 아이의 사회성까지 배우게 되면서

아이는 회차가 지날 수록 성장하고 있다는게 눈에 띄게 보였다.

 

 

(next)

반응형

Chrom 크롬은 자동 업데이트가 되기 때문에 문제가 되지 않지만,

window 윈도우 사용자는 수동으로 업데이트를 해줘야 하기 때문에

아직 window 윈도우 IE 7~9 버전을 쓰는 분들이 있습니다.

 

문제는 CSS의 기능 중 window 윈도우 11 이하의에선 css가 적용이 안될 때가 있습니다.

예를 들어 display:flex 기능이 있다.

 

이럴 때 어떻게 해야하는지 알아보자.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css">
    <!--[if lt IE 10]>
    link href="css.ie.css" type="text/css" rel="stylesheet"/>
    <!-[endif]-->
</head>
<body>
    
</body>
</html>

 

head 태크 안에 조건부 if 로 CSS 파일을 첨부하면 된다.

 

 

 

반응형

깃허브

터미널(terminal) - new terminal

0. 최초의 경우 ※맨 처음 
git init

1. git add .  - 전부 가져와
2. git status  - 뭐를 전부 가져왔더니 뭐가 추가했는지 찾았어(필수 아님)
3. git commit -m "first commit" - 히스토리를 만드는 것(수정사항 이름 달기)

이제 깃허브와 연결고리 작업하기

git remote add origin git@github.com:-----

수정할 때는 
1~3번 하고나서
git push origin master

반응형

div 요소들인 box는 기본적으로 세로 정렬이 된다.

가로 정렬을 하고 싶을 때는 display:flex를 사용하면 됩니다.

 

반응형에 필수로 사용된다 (예시로 PC 가로 버전이고 MO 세로 버전으로 할 때 사용한다)

<div class="flex-container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
.flex-container {
  display : flex;
}
.box {
  width : 400px;
  height : 200px;
  background : #ddd;
  margin : 5px;
}

 

Flexbox 세부 속성

.flex-container {
  display : flex;
  justify-content : center;  /* 좌우정렬 */
  align-items : center;  /* 상하정렬 */
  flex-direction : column; /* 세로정렬 */
  flex-wrap : wrap;  /* 폭이 넘치는 요소 wrap 처리 */
}
.box {
  flex-grow : 2;  /* 폭이 상대적으로 몇배인지 결정 */
}

 

box 좌측 & 우측 정렬 동시에 하는 방법

<div class="flex-container">
  <div class="box"></div>
  <div class="box" style="flex-grow : 1"></div>
  <div class="box"></div>
</div>

 

align-content 상하배치를 조절하는 속성 (justify-content의 세로버전)

flex-start /* 시작 부분에 플렉스 아이템 정렬 */
flex-end /* 끝 부분에 플렉스 아이템 정렬 */
center /* 가운데에 플렉스 아이템 정렬 */
stretch /* 플렉스 아이템을 컨테이너에 맞춰 늘림 */
space-between /* 간격을 동일하게 조절하여 아이템 정렬 */
space-around /* 아이템과 컨테이너 양 끝에도 간격을 두어 정렬 */

 

 

반응형

1. float 는 margin 사라진다.

아래 해결방법

(범람을 막고 싶은 요소)::after{

content : " ";

display : block;

clear : both;

}

 

2. 웹폰트 넣는 법

구글폰트 - HTML파일의 <head>태그 안에 <link>또는 @import, CSS파일에 font-family 속성 적기.

 

아래 예시 Noto Sans Korean 폰트

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.noto-sans kr-<uniquifier> {
  font-family: "Noto Sans KR", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

 

※ 한글폰트는 파일로 직접 가져온다면 1~2개만 넣기..

한글폰트는 한자까지 해서 너무 무거워서 트래픽을 많이 잡아먹기 때문에.

그리고 용량을 줄이려서 ttf 보단 woff 파일로 쓰자. (ttf의 약 1/3 사이즈)

 

3. 폰트 안티앨리어싱 폰트 부드럽게 처리

맥북은 원래 폰트를 부드럽게 처리되어 보여줘서 비슷하지만, 윈도우에선 이 효과가 큰 차이를 보인다.

 

아래 해결방법

transform:rotate(0.03deg)
반응형

DOM (문서 객체 모델)(Document Object Model)

 

웹페이지는 어떻게 만들어지는 걸까요?

웹 브라우저가 원본 HTML 문서를 읽은 후, 스타일 입히고 페이지를 뷰 포트에 표시하여 만듭니다.

그 과정의 모델이 필요한데 그 이름이 DOM 입니다. (다른 모델도 있음)

 

DOM은 HTML 코드를 해석 후 요소들을 트리 형태로 구조화해 표현하는 형식

그리고 DOM은 자바스크립트를 사용해 웹 화면의 콘텐츠 추가, 수정, 삭제 등

이벤트 처리를 할 수 있도록 프로그래밍 인터페이스를 제공한다.

 

+ 추가 내용

 

DOM은 HTML이 아닙니다.

DOM은 브라우저에서 보이는 거시 아닙니다.

DOM은 가상 요소를 포함하지 않습니다. (ex: ::after)

DOM은 보이지 않는 요소를 포함합니다. (ex: display:none;)

자바스크립트에 의해 DOM을 수정하여 새로운 노드를 추가, 삭제 등 할 수 있습니다.

 

반응형

+ Recent posts