SEB(8-9일차 CSS, 계산기)

8일차 (CSS 기초)

7일차가 되는 어제는 드디어 css에 대해서 배우기 시작했고, 배운 것을 토대로 querySelector를 이용한 실습, 또 이것을 활용해 계산기를 만드는 실습을 했다. 이제 배운 것들을 토대로 다시 정리 및 회고를 해보겠다.

CSS

CSS는 Cascading Style Sheets의 약자로 HTML과 같은 마크업언어가 표현되는 방법을 결정한다

기본 문법과 구조

ex)
	body // selector {
    		// 선언블록(Declaratio Block)
        	color : red;  // 선언
            	font-size : 30px;  // 선언, font-size(property), 30px(value)
    	}

• Selector는 태그이름이나 id 또는 클래스를 선택한다.
• 텍스트 정렬(text-align), 글자색(color), 배경색(background) 등을 설정할 수 있다.
  여기서 background와 background-color 모두 색이 지정가능하지만, background는 배경의 다른요소도 지정가능하지만 background-color는 색만 지정 가능하다.
• 기준이 되는 요소도 있는데 em과 rem도 있다.
  em : 바로 상위 요소를 기준으로 상위요소 크기의 몇 배인지로 크기를 정한다.
  rem : 최상위 요소를 기준으로 크기를 정한다.

id와 class의 차이점

• id
  1. #으로 선택을 한다.
  2. 한 문서에 단 하나의 요소에만 적용된다.
  3. 특정요소에 이름을 붙이는데 사용한다.
• class
  1. .으로 선택한다.
  2. 동일한 값을 갖는 요소가 많다.
  3. 스타일의 분류(classification)에 사용된다.

Box Model

박스 모델의 설명은 여기를 참조한다. 설명이 잘돼있다.

• Block box : 줄바꿈이 되는 박스

• Inline box : 줄바꿈이 일어나지 않고, 크기지정을 할 수 없는 박스
  Block box와는 다르게 Inline box는 width, height 속성이 적용되지 않는다.(<span>)
  -Inline-Block box : 줄바꿈이 일어나지 않는 동시에 Block-box의 특징을 갖는다.

  Block box : 줄바꿈 o, 기본적으로 갖는 너비(width) 100%, width height 사용 가능
  Inline-Block box : 줄바꿈 x, 글자가 차지하는 만큼, width height 사용 가능
  Inline box : 줄바꿈 x, 글자가 차지하는 만큼, width height 사용 불가능
  

border

border는 말 그대로 테두리를 설정하는 속성이다.

ex)
	p {
    		border : 1px solid red;
            	// 1 px : 테두리 두께(border-width)
                // solid : 테두리 스타일(border-style)
                // red : 테두리 색상(border-color)
    	}

• 테두리를 둥글게 하려면 border-radius속성을 이용한다.
• 박스 바깥에 그림자를 적용하기 위해서는 box-shadow 및 border-style : inset or outset을 한다.
• 박스를 벗어나는 컨텐츠의 처리는 overflow : auto로 정해주는데 따로 정해주고 싶다면, overflow-x속성과 overflow-y속성을 이용해 두 방향을 지정가능하다.
• 레이아웃 디자인을 좀 더 쉽게하는 방법이 있는데 여백과 테두리 뚜게를 포함한 박스계산법이 있다.
• *은 모든 요소를 선택하는 Selector이다.

ex) 박스 계산법을 적용
	*{
    		box-sizing : border-box;
    	}

계산기 만들기를 하면서 느낀 것 (8-9일차)

querySelector

우선 계산기를 만들기 전에 querySelector라는 것을 배우고, 실습을 했다. Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환한다. 일치하는 요소가 없으면 null을 반환한다. (참고문서) 선택자에 클래스가 올 수도 있고 id가 올 수도 있다. 이를 이용해서 페이지에 원하는 값을 보여줄 수가 있었다.

document.querySelector('#hello').textContent = '안녕하세요';

위와 같이 한다면 <div id = 'hello' >의 textContent, 즉 보여지는 것이 '안녕하세요'가 되는 것이다. 깊이는 배우지 않았지만 이렇게 사용한다는 것을 알고 계산기 만드는 실습을 하게 됐다.

계산기 만들기(기본구현)

html과 css는 기본적으로 주어졌으며, javascript 또한 어느정도 틀이 정해져있었다. 기본구현에서는 화면에 피연산자 2개, 연산자 1개, 결과 1개의 값이 나오도록 하는 화면이었다. 이는 순서대로 들어오며, 값을 가져오는 것은 버튼이 눌렸을 때 위에서 배웠던 querySelector를 이용해 가져왔다. 여기에서는 소숫점 구현이 필요가 없었다. 이렇게 가져온 값을 토대로 calculate()함수를 만들면 됐으며, 조건문을 이용해 쉽게 구현할 수 있었다.

우리가 아는 사칙연산 계산기 만들기

그 다음은 우리가 알고 있는 사칙연산 계산기를 만들기 시작했다. 화면에는 연산자 표시는 되지 않으며, 화면에는 첫 번째 피연산자가 나오고 연산자를 누르면 그대로이고, 두 번째 피연자가 나온다음 엔터를 눌렀을 때 결과가 나오는 계산기를 구현했다. 처음에는 키를 가지고 조건문을 나눠줘서 버튼이 눌렸을 때 해당하는 일을 처리하게 해줬다. 처음 구현이라 생각나는대로 조건문을 걸어 구현을 시작했다. 어느정도 됐다 싶었을 때 테스트를 돌려보니 역시나 오류투성이었다. 그래서 다시 처음부터 생각한 것이 나는 여기에서 배운 것이 조건문을 걸 때 최대한 많이 교집합이 되는 것을 먼저 조건문으로 걸고 단계적으로 조건을 걸었다. 이렇게 하니 어느정도 테스트도 많이 통과했으며, 생각지 못한 조건도 이와 같이 해결할 수 있었다. 그리고 페어와도 코드를 같이 리뷰하며 봤는데, 확실히 조금만 복잡해져도 코드의 작성이나 생각하는 부분이 많이 달랐다. 앞으로 코딩을 하게되고 일을 하게 되면 더 많은 사람들과 작업을 하게 될텐데, 여기에서 느낀 것은 확실히 수도코드의 작성과 어느 부분에서 조건이 걸리는지 세심히 살펴보는 것이 중요하다고 느꼈다. 앞으로도 더 많은 과제와 어려운 과제를 해야할텐데 이런 점들을 고려해서 앞으로의 과제를 해결해 나가야겠다.
아래는 내가 js파일을 작성하고 css파일을 수정한 계산기다. ^^

Reference

• 코드스테이츠(CodeStates) 강의자료