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. 다양한 방법의 리펙토링

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

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

1. HTML

• HTML : 홈페이지의 구성요소들을 흩뿌려 놓은 것. 그래서 프로그램 언어라고 하기 힘들다.
  • 엘리먼트 : img(이미지), 하이퍼링크 등을 위한 a, 문단 나눔 per, h숫자 와 같은 것들을 이용해 전체적인 홈페이지의 틀을 짜게 되어 있다.

2. CSS

• HTML이 구조를 짜는 도구였다면, CSS는 디자인을 위한 도구이다.
• 레이아웃을 다듬어서 사용하기 쉽고, 알아보기 쉽게 만든다.
• 정확한 구역 설정(id, class 사용)으로 원하는 부분에 원하는 효과(색 변화 등)를 넣을 수 있다.
• 박스 모델을 이용해 원하는 구역을 지정하고 설정하게 된다.
• 콘솔창을 이용해 정확이 어디가 어디인지, 정확한 크기와 길이를 알 수 있으며, 색깔 또한 마찬가지!

3. 이중반복문

• 반복되는 부분의 조건을 '두 번' 설정해 준다는 느낌.
• break : 반복 중이거나 조건이 걸려있는 활동을 안쪽에서 중지시킨다.

처음 보는 상황의 문제에 직면했을 때 어떻게 문제를 풀어나갈지를 잘 모른다. 이중 반복문이 그렇다.
하지만 친숙해진 문제들은 상황이 달라지더라도 응용 가능하며 그 상황에 맞게 사용해야 할 코드들을
자연스럽게 사용하게 된다.
컴퓨터가 계산해 주는 루트를 그대로 내가 직접 따라서 계산해 보면 어떻게 작동하는지 원리를 조금이나마 이해하기 편해진다.
어렵다고 잠깐 뛰어넘었던 메서드나 개념들도 일단 같이 본다. 아직 코드를 구성하는 것이 매우 조잡하기 때문에
　일단 올바르게 된 것을 참고해서 고쳐 나가야 할 것이다.
모르는 개념을 이해할 때까지 혼자서는 너무 오래 걸리는 경우가 자주 있다. 이럴 때는 도움을 요청하는 것이 시간적인 면으로 좋다. 다시 여유가 생기면 고민해도 늦지 않다. 하지만 결국, 자신만의 방식의 이해는 필요할 것 같다.