TIL 40 (2020.09.14) JS

Yay!! 드디어 위코드 첫날이다.

다행히도 코로나로 인한 사회적 거리두기 2.5단계가 오늘자로 해제되어서,
선릉에 다같이 모여 처음을 시작할 수 있었다.

(추석 때 제발.. 제발.. 다시 격상되지 마라...🙏🏼🙏🏼🙏🏼)

멘토들과 동기들이 모두 한 방에 모여 자기소개를 하고,
앞으로 어떤 방식으로 어떤 부분의 공부를 진행해나갈지에 대해 오리엔테이션을 진행했다.

동기들 모두 좋은 사람들인 것 같아 빨리 알아가고 친해지고 싶다.

ㅋㅋ 그리고 첫날 마지막으로 남아서 공부하고 있는 3인끼리(나, 백경민님, 허덕형님) 인증샷도 찍었다.

오늘 3시 15분부터 HTML 세션이 시작되었다.
HTML, CSS에 대한 기초를 복습하고 단단하게 다지는 시간으로서 repl.it 이라는 사이트를 통해 진행했다.

24개정도 되는 문제 페이지가 주어졌다.

오늘 모두 끝내고 딱 10시에 퇴근을 하고 싶었는데,
9시에 마지막에서 3번째 문제를 풀려고 하니 시간 투자가 많이 필요한 문제가 나왔다. (2시간 소요 예정인 태스크...)

그래서 깔끔하게 이 다음 문제는 내일 아침에 하기로 하고
오늘은 공부한 내용을 간단하게 정리하고 퇴근을 하려고 한다.

---

[태그 사용]

1. 링크 걸 때 = a

2. 텍스트 입력할 때 = p(기본 줄바꿈), span(줄바꿈 미포함)

3. div 사용 이유 = 비슷한부분 그룹핑, class 혹은 id에 attribute 부여해서 디자인에 맞게 레이아웃 분리

4. id는 중복 불가

5. class는 중복 가능

6. 하나의 태그에 여러 속성 순서없이 추가 가능

7. html에 css 링크 걸 때 3개 요소 필요 - link태그, href주소, type(항상 “text/css”), rel(항상 “stylesheet”)

8. css에서 selector 내에 property: property value 들어감. 둘을 합친 것을 선언(declaration)이라고 함

9. selector - 태그이름(그냥 작성) / .클래스이름 / #아이디이름

10. font-family property에 쉼표를 이용해 계속 폰트이름을 써주면, 앞 순서대로 사용을 시도한다. (첫 폰트가 브라우저에서 지원되지 않으면, 뒷 폰트를 사용하는 식)

    serif 폰트는 모든 브라우저에서 지원하기 때문에, 폰트 중 맨 마지막에 보험처럼 적어놓는다.

11. 혹시 font-family의 property value에 띄어쓰기가 있을 경우, 쌍따옴표로 감싸준다.

12. 만약 폰트가 지정되지 않았을 경우, 브라우저에서 자동으로 지정해준다.

13. 브라우저에서 첫번째로 태그에 맞게 기본 스타일을 적용하지만, css 값이 부여되었을 경우 css 스타일로 출력된다.

14. 폰트 색상(property color)은 대표적으로 3가지로 표현 가능하다.

• hex 색상코드: 여섯자리로 표현 - #eb4639
• rgb 값: 빨강, 초록, 파랑으로 표현 - rgb(235, 70, 57)
• hsl: 색상, 채도, 명도(hue, saturation, lightness)로 표현 - hsl(4, 82%, 57%)

---

1. blockquote 태그는 인용구문을 넣을 때 쓰는 태그이다. (브라우저에서 양쪽 여백이 자동으로 들어간다.)

2. margin, border, padding: 50px 50px 50px 50px에서 각 50px은 순서대로 top, right, bottom, left 이다.

3. border은 테두리용으로 쓰인다.

4. border 스타일은 순서대로 작성해줘야 한다.

   border: 두께 선스타일 선색깔;

• dotted
• dashed 

• solid 

• double 

• groove 

• ridge

• inset
• outset

1. text-decoration: underline; 은 커스터마이징이 어렵기 때문에, 대부분의 개발자가 border-bottom을 통해 밑줄을 디자인한다.

