css 기초 - 2

---

텍스트 꾸미기

색상(color)

hex코드 또는 주요 색상의 이름을 사용 가능

글꼴(font-family)

글꼴 이름은 “ “(따옴표)를 붙여서 적용
글꼴이 없거나 지원하지 않는 경우를 대비하여 여러 글꼴 추가 가능(fallback 글꼴)
→ ,(쉼표)를 구분자로 사용. 입력 순서대로 fallback이 적용됨

ex)
.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}

보다 다양한 글꼴을 사용하고 싶은 경우?

1. “웹 폰트 기술” 이용
   개발자가 표현하고 싶은 글꼴을 사용자의 기기에 적용할 수 있도록 필요에 따라 웹에서 다운로드 받게 하는 기술
2. Google Fonts 서비스 이용
   HTML의 link태그를 사용하여 간단하게 embed 가능

크기(font-size)

글꼴의 크기에서는 단위 가 매우 중요하다

절대 단위와 상대 단위?

절대 단위: px, pt 등
상대 단위: %, em, rem, ch, vw, vh 등
→ 언제 어떤 단위를 써야 하는지 결정하는 게 매우 중요!
 

1. 절대적인 크기로 정함(기기, 브라우저 환경 영향 x)
→ px 사용
절대 단위이므로 사용자 접근성이 불리
고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일되어 뚜렷하지 않게 출력됨
인쇄와 같이 화면 사이즈가 정해진 경우에 유리

2. 일반적인 경우
→ rem 사용
root의 글자 크기에 비례하여 설정됨
2rem(기본 글자 크기 대비 2배), 0.8rem(기본 글자 크기 대비 0.8배)
접근성에 유리

3. 반응형 웹(responsive web)
디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트
데스크탑, 스마트폰 가로/세로 모드, 태블
→ 디바이스의 크기를 나누는 기준을 삼을 때 px를 이용

4. 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우
vx(viewport width), vh(viewport height)를 사용
→ 해상도 상관없이 화면을 가득 채우면 딱 떨어지게 스크롤되는 사이트들
(e.g 테슬라 홈페이지)

기타 스타일링

굵기: font-weight

    font-weight: normal;    // 일반적 사용의 경우
    font-weight: bold;

    font-weight: 400;    //가중치를 이용한 경우    normal이 400
    font-weight: 700;    //bold가 700
    font-weight: 900;    

밑줄, 가로줄: text-decoration

 
글씨의 장식(선) 색을 지정 가능
다양한 옵션이 있음

ex)
text-decoration: underline;
text-decoration: underline dotted;    // 점선 밑줄
text-decoration: underline dotted red;    //점선 밑줄 인데 빨간색
text-decoration: underline overline #FF3028;    // 윗줄이고 색상은 해당hex코드

자간: letter-spacing

 
글자 사이의 간격을 조절
상대 단위로도 적용 가능
음수도 가능

ex)
letter-spacing: normal;
letter-spacing: .2rem;
letter-spacing: -1px;

행간: line-height

 
문단 사이의 간격 조절
상대 단위 적용 가능

ex)
line-height: normal;
line-height: 150%;
line-height: 3em;
line-height: 2.5;
line-height: 32px;

정렬

가로방향 정렬의 경우 text-align 사용
→ 속성값으로 left, right, center, justify(양쪽정렬)

세로방향 정렬의 경우 복잡
→ vertical-align 속성의 경우 반드시 부모 요소의 display 속성이 table-cell 이여야 함
→ 세로 정렬의 경우 정렬하고자 하는 글자를 둘러 싸고 있는
박스의 높이가 글자 높이보다 큰 경우에만 가능

<center> <font>를 사용하지 말아야 하는 이유

예전) html 내 에서 <center> <font> 사용
    <center>가운데 정렬</center>
    <font color=”#00ffff”>흰색</font>

→ 관심사 분리의 측면에서 좋지 않다
→ 지금은 구조는 html, 스타일링은 css로 나눠서 작성하자

---

박스 모델

모든 콘텐츠는 각자의 영역을 가지며 일반적으로 하나의 콘텐츠로 묶이는 엘리먼트(요소)들이 하나의 박스
박스는 항상 직사각형이고 너비(width)와 높이(height)

줄바꿈이 되는 박스(block) vs 옆으로 붙는 박스(inline, inline-block)

block 박스: <div>, <p> 등
inline 박스: <span> 등

            block 박스    inline-block박스    inline 박스
줄바꿈 여부    줄바꿈o        줄바꿈x            줄바꿈x
기본width        100%        글자 차지만큼        글자 차지만큼
width,height     가능            가능                불가

박스 구성 요소

border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)

border(테두리)

테두리는 개발 과정에서도 유용하게 사용됨
각 영역이 차지하는 크기를 파악하기 위해 그 크기를 시각적으로 확인할 수 있게 체크
다양한 속성값이 존재

ex) p태그에 1px의 빨간 실선을 추가
p {
  border: 1px solid red;
}

margin(바깥 여백)

margin에서의 규칙은 padding에도 동일하게 적용
바깥 여백에는 음수값을 지정할 수 있습니다. 여백에 음수 값을 지정하면 다른 엘리먼트와의 간격이 줄어듭니다.

ex) top/right/bottom/left 순
p {
  margin: 10px 20px 30px 40px;
}

padding(안쪽 여백)

배경 색이나 border를 적용하면 안쪽 여백을 더욱 선명하게 확인 가능

ex)
p {
  padding: 10px 20px 30px 40px;
  border: 1px solid red;
  background-color: lightyellow;
}

박스를 벗어나는 컨텐츠 처리

