프리코스(4) - 8/17 CSS Position,컴퓨팅사고, JS

Html, css 는 자주 하면 되는데 js 는 조급해지기 떄문에 일찍 시작하는게 좋아서 

 

프리코스는 처음 보는 사람 목적이기에. 처음하는 사람 위주로 포커스 

 

코드가 작성된 순서와 상관없이 요소를 원하는 위치에 두기 위해 → CSS position 속성을 사용하면 HTML 요소를 원하는 위치에 배치할 수

---

[CSS Position]

Position 속성의 종류

• position 속성에서 사용하는 값은 4개가 있습니다.
• 거의 사용하지 않는 static 을 제외한 나머지 세가지 속성에 대해 배워보도록 하겠습니다.
• position: static;
• position: relative;
• position: absolute;
• position: fixed;

 

1. position: relative;

• position: relative; 자체로는 의미가 없. 이동하지 않습

         → top, right, bottom, left 속성을 부여해야 이동 → ‘원래 있어야하는 위치에서 상대적으로 어디까지 가라’

• top, right, bottom, left

        → position 속성이 있을 때만 적용 

원래 있어야 하는 자리에서 00방향으로 00 만큼 이동하는 것

.relative_div {

  position: relative;

  top: 50px;

  left: 30px;

}

 

왼쪽으로 30px 이동해라 (x)

왼쪽에 30px 띄운다 여유를 둬. = 오른쪽으로 간다 (왼쪽으로 가는 게 아님)

위에서부터 여백을 50px 둬라 = 밑으로 내려간다 (위로 올라가는 게 아님)

여백을 주는 거랑 이동시키는거랑 다르다   → 박스가 위 아래 왼쪽으로 움직이는 거 

• Padding, margin : 여백 주기 

 

padding-top:50px

여백을 주는 것 —> 공간이 이만큼 생기는 거라서, 

 박스 통째로 내려오게 돼 있음 (화면에 어느정도 여백 주는 것 =전체 박스안에 여백) 

.relative_div {

  position: relative;

  top: 50px;

}

작은 박스가 

얘만 움직이는 것 (이동시키는 것)

 

• position: relative; 자체로는 특별한 의미가 없습니다. 즉, 요소의 위치가 이동하지 않습니다.

Html

    <div class="relative_div">Relative div element</div> 

CSS

.relative_div { position: relative; top: 50px; left: 30px; }

---

• Q) top 속성의 값으로 마이너스 값을 주면?

.relative_div {

  position: relative;

  top: 100px;

}

원래 있던 위치에서 ‘위에 100만큼 여백을 줘라’ 해서 박스가 내려감 

.relative_div {

  position: relative;

  top: -100px;

}

-100하면 원래 있던 위치에서 -100 여백 줘라 해서 박스가 올라감

---

2. position: absolute;

1.  절대적인 위치를 정해주면 그 자리에 가만히 있는다 

2. 누가 기준인지를 정해준다 (자기보다 하나 위의 요소; 부모 요소 기준으로)

• 부모 중에서, relative, fixed, absolute 하나라도 적용되어 있어야 함 
• 아무것도 지정되지 않은 애들은 부모 태그 아님. 

 

.absolute_child {

  position: absolute;

  right: 0;

  bottom: 0;

  background-color: cornflowerblue;

}

• 부모 태그에 오른쪽에 딱 붙음. 다른 것에 의해서 변하지도 않음

relative는 기준이 내가 원래 있어야 하는 위치

Absolute 는 부모 태그를 기준으로 ; 부모한테서부터 절대적으로 000 떨어져 있어야 한다. 

<div class="parent"> Parent div </div>

 <div class="absolute_child">Child div with absolute</div> 

 

