1. CSS float 개념
배운 내용
float은 이미지가 차지 하고 있던 정상적인 위치(normal position)를 벗어나게 함float을 적용하면, img 후에 위치한 모든 요소들 중 인라인 요소들은 이미지의 float된 위치를 인식할 수 있으나 블럭요소들은 float된 요소를 인식할 수 없기 때문에 아무것도 없다고 착각하여, 이미지의 공간을 파고 들어오게 됨
핵심 포인트
float시 인라인 방식(ex: 글씨)은 침범x
블록 방식(ex: div)은 침범해버림- block 요소를
float시키면 서로 배척하는 성질 사라짐
※주의: inline으로 변하는 것은 아님
왜?
만약 float 으로 인해 인라인이 되면 width, height 적용x
하지만 블록은 float 시키면 width, height, margin, padding 다 가능
clear: both;
이 속성을 적용하면 float된 공간을 인식해서 파고 들어가는 것을 방지해줌느낀 점
-float은 생각보다 많이 쓰인다.
그리고 float이 쓰이는 만큼 clear:both;도 많이 쓰인다. 꼭 알아둬야함.
2. Javascript 변수와 자료형
배운 내용
- JS는 동적변경 (프로그램이 실행되는 와중에 변경)이 가능
<button onclick="this.innerText='banana'">apple</button>- 사람이 이해하는 데이터의 종류는 매우 多
하지만 프로그래밍 분야에서는 only 3개
문자, 숫자, 논리값(true/false) - 리터럴: 표기할 때는 정해진 표기법 이용해야 함
- 숫자
ex) x=56; 숫자형 리터럴은 오직 숫자만 명시 - 문자
ex) y="사과" 문자형 리터럴은 ""감싸기 - 논리값
ex) z=true, k=false; 논리형 리터럴은 true false 단어 그대로 적기
- 숫자
- 변수명은 특수문자로 시작할 수 없으나, $,_ 는 예외
- camel 표기: 두 단어의 합성어 일 때, 뒷 단어의 첫 철자를 대문자로 표기 ex) myMoney
느낀 점
- 사전 이러닝으로 자바를 먼저 접하고 자바스크립트를 접했는데 상당히 비슷한 부분이 많아서 놀람. 이래서 본격적으로 자바 프로그래밍 들어가기 전에 자바스크립트를 먼저 배우는구나 싶었다.
3. JavaScript 연산자
배운 내용
- 산술연산자
- 대입연산자 += (더하고 대입), -=(빼고 대입)
let y=7;
y=y+3; // 줄여쓰면 y+=3- 증감연산자 ++(1씩 누적), --(1씩 차감)
- 비교연산자 !=(not), ===은 ==보다 비교대상의 자료형까지 엄격하게 구분
- 논리연산자 &&(and : 까다로움), ||(or : 관대함), !(not)
- 삼항연산자 ()? 좌(True) : 우(False)
핵심 포인트
- 산술 연산자 中 '나머지'를 구하는 연산자 : %
let x=5; // 메모리에 공간 +1 > 5저장> 그 공간의 이름 x로 설정
let y=3;
let z=x%y;
console.log("나머지는",z); //브라우저의 자바스크립트 콘솔화면에 출력하기- 산술연산자 中 더하기 연산자는 '연결자'로서의 기능도 있음
- 증감연산자 中 전위연산과 후위연산
전위: 먼저 연산 후 출력
후위: 일단 출력 후 연산
var x=true, y=false;
var k=0;
k= (x&&y)? 0:3;
k=(k!=0)? 10:5;
k%=10;
console.log(k++); // 0 일단 출력 0, 그리고 후위증가로 k=1
console.log(++k); // 2 k=1에 전위증가 출력 2코드를 입력하세요- 삼항연산자
(소괄호 안의 결과가 참이니)? 좌측항 : 우측항;
맞으면 좌측항, 틀리면 우측항
느낀 점
- 삼항연산자가 정말 많이 쓰이기 때문에 개념을 잘 다져두어야 할 것 같다.
Java에서도 이 연산자들이 같은 형태로 매우 자주 사용되기 때문에 개념을 잘 다져놓고 체화시키려고 한다.
4. JavaScript 전역변수
배운 내용
- 전역변수: 프로그램이 시작되면서부터 끝날 때까지(브라우저 닫을 때까지) 생명을 같이하는 변수
let n=0;
//전역변수: 프로그램과 생을 같이함
// 전역변수의 값을 1씩 증가시키기
function increase(){
n++;
console.log("카운트 = "+n);
}
// 전역변수의 값을 1씩 감소시키기
function decrease(){
n--;
console.log("카운트 = "+n);
}핵심포인트
- 갤러리 만들기 예제로 알아보는 JS
<script>
let n=1;
function prev(){
n--;
// 이미지 파일에 -는 없으므로 1보다 작을 때 max로 가게 해주기
if (n < 1){
n=9;
}
document.querySelector("img").src="../../../../images/geographic/animal"
+ n +".jpg";
}
// 현재 보고있는 사진의 다음 사진을 나오도록 처리
function next(){
// 문서 내의 img 요소의 src속성값을 1씩 증가시켜 대입
n++;
if (n >9 ){
n=1;
}
document.querySelector("img").src="../../../../images/geographic/animal"
+ n +".jpg";
}
</script><body>
<div id="wrapper">
<div id="header">
<button onclick="prev()">이전</button>
<button onclick="next()">다음</button>
</div>
<div id="section">
<img src="../../../../images/geographic/animal1.jpg" alt="물범">
</div>
</div>
</body>느낀 점
단순한 프로그래밍 작업도 여러가지 요소들을 복합적으로 고려하며 하나씩 체크해야 잘 작동할 수 있다는 것을 조금이나마 느꼈던 시간이었다. 나무도 중요하지만, 먼저 큰 숲을 보고 차분히 하나씩 해결해나가는 연습을 해나간다면 해답의 목소리가 들리지 않을까?
강사님이 오늘 배운 내용과 코드를 보지 않고 처음부터 끝까지 써내려갈 수 있어야 온전히 자기 것이 된 것이고, 그게 진정한 공부라고 하셨다. 머리를 띵 맞은 기분이었다. 흐릿한 기억들을 내 것이라고 착각했던 지난 날의 내 모습이 스쳐지나갔다. 하지만 아직 3일 차, 늦지 않았다.
자책보다는 반성의 시간을 가지고 오늘부터는 회고를 통해 폭풍성장을 도모하려 한다. 화이팅!
아이들의 가능성을 믿었던 마음 그대로, 이제는 나의 가능성을 믿고 나아가는 중입니다.🌱