개발학습/코드스테이츠 SE Bootcamp

코드스테이츠 SEB 6일차 TIL - CSS 기초, 계산기 웹 애플리케이션

자율학습 코딩봇 2021. 7. 26. 21:20

1주차 주말동안 좀 쉬고 난 뒤 오늘 다시 부트캠프의 6일차 일정이 이어졌다.
오전에 CSS기초와 관련된 내용을 학습하고 난 뒤, 오후 부터는 그 동안 학습했던 HTML과 CSS, JS를 활용하여 웹 애플리케이션으로 계산기를 구현하는 프로젝트를 진행했다.
계산기 구현은 전주와 마찬가지로 페어로 진행되었으며, 내일까지 일정이 이어져있다.

CSS기초 - Achivement Goals

1) CSS의 사용목적을 이해할 수 있다.

CSS는 스타일링을 위한 도구이다.

2) 프로트엔드 개발자의 기초소양에 대해 이해할 수 있다.

<기초소양>

  • 화면의 구성이나 배치
  • 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일

3) CSS의 기본 문법과 구조를 이해할 수 있다.

기본적인 문법에 대해서는 사전에 이해를 했었는데 코드스테이츠에서 제공하는 자료 중에 각 부분의 명칭과 관련해서 잘 정리된 내용이 있어 아래와 같이 이미지 첨부하였다.(추후 복습)

4) CSS를 HTML에 적용하는 방법에 대해서 이해할 수 있다.

CSS를 HTML에 적용하는 방법은 <link>태그를 활용하여 대상이 되는 CSS파일과 HTML 파일을 연결할 수 있다.
혹은 <style>태그 사용 혹은 inline 방식으로 CSS 문법을 HTML 파일에 적용할 수 있다.

4-1) 직접 HTML 안에 CSS를 정의하는 것을 권장하지 않는 이유를 이해할 수 있다.

하나에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서 권장하지 않습니다. 관심사 분리를 여기에 적용하면 HTML 파일에서는 웹 페이지의 구조만 신경쓰고, CSS 파일에서는 디자인만 신경쓸 수 있도록 구현하는 걸 의미

5) id 및 class와 관련된 selector 규칙을 이해할 수 있다.

id는 selector에서 #으로 시작
class는 selector에서 .으로 시작

6) CSS를 이용해 텍스트를 꾸밀 수 있다.

footer {
  font-size: large; /* 폰트 크기 */
  font-weight: bold; /* 폰트 두껍기 */
  font-family: "Courier New", Courier, monospace; /* 폰트 설정 */
  text-align: center; /* 텍스트 정렬 */
  text-decoration: underline; /* 텍스트에 대한 밑줄 등 장식선 지정 */
  color: #f9f9f9; /* 텍스트 색상 */
}

7) CSS에서 쓰이는 단위의 두가지 구분을 이해할 수 있다.

  • 절대단위 : px, pt 등
  • 상대단위 : %, em , rem, ch, vw, vh 등

7-1) 각 단위가 적합한 경우를 구분할 수 있다.

다양한 스크린 크기를 가진 기기들이 접근할 수 있는 반응형 웹에서 만들때는 상대단위로 하는 것이 바람직하다.
반대로 절대적인 크기가 지정된 경우에는 절대단위를 사용할 수 있다.

8) CSS 박스 모델을 이해할 수 있다.

HTML에서 각 요소(elements)는 박스모델로 박스는 다음 요소들이 구성한다. Margin, border, padding, content.

  1. 콘텐트(content, 내용) : 텍스트, 이미지 등이 들어가 있어 실질적인 박스의 내용
  2. 패딩(padding, 보충물(?)) : 내용(content)과 테두리 사이의 간격. 이 구간에도 CSS를 적용하여 시각적으로 표현할 수 있음.
  3. 보더(border, 테두리) : 패딩(padding) 주변을 감싸고 있는 테두리.
  4. 마진(margin, 경계) : 테두리(border)를 감싸고 있는 층. 테두리와 이웃하는 요소 사이의 간격.

위 박스모델의 구성과 관련해서는 아래 이미지로 이해하는 것이 가장 이해가 빠르긴 하다.

9) MDN 또는 w3school 등의 레퍼런스 사이트를 이용해 CSS속성을 검색하고 이용할 수 있다.

추가학습

왜 자바스크립트의 <script> 태그는 HTML 문서 <body>태그 하단에 위치하는가?

HTML문서가 읽히고 HTML을 파싱하여 DOM트리 형성이 이루어진다. 그런데 HTML 태그들을 읽어가는 과정 중에 JS가 발견되면 HTML문서를 파싱하던 와중에 JS문서를 읽어온다. 그리고 JS문서에 대한 파싱이 완료되면 다시 이어서 HTML문서를 파싱하는데 이러한 방식에서의 문제는 2가지가 있다.

  1. HTML을 읽는 과정에 스크립트를 만나면 중단 시점이 생겨 Display에 표시되는 것이 지연된다.
  2. DOM 트리가 생성되기 전에 자바스크립트가 생성되지도 않은 DOM의 조작을 시도할 수 있다.

