[일간 회고] Cascading Style Sheets

Today I Learned

 

☑ CSS 기초 문법 및 메소드

• https://spiritfestival.tistory.com/51

 

☑ [ Pair program ] querySelector Sprint

 

☑ [ Pair program ] 계산기 Bare Minimum Sprint

 

 

 

Metacognition

 

📌 1. 오늘 나의 학습 목표는 무엇인가요?

👉 CSS 구성 흐름의 이해, 계산기 베어 미니멈 테스트 케이스 통과

 

 

 

📌 2. 오늘 학습할 내용 중에 이미 알고 있는 내용은 무엇인가요?

👉  CSS 대략적인 작성방법

 

 

 

📌 3. 오늘 학습 내용 중 새롭게 배운 내용은 무엇인가요?

👉 JavaScript에서 querySelector를 이용해 HTML의 textcontent에 접근 및 수정
      CSS에서 > 를 이용해 HTML 하위 태그로 접근할 수 있음

 

     document.querySelector는 DOM에서 자세하게 배우므로 지금은 이런게 있구나 정도로 기억하면 됨

<< 대충 자바스크립트라는 태그 >>

<div id="hello">hello</div> 
//div id가 hello로 되있고 컨텐츠가 hello로 되있음

document.querySelector("#hello").textContent = "Fuck"
//div의 id = "hello"의 textContent hello에 접근, "Fuck"로 수정 함

<div id="hello">Fuck</div> //결과

 

     CSS로 디자인을 할때 상위, 하위태그를 분류해서 설정할 수 있음

<< 대충 HTML이라는 태그 >>

<div class="button__row">
  <button class="number">7</button>
  <button class="number">8</button>
  <button class="number">9</button>
  <button class="operator">+</button>



<< 대충 CSS라는 태그>>

.button__row { //<div class="button__row"> 태그에 접근
    height: 70px;
    display: flex;
    justify-content: space-between;
}

.button__row > button { //div 하위로 작성된 button 태그에 접근
    width: 75px;
    height: 65px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.5em;
    outline: none;
    background-color: #fffbf0;
    color: rgb(255, 172, 172);
    border-bottom: 3px solid #d27082;
}

//나누지 않고 하나의 태그에 CSS를 설정하면 (.button__row ) 정상적으로 버튼의 모양이 나타나지 않음

 

 

 

📌 3 - 1. 오늘 새롭게 학습한 내용을 자신의 언어로 다른사람에게 설명할 수 있나요?

👉 True...? 아직 완벽하게 숙지하지 못함

 

 

 

📌 4. 오늘 학습한 내용 중, 아직 이해되지 않은 불확실한 내용은 무엇인가요?

👉 HTML, CSS, JavaScript 구성

 

 

 

📌 4 - 1. 이해되지 않은, 불확실한 내용을 보완하기 위해서 나는 무엇을 할 수 있을까요?

👉 계산기 스프린트의 구조를 하나부터 천천히 뜯어보기

 

 

 

📌 5. 나의 오늘 학습 만족도는 몇점인가요? ( 매우낮음 1 ~ 매우 높음 5 )

👉 보통 3점

 

 

 

Daily retrospective

 

인터넷이 갑자기 먹통 되버려서 뜻하지않게 지각을 해버렸다.. 켁

 

와이파이 신호가 미약해서 KT공유기에 iptime 익스텐션을 연결해놧는데 호환이 잘 안되나보다 염병

 

페어와 함께 계산기 만들기 과제를 하면서 CSS흐름에 대해선 이제 어느정도 숙지를 한거 같은데..

 

어드밴스가 참.. 골때린다 이런 코드로도 동작이 되나.. 싶다

 

문제는 나이트메어인데.. 꼭 해보고 싶은데.. 어드밴스에서도 허덕여서 까마득하다..