.absolute_child { position: absolute; right: 0;

• Parent 가 변하면, child 태그가 따라가서 
• Parent 기준으로 오른쪽 기준으로 딱 붙어 있어야 해 right:0 

→ 부모 요소 기준으로만 나뒀으면 좋겠다. (Unless, 화면 변화하면 따라다니게 됨)

 

위치만 바뀌는게 아니라, 크기가 줄어진다. 

원래 한 칸 다 차지하는 block 인게, absoltue 주면 inline으로 작아짐

그 위치는 부모로부터 절대적으로 정해진다. 

---

3. position: fixed;

• fixed는 단어 그대로 ‘고정됐다’는 뜻입니다.
• 마우스 스크롤해도, 특정 요소를 화면의 특정 위치에 고정하여 보여줄 때 사용하는 속성입니다.
• absolute 적용시에는 position 속성을 가진 부모가 필요했는데, fixed는 그럴 필요가 없습니다.
• fixed 속성은 브라우저 화면을 기준으로 요소를 위치시키기 때문입니다. 전체 화면을 기준으로 움직이는 것. 

 

Flex 개구리 게임 → 레이아웃 (나중에 해도 됨)

 

---

[ 컴퓨팅 사고] 

낯설어서 

인문계라면 통합형 사고 훈련이 되어 있어요 

 

A > B > C 로 훈련해야 해서 

컴퓨팅사고란

컴퓨터가 어떻게 사고할까. 컴푸터는 넘겨짚거나 그런게 아님. 무조건 원인이 있음.

내가 풀어야 하는 문제 정의하고. 

컴퓨터처럼 생각한다.

 

인형뽑기를 한다고 생각하자. 

어떻게 하지? 

 

쪼개서 생각해보자 (컴퓨팅 사고는 사람행동과 같음)

 

1. 레버를 오른쪽으로 움직인다 (순차적으로)

(집게와 인형의 가로 위치가 맞는가 생각 후)  (분기)

→ yes(집게와 레버의 위치가 맞다)/ no (다시 움직인다)

→ no이면 다시 움직이고 다시 반복해서 

→ yes(집게와 레버의 위치가 맞다)/ no (다시 움직인다)

 

     2. 집게와 인형의 세로 위치가 맞는가 

→ yes(집게와 레버의 위치가 맞다)/ no (다시 움직인다)

 → no 일 때, 다시 yes/no 

→ no면 다시 하고 yes/no (반복)

     

     3. yes면 선택 

1. 순차적으로 쪼개보고
2. 분기를 해서 나눠볼 것 (분기=경우가 나뉜다. 분기점) ‘프로그래밍은 ‘순차 분기 반복’의 반복 → 의문점을 던져서 yes, no 판단
3. 반복 → no 면 계속 반복

 

컴퓨팅사고는 매번 yes, or no 로 사고

개발이 어려운게 아니라 이 사고 과정이 훈련 안 돼서 어려운 것. 

문법이 어려운 게 아님. 낯선 것. 

개발자 아닌 사람들이 일을 준다. 

로그인 복잡해서 단순화를 시켜야 해요. → 어디서 안 되고, 뭐가 불편하고, 어디가 안 되고 → 쪼개서 하는

→ 컴퓨팅 사고 = 문제해결적 사고 

 

사람이 잘게 쪼개서 

절차적으로 사고하면 된다

 

문제를 잘 이해하고 

문제를 잘게 분해해서 

어떻게 해결할지 생각하자

 

사고방식 차이

문과: 천원을 넣고 잃는다

이과: 레버를 어떻게 옮기고, 어떻게 뺄지 

 

공부 많이하고 검색 많이해서 

생각을 해서 손으로 써보기

Javascript 어려우면 → 플로우차트로 yes/no로 손으로 종이로 써보기 

개발자 

Yes or no 로만 생각 

 

밈

→ 우유 사고 아보카도 있으면 6개 사와 

→ 개발자 사고: 우유 = 산다, 아보카도= 있으면 6개 사와

산다는건 우유만 입력이 된다.

프로그래밍을 해서 명령을 내려돼야 해서. 

---

배민 CTO → CEO 김범수 (찐 개발자)  

스스로 코딩을 하는 사람으로 정의하지 않았으면 좋겟다. 

때로는 정책을 바꾸고 프로그래밍을 안 하는게 문제를 해결하는 것일 수도. 

 

엘리베이터가 늦게 오는 거 같아요. → 거울 설치 (거울 보다 보면 늦는걸 기억 못함) 

풀고자 하는 문제 정의 먼저

---

[Javascript ] 

목적: 

Javascript 언어가 만들어진 이유 → 순전히 웹브라우저를 위해

 (html은 움직임 없으니)

• 사람들이 보기만 하고 싶지 않은 것. /프로필 사진을 뜨면, 인사말이 뜨면서 (경고창), 배경색이 노란색으로 변하게 /(백엔드 위해서는 아님. 백엔드에서 JS 쓰기 시작한게 2009년? 얼마 안됨.) 

 

실생활에서 쓰이는 js

• 로그인 버튼 누르기
• 장바구니 담기
• 인터넷 강의 2배속 클릭할때 

 

2개만 알면 됨

1. 이벤트 : 박스를 드래그하는 사용자의 행동 (사람이 하는 것)
2. 함수 : 박스가 움직이는 웹의 움직임 (웹브라우저가 동작하는 것) 이벤트의 결과 (이벤트 발생시 동작하는 기능을 미리)

         이벤트 발생 시 동작하는 일을 개발자가 다 만들어놓음/미리 코드를 해놓음,

         사진이 확대된다 -> 그 코드 넣어놓음

         클릭하면 화면이 바뀐다 -> 클릭하는 이벤트, 화면이 바뀌는 동작 (코드 다 미리 만들어놓음)

이벤트와 함수의 차이

(이벤트) 마우스를 드래그하면, (함수) 박스가 움직인다

(이벤트) 박스를 클릭하면, (함수) 박스가 열리고 1초 후 오리 나온다. 경고창 뜬다. 배경색이 생긴다. 

 

• html로 구조 만들고, css로 디자인을 하고, JS로 사용자가 어떤 이벤트를 발생시킬건지, 웹브라우저는 어떤 함수를 실행시킬건지 결정하는 언어. / 사용자의 이벤트가 뭐가 발생했는지 알려주고, 웹브라우저에게 어떤 방식으로 이동할지 알려줌 

• 이벤트와 함수로 인해서 자바스크립트가 만들어짐.
• 웹과 사용자 간의 동적인 상호작용을 위해 만들어진 언어 (html, css 에선 불가)
• 브라우저에서 사용자의 행동을 처리한다. 

 

가장 대표적인 함수가 alert (js가 미리 갖고 있는 함수)

작동하는 법 

1. Script 태그 이용한다

       <script></script> 태그 사이에 JS 언어 적어준다.

 

 

절차적으로 컴퓨팅 사고 

1. Image tag 선택한다
2. 이미지 태그를 클릭하는 이벤트를 감지하도록 시킨다
3. 알림창을 띄운다
4. 배경색을 바꾼다 

 

자바스크립트에게 태그를 골랐다 라고 말하는(선택했다)

 

태생에 자바스크립트는 웹브라우저에서 동작하도록 만들어졌기 때문에, html에 연결해준다. 

동작시키는 과정이 어려운데, 

JS 문법을 알아야 함.