2. padding, margin 등이 겹치면 글 박스 사이즈가 너무 다양해진다. 그 글박스 사이즈를 아래의 문구로 고정시킬 수 있다.
   box-sizing: border-box

3. box-sizing 프로퍼티는 대부분의 경우에서 사용하기 때문에, 일일히 적용하지 않고
   selector로 모든 태그에 적용시킨다.

4. 상속 개념: 부모 태그가 가지고 있는 요소가, 자식 태그에도 적용된다. 그러나 자식태그가 해당 속성을 가지고 있다면, 자식태그는 그 스타일대로 적용된다.

5. 여러 개의 태그, 클래스에 같은 스타일을 적용하고 싶을 때는 selector 자리에 쉼표를 이용해 계속 써주면 된다.

6. 태그와 id, class 결합하여 적용
   p.p-tag (p 태그 내의 p-tag 클래스)
p#third-line (p 태그 내의 third-line 아이디)
.pre span (pre 클래스 내의 span 태그)

7. div .container li.first-list 이런식으로 아주 자세히 지정할 수 있음

8. selector 표현마다 우선순위가 있으며, 각 점수를 취합하여 계산함

- inline styling(13줄에 style 요소로 직접): 1000점

- id: 100점

- class: 10점

- tag: 1점

- 즉, tag <<<<< class <<<< id <<<<<< inline css

2. 대부분 class를 selector로 지정해서 중복을 피하는 방법을 쓴다.

3. img 태그 내의 alt 속성은 이미지가 뜨지 않았을 때, 이미지 대신 보여줄 텍스트를 입력하는 부분이다.

4. img는 가로 혹은 세로 중 하나의 값만 입력해도, 브라우저에서 같은 비율로 가로 혹은 세로 크기를 맞춰준다.

5. block 요소에는 div, p, hearder, h1 등이 있다. 이들의 가로크기는 화면의 가로 크기만큼이다.

6. div 태그의 ‘자식태그’나 ‘div 태그 내부에 있는 내용(보통 텍스트)’의 세로크기가 곧 div태그의 세로크기가 된다.

7. background-image를 등록했을 때, height 혹은 width만 등록하면, 전체 그림의 일부분만 보인다. 그러므로 background-size를 통해 그림 자체의 사이즈를 조절해주자.

block 요소: <header>, <footer>, <p>, <li>, <table>, <div>, <h1> 등

inline 요소: <span>, <a>, <img>

2. block, inline의 성질은 css를 통해 얼마든지 변경할 수 있다.

   1. inline 성질로 변경하는 속성 display, float display: inline-block float: left (혹은 right)
   2. block 성질로 변경하는 속성 display display: block;

3. display: none; 을 적용시키면, 해당 요소는 화면에서 보이지 않는다. 동적인 웹을 구현하기 위해 사용한다. > js를 이용해서 때에 따라 요소의 class 값을 변경해주는 방식으로 display가 none이 되었다가 block 등이 될 수 있다.

4. width가 부여되면 늘어나지 않는다.
   (그래서 텍스트가 길면, width만큼만 나오고 줄바꿈이 이루어진다.)

5. margin 프로퍼티에 2개의 값이 주어지면, 전자는 top과 bottom에 적용되고, 후자는 right와 left에 적용된다.

6. class="has-width center" 라고 쓰면, 클래스 2개를 갖고 있다고 보면 된다. 따라서 해당 태그는 .has-width 와 .center 선택자 모두에 대한 스타일을 적용받는다.

7. li 태그는 꼭 ul이나 ol 태그로 감싸야 한다.

8. 브라우저는 태그에 기본값으로 margin, padding 등을 추가해놓는다.

9. ul {
   list-style: none;
   border-left: 3px solid black;
   padding: 0 0 0 15px;
   padding-bottom: 10px;
   }
   위와 같이 스타일을 지정하면, 예쁜 리스트를 구현할 수 있다.

10. css selector 표기 참고
(selector 부분에는 내가 원하는 그 셀렉터를 입력하면 됌)

selector:first-child {}
selector:last-child {}
selector:nth-child(odd) {}
selector:nth-child(even) {}