<아래 참고>
TakeKnowledge님의 블로그

복합연산자 & ++i와 i++의 차이(주말간 학습한 내용)

for 반복문 사용을 하면서 증감문이 필요하다는 것은 학습하였는데 여기서 반복횟수를 특정 지을 수 있는 i와 같은 변수의 증감을 표시하는 방식에 다양한 경우가 있음을 배웠다.

// console.log를 3번 실행시키고자 하는 경우
for (let i = 0; i < 3; i = i + 1) {
  console.log('hello world')
}

위와 같이 적용하는 것이 원칙 상, 지속적으로 i의 값을 1씩 증가시켜 조건문이 false가 될 때까지 안의 내용이 실행되는 것을 의미한다. 하지만 대부분은 증감문을 저런 방식으로 표현하지 않는다.

여기서 i = i + 1은 i += 1과 동일한 기능을 한다. 이전에 파이썬을 배울 때는 거의 대부분을 후자로 증감문에서 표현했다. 위와 같이 변수 값에 추가적으로 값을 계산하여 할당하는 역할을 하는 +=이 친구의 이름이 무엇인지 검색을 했는데 한국어로는 '복합연산자'라는 단어로 일부 부르는 경우를 봤다.


복합연산자는 -=, *=와 같이 기존 연산자와 더불어서 =를 함께 사용하는 경우를 지칭하는 듯 해보인다.

mdn에서는 위와 같이 =가 포함되는 모든 연산자에 대해서 Assignment operators으로 분류하고 있다. 즉 모두 일종의 할당 역할을 수행하기 때문에 할당연산자로 부르는 것이다. 사실 나는 mdn에 적혀있는 것이 정론이라고 생각하므로 앞으로는 그냥 할당 연산자로 부를거다

그런데 자바스크립트를 배우면서 ++i 와 i++ 가 증감문에 쓰인다는 것을 배웠다. 이 경우 또한 for구문에서 i += 1 와 동일한 기능을 수행한다. 근데 갑자기 궁금해진 것이 위 ++를 각자 앞, 뒤로 따로 붙이는 것들은 무슨 차이가 있는지 이다.

이 부분과 관련하여서는 스택 오버플로우에서 그에 맞는 답을 찾을 수 있었다.

++i 적용 시

간단히 보면 이 경우에는 변수 i 에 대해서 바로 +1을 적용하고 변수를 변형시켜 활용한다.
( 기존 값 +1 → 적용 → 출력)

i++ 적용 시

이는 기존 값 (original value)을 먼저 사용하고 그것을 활용 이후에 +1을 적용하여 변형시킨다.
(출력 → 기존 값 + 1 → 적용)

위 내용에 대해서는 아래 케이스를 보면 좀 더 이해하기가 쉬워진다.

// i++ 적용 예
let a = 10;
let sum = (a++) + (a++);
console.log(sum) // => 21 = (10) + (11)

// ++i 적용 예
let a = 10;
let sum = (++a) + (++a);
console.log(sum) // => 23 = (11) + (12)



i++ 적용의 경우 처음 다음 단계에서 10의 값을 출력한 뒤 +1 이 적용되므로 그 다음 ++연산에서 이전 10 + 1이 적용된 11이 나오게 된다.
이와 반대되는 ++i의 적용 예는 보면 반대되는 기능이므로 최종적으로 23이라는 값이 변수 sum에 대한 값으로 나오는 것이다.
그 동안 이런 차이점을 모르고 for 반복문에서는 의도한 대로 멀쩡하게 잘 썻던 것 같은데 이상하다 생각이 들어서 바로 위 두 사례를 활용하여 반복문을 돌려보았다.

// 매개변수 num에 받은 정수형 만큼 0 ~ num 값을 출력하는 함수
function test(num) {
  for (let i = 0; i <= num; ++i) {
    console.log(i);
  }
}

test(3);



앞선 말대로라면 i 는 반복문이 시작되면서 +1이 적용되어서 처음 출력되는 수는 0이 아니라 1이 되는 것이 맞다. (예상되는 결과값 : 1 2 3)
그렇지만 예상과 다르게 실제로 돌려보면 0 ~ 3까지의 정수가 정상적으로 출력된다.

사실 for 반복문에서는 이러한 설정이 전혀 상관없다고 한다.
최초 실행은 초기화 값 설정한 값으로 실행되고 증감문은 무조건 최초 실행 이후에 적용되기에 상관이 없단다.

그래서 for 반복문을 쓸 때는 저 두 개의 경우를 굳이 구분하면서 쓰지 않아도 된다.
(물론 굳이 구분은 안 하더라도 통일은 할 필요성이 있겠지만...)