1. class와 id의 활용

• class와 id는 '특별한 함수'라고 생각된다.
• class와 id로 값을 지정해 놓으면, 그것이 '빈 통'이 되는 것과 같은 의미로 생각할 수 있다. 그다음, 변수를 할당하여 사용한다.
• 그러므로, 그 지정된 값을 호출하기 위해서는, 변수.textContany를 사용해야 한다.

2. html의 요소를 javascript에서 사용하기.

• class 와 id를 이용해서 html의 내용을 묶고, js파일을 따로 만들어서 분리시킨다. 그러면 html 파일에는 링크들과 class, if 선언 등만 남게 된다.

3. VScode의 다양한 Extension의 활용

• VScode에는 다양한 Extension이 있는데 사용자의 기호에 맞게 설치하면 훨씬 편한 코딩생활이 된다.
• 타입에 맞게 색을 다르게 하거나, 괄호가 묶고 있는 것들이 무엇인지 직관적으로 보게 하고, 아이콘을 변경시켜 시각적인 효과를 주게 된다.

4. 폰트의 변경

• 구글의 font 사이트를 이용하면 쉽게 모든 폰트를 변경 할 수 있다.
  • html 파일에 haed에 를 넣는다.
  • 사용하고 싶은 폰트를 font.google에서 찾은 후, 폰트의 주소를 넣는다. 바로 밑에 함께 넣는다.
    (ex :

<link href="https://fonts.googleapis.com/css2?family=Pattaya&display=swap" rel="stylesheet">

• CSS파일에서 *(모든 태그들을 뜻함)을 { }로 묶어 font-family : 폰트 이름을 넣는다.

계산기가 얼마나 과학기술의 집합체 인지 알게 되었다. 엄청난 프로그래밍이 들어 있는 것이 분명하다.
결국... 완성했다...!
조금 더 침착하게 코드를 살펴보는 습관을 들이자.
시간은 없지만 급할수록 돌아가라는 말이 빛을 바랄 것이다.
친구들이 즐거워 보인다고 한다. 직접 보지는 않았지만 충분히 잘 즐기고 있는 것 같다고 한다.
더 경험을 높이면 분명 더 잘할 수 있을 것이다.
코드를 만들 때, 규칙에 대해서 조금 더 공부해 볼 필요가 있는 것 같다.
예를 들어, 띄어쓰기 혹은 괄호들 사이의 규칙 같은 것들 말이다.
만든 코드들이 가독성이 많이 떨어지는 것 같기 때문이다.

1. CSS

• HTML의 디자인을 위해 만들어진 것.
• CCS를 사용하지 않은 HTML은 보기에도 별로일 뿐 아니라, 사용하기 불편하다. UX(User expirenece)를 위해서도 사용할 수 있다.
• UI(User, Interface)는 사람들이 보기 좋게 만들어져서 프로그래밍을 모르는 사람도 기능을 조작할 수 있게 만드는 디자인적 요소이다. UI가 좋으면, 자연스럽게 UX도 올라갈 것이고, 그게 좋은 프로그램의 기본이 될 것이다.
• CSS는 '태그'와 비슷한 형태로, 각각의 부분에 따라 설정이 가능하다. (시맨틱 태그라고 부르며, 콘텐츠의 구획을 알기 쉽게 나누기 위해 사용한다.)

2. CSS 분해하기

• body => 셀렉터(Selector) : 태그 이름, id, class를 선언해 준다(id 나 class를 이용하면 더 새 부적으로 선택할 수 있다!)
• { } => 선언 블록(Declaraation block) : 직접 꾸며줄 내용
• font-size : 30px, color : red, font-size : 30px; => 선언(Declaration)
• 선언의 앞 부분 => 속성명(Property) 뒷부분 => 속성 값(Value, 크기나 색)

• body {color : red; font-size : 30px; }
• 마지막 세미콜론(;) 찍는것이 참 아름답다. 속성끼리 구분을 할 수 있는 아주 편한 기능이다. (안 찍어도 되긴 한다.)

3. CSS 파일의 추가

• HTML 안에서 style태그를 이용해서 직접 꾸며 줄 수 도 있다(일명 내부 스타일 시트). 하지만, 하나에 집중하기 위한 '관심사 분리'를 하는 것이 좋다(외부 스타일 시트).

4. id 와 class

• 중복으로 많이 사용되는 요소(element)들 중에 딱! 하나만 (ex: 수 많은 h2를 사용해 놓고, 그중에 3번째 있는 h2 거 딱 하나 이런 느낌...) 스타일을 적용시키고 싶을 때 사용한다.
• id는 전체에서 딱 한번 사용가능(작동은 한다. 하지만 '약속'이다. id라면 사람 이름 같은 건데, 동명이인이 있으면 헷갈리듯이 하나만 주는 것이다. 여러 가지를 통제하려면 class 즉, 같은 반 학생들로 묶어주는 것이 맞다.)
• class는 동일한 스타일로 여러가지 앨리 먼트를 적용시킬 수 있다(심지어, class는 다른 태그에도 적용 가능하다.)
• id는 #으로 , class는 .(온점)으로 선택한다!

5. 텍스트 꾸미기

• 몇 가지 속성을 알아 두자.

• color : 색깔 => 텍스트 색 변경;
• font-weight : 굵기
• text-decoration : 텍스트에 줄 긋기
• letter-spacing : 자간(글자 간 거리)
• line-height : 행간(줄 사이 거리)
  • font-family : "글꼴", "다른 글꼴". "또 다른 글꼴"; => 글꼴 변경 (만약, 해당하는 글꼴이 없다면 그다음 글꼴로 자동으로 적용된다.)
  • 하지만 사용자의 글꼴의 존제 여부와 상관없이 항상 그 글꼴을 보여주고 싶다면 '웹 폰트'로 링크해 두면 된다!
  • font-size: 원하는 사이즈;
  • 단위의 중요성 : 알맞은 단위로 사이즈를 선택 해야 한다.
    • 상대 단위 : 사용자의 상대적인 상황에 따라 바뀌는 단위. => %, em, rem, ch, vw, vh 등
    • 절대 단위: 어떠한 상황에서든 바뀌지 않고 설정된 값을 보여주는 단위 => px, pt 등
• 어떤 상황에 어떤 단위를 쓸까?
  • 절대 단위 : 프린트할 때 와 같이 화면의 사이즈가 정해진 경우에 보이는 결과가 출력될 결과와 어떤 상황에서든 같기 때문에 사용할 수 있음.
  • 일반적인 경우 : rem를 사용. 기본적으로 브라우저는 1 rem으로, 사용자가 지정한 글꼴의 크기에 따라 변경되기 때문!
  • 반응형 웹(responsive web>의 경우 : 휴대폰을 가로였다가 세로로 돌리면? 아이패드를 이용해 웹을 본다면? 이럴 경우, px를 쓴다. 사용자가 보는 화면의 사이즈에 따라 텍스트의 크기도 바뀔 것이다.
  • 딱! 맞는 화면이 필요한 경우 : vw, vh를 쓴다. Viewprot, 즉, 보이는 부분까지(화면을 작게 하고 크게 하고에 따라)에 딱 맞춰 줌.
  • text-align : left or right or center or justify => 정렬.

6. 박스 모델

• • 모든 콘텐츠가 가지고 있는 독자적인 영역. 전부 박스형을 띄고 있어서 박스 모델이다.
  • block과 inline, 그리고 inline-block
  • '제목'처럼, 혼자서 한 줄(화면 끝까지)을 다 쓰면서(인위적으로 조절은 가능) 다음 문장을 줄 바꿈 시키는 요소를 'block' 박스, 그래서 width가 화면의 100% + 줄 바꿈 이 되는 태그들이 된다.(ex: h2, p, 등등)
  • 줄 안에서 다른 태그들과 함께 나란히 쓰일 수 있어서 사이즈는 글자 크기만큼이며, 줄을 바꾸지 않는 요소를 'inline' 박스, 그래서 width는 글자 크기만큼 + 줄 바꿈이 안 되는 태그들 이 된다.(ex: span 등)
  • 그 둘을 섞어서 다른 태그들과 함께 나란히 쓰면서 width도 글자 사이즈와 같고, 그래서 width와 height까지 조절 가능한 요소를 ' inline-block'박스라고 한다.
  • console 창에서 display를 찾으면 확인할 수 있다. + display : 원하는 박스 요소로 바꿔줄 수 도 있다!
  • 박스들의 구성 요소-
  • border (테두리) : 선이다. 마지막 경계.
  • margin (밖의 여백) : top, right, bottom, left 순으로 각각 면에 따라 여백을 지정.
    • 하나만 적으면 다 적용.
    • 음수도 가능! 그럼 다른 영역에 겹치게 된다.
  • padding (안쪽의 여백) : 콘텐츠와 border사이의 여백. 마찬가지로, top, right, bottom, left 순으로 padding과 같다.
• 콘텐츠가 박스 밖을 넘어간다면 p태그에 overflow: auto를 써주면 스크롤을 넣을 수 있다.
• 더 쉽게, *인 모든 요소를 선택하는 실렉터를 이용해 모든 요소가 여백과 테두리를 포함한 박스 사이즈를 적용시킬 수 있게 된다!(아래 코드를 매번 넣는 것이 좋겠지?)

* {
 box-sizing: border-box;
}

1. 오류

• 오류가 나면 당연히 콘솔부터 확인한다.
• 하지만 사실, 약 90%는 '오타' 때문인걸 알 수 있다. 코드를 처음 적을 때부터 오타를 주의하자.
• 코딩은 장비 말이다. 모니터만 두 개 달아도 삶의 질이 원시시대 수준에서 중세시대까지는 오는 것 같다.
• 그래도 안된다? 다시 코드를 읽으면서 '기도'한다. 어디가 문제인지 빨리 찾게 해 달라고.. 흑흑,

2. 접근의 다양성

• 같은 질문도 접근하는 방식에 따라 다양하게 대응이 가능하다.
• '함수'를 두 개 사용할 수 도 있다. 하나의 함수 안에서 꼭 답을 낼 필요는 없다.

아직도 빠르게 문제를 처리하지 못한다. 더 친숙해질 필요가 있다.
반복문에서 자주 보이는 패턴들이 있는 것 같다. 스트링을 하나하나 구한다던지,
숫자를 하나씩 더하는 등의 비슷한 식은 외워질 때까지 반복한다.

1. 이중 반복문의 작동

• 작동원리가 이해가 되지 않아서 표를 만들어서 파라미터가 변화하고 반복문 이후 어떻게 출력이 되는지를 알아보았다.
• 첫 번째 반복문을 충족하면, 두번째 반복문으로 들어가서 두번째 반복문을 반복하고,
  　이후 두번째 반복문이 조건에 맞지 않으면 두번째 반복문을 나와서, 다시 첫번째 반복문을 반복하게 된다. 이때, 첫번째 반복문도 충족되지 않으면 첫번째 반복문도 나오게 된다.
• 그렇기 때문에 증가, 혹은 감소하는 숫자들의 비교가 가능하다!

2. 다양한 방법의 리펙토링

• 코드는 무조건 알아듣기 쉽고, 간결하고, 효율적인 코드가 좋은 코드가 된다.
• 중복을 줄여 간다.
• 파라미터의 길이를 줄인다(다양한 메서드의 사용)

한번 봤던 코드도 다시 보고 다른 방법으로 해결할 수 있는지를 계속 고민한다.
함수 선언 시, 아주 직관적인 식별자를 설정한다. 누구나 식별자만 보아도 어떤 기능을 하는지 알 수 있어야 한다.