---

[테이블]

1. ‘테이블’ 은 엑셀처럼 글의 가로 세로에 선을 나타내서 정보를 가독성있게 보여주는 장치이다. (선은 css를 통해 추가해줘야 출력됌!)

2. <table> 태그로 감싼다. 행은 <tr>로 감싼다.
   각 셀은 <td> 태그를 사용한다.
   (tr: table row / td: table data / th: table haeding)

3. table row는 세로 / table data는 가로 / table haeding은 center+bold

4. rowspan: 행 병합 / colspan: 열 병합
   <td colspan="2"> 처럼 사용한다.

[input 속성]

1. type=“text”
   대부분의 input type에는 text가 쓰인다.

2. type=“password”
   어떤 종류의 문자이든 입력하면 까만 원으로 보임. 화면에서는 보이지 않더라도, JS 쪽에서 무슨 값을 입력했는지 가져올 수 있음.

3. type=“number”
   숫자만 입력 가능하다. - _ 등 특수기호 입력 불가.

4. placeholder
   input 박스 내에 도움말을 출력해줌(실제 입력되는 텍스트 아님)

5. textarea
   input 보다 긴 텍스트를 입력받을 수 있음

6. 위의 텍스트들을 각각 div로 감싸면 block 성질의 부모(div)가 감싸고 있으므로, block화되어 출력됌.

<div class="input-wrap”> 이렇게 텍스트 각각에 같은 클래스를 부여하면, 일괄적으로 스타일 적용하기도 용이함

7. 속성을 selector로 사용하기 위해서는 다음과 같이 콜론 두 개를 붙여쓰거나 대괄호를 이용하면 된다.
   input::placeholder { color: #bbb; }
input[type="text"] { }
input[type="text"]::placeholder { color: red; }

8. button:hover { cursor: pointer; }

9. cursor: col-resize; 같은 기능도 있다.

10. button:hover { opacity: 0.8; }
    opacity는 요소를 불투명하게 만들어준다. 0.8은 80%와 같은 의미이다.

[Position]

1. Position 속성을 통해 레이아웃 위치를 변경할 수 있음

* position: static; (거의 안쓰임)


* position: relative; (top, right, bottom, left 속성과 함께 쓰일 때, 원래 위치에서 이동 가능 / *top, right, bottom, left는 position 속성이 있을 때만 적용됌.)


* position: absolute; (절대적인 위치에 둘 수 있음)
* position: absolute; 는 특정 부모에 대해 절대적으로 움직이게 됨. 따라서, 부모 중에 position이 relative, fixed, absolute 중 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 됨* absolute를 쓸 경우, 절대적으로 움직이고 싶은 부모에게 position: relative; 를 부여하면 됌.
* absolute 값을 가지면, inline 요소처럼 내용의 크기만큼만 너비가 생김
* position: fixed; (위치 고정. 부모의 position 요소 필요없음)


2. rgba(45,45,45,0.95): opacity 요소가 들어가 있다. 해당 색은 95%만큼 불투명하다.

3. div 태그를 짤 때, id는 사용빈도를 낮게 하자. id는 우선순위가 굉장히 높기 때문에 다른 선택자를 쉽게 무력화한다. 그러니 한 페이지에 단 하나만 존재하는 특별한 것들에만 사용하도록 하자.

4. html5에서는 div를 대신해서 쓸 수 있는 여러 태그가 있다.
   https://www.w3schools.com/html/html5_semantic_elements.asp

* <article>
* <aside>
* <details>
* <figcaption>
* <figure>
* <footer>
* <header>
* <main>
* <mark>
* <nav>
* <section>
* <summary>
* <time>

1. float 속성에는 left, right, none 중 하나를 값으로 줄 수 있다. 그러나, float 요소는 부모 태그가 높이를 인지할 수 없다는 단점이 있다.
   
   따라서 바깥 div(박스처럼 보이는 부분)에 overflow: hidden;을 주거나, 바깥 div를 float 시키는 방법으로 단점을 상쇄한다.
   (float은 block 성질을 없애기도 하기 때문에, 그런 경우 width
   :100%을 추가한다. )