박스의 크기가 콘텐츠의 크기보다 작게 설정된 경우
 
→ overflow 속성을 지정해서 원하는 처리방법 선택
hidden값을 사용하면 넘치는 내용은 안보이게 처리
overflow-x, overflow-y 속성으로 가로/세로 스크롤 지정 가능

ex) overflow: auto    설정으로 스크롤을 추가
p {
  height: 40px;
  overflow: auto;
}

박스 크기 측정 기준

박스에 적용할 여백 등을 잘 고려해야 한다.
 
이럴 때는 여백과 테두리 두께를 포함한 박스 계산법을 활용
→ * 기호를 활용(모든 요소를 선택하는 셀렉터)
→ box-sizing 속성과 border-box 속성값 추가
 
모든 박스에서 여백과 테두리를 포함한 크기로 계산

#container {    // 너비가 300+10+10+2+2=324
  width: 300px;
  padding: 10px;
  background-color: yellow;
  border: 2px solid red;
}

#inner {    //너비가 300(100%)+2+2+30+30=364
  width: 100%;
  height: 200px;
  border: 2px solid green;
  background-color: lightgreen;
  padding: 30px;
}
/* 여기부터 */
* {
  box-sizing: border-box;
}
/* 여기까지가 추가한 내용입니다! */

박스 크기 측정 기준 2가지

content-box 계산법과 border-box 계산법이 있는데 대부분의 레이아웃 디자인에서
여백과 테두리를 포함하는 박스 계산법인 border-box 계산법을 권장함

---

querySelector 사용하기

 
document.querySelector(‘바꿀 속성 이름’).textContent=”바꿀 내용”;

/*
전:
<div id="hello">hello</div>
<div id="world">world</div>
<div id="codestates">codestates</div>

후:
<div id="hello">안녕하세요</div>
<div id="world">여러분</div>
<div id="codestates">코드스테이츠</div>
*/
// TODO: document.querySelector와 textContent를 활용하여 index.html에 있는 값들을 전에서 후로 바꿔보세요
// 직접 index.html을 수정하지 않아야 합니다.

document.querySelector('#hello').textContent="안녕하세요";
document.querySelector('#world').textContent="여러분";
document.querySelector('#codestates').textContent="코드스테이츠";

---

계산기 만들기

계산기 만들기의 핵심

if구문에 대한 이해(if ~ else 구문/ if ~ else if/ if ~ if 구문의 차이를 생각!)
querySelector 와 textContent 를 잘 이용하기
html 내용 자체는 document 이기 때문에 모두 문자열이 들어간다고 보면 된다.
→ html의 body에 들어가는 내용들은 모두 문자열(string)

과정 중 생각해야 할 부분

 if (target.matches('button')) {
    if (action === 'number') {
      //here
      // console.log('숫자 ' + buttonContent + ' 버튼');
      //계산기가 작동하는 방식
      //1. 기본값인 0 이 계산기의 화면에 나타나는 경우 (if) -> 0 이 누른 버튼값으로 변경(대체)됨

      if(previousKey!=='operator'){//이전에 클릭한 버튼이 연산자가 아닌 경우
        if(display.textContent==='0'){
          display.textContent=buttonContent;
          firstNum=display.textContent;
          console.log(firstNum);
      }
      //2. 0이 아닌 다른 값이 계산기의 화면에 나타나는 경우(else if) -> 누른 버튼값이 화면에 나타난 숫자(값) 뒤에
      // 이어 붙는다(concat)
      else if(display.textContent!=='0'){
        display.textContent+=buttonContent;
        firstNum=display.textContent;
        console.log(firstNum);
        }
      }
      if(previousKey==='operator' || previousKey==='calculate'||previousKey==='clear'){   //연산자거나 다른 버튼들인 경우

      //2. 0이 아닌 다른 값이 계산기의 화면에 나타나는 경우(else if) -> 누른 버튼값이 화면에 나타난 숫자(값) 뒤에
      // 이어 붙는다(concat)
        display.textContent=buttonContent;
        // previousKey를 이용하여 이전에 클릭한 버튼이 숫자인지 연산자인지 구분하여 코드 작성
       //  console.log('숫자 ' + buttonContent + ' 버튼');
        console.log(display.textContent);
      }
      previousKey='number'; // 이전키가 number임을 저장
    }

if~ if 구문으로 묶어서 생각했는데, if ~ else 구문으로 mece하게 작성하면 좋았을 것 같다.
첫번째 if 구문에 연산자나 다른 버튼인 조건을 넣고 그외 나머지를 else 구문에 넣는 방식으로 수정 가능할 듯 하다.

스크립트 태그를 바디 태그 맨 마지막에 적어주는 이유?(매우 중요)

1. 객체값 안에 null 값 등 예상치 않은 값이 들어가는 문제를 방지
    함수의 값 등을 지정하지 않았는데 먼저 함수가 실행되어서 발생하는 문제점 등을 방지 가능(마지막에 돌아가니깐)

2. 사용자 렌더링 부분이 길어짐을 방지
    만약 무거운 자바 스크립트 코드가 있다고 한다면 이 부분을 처리하느라 그 아래에 있는 html 코드 등을 처리하지 못하게 되어
    사용자는 완성되지 않은 화면(흰 화면 등)을 오랫동안 보고 있어야 한다(브라우저 렌더링이 완료되는 동안)
    마지막에 적어주면 html과 css가 모두 동작한 후에 스크립트가 돌아가므로 이를 방지할 수 있다.

유용한 프로그램 및 사이트

css generator
flexbox froggy
oxygen mono
google fonts