[TIL] 코드스테이츠 SEB BE Day 2

2022 Apr 27 in TIL

💡 Today I Will Learn
웹 개발 이해하기
HTML 기초
CSS 기초

✏️ Summary
📌 정리
🎯 Tomorrow

✏️ Summary

HTML & CSS & JS ❓
HTML - structure(구조)
대강의 Frame을 구성 [기획자]
CSS - presentation(디자인)
페이지의 스타일 구현 [디자이너]
JS - behaviour(동작)
상호작용을 위한 기능구현 [개발자]
JS는 Node.js를 활용하여 서버 제작과 앱 / 프로그램을 만들 수 있는 범용적인 프로그래밍 언어로 발전하였다.
HTML
HyperText Markup Language의 약어로 웹페이지를 구성하고 내용과 뼈대를 정해진 규칙대로 기술하는 마크업 언어이다. 그리고 tag(<>)라는 기본 구성요소로 이루어진 집합이다.
```
- html
  * head
    + title
  * body
    + h1
    + div
      @ span
```
기본적으로 위와 같은 구성으로 페이지를 구성한다.
주로 사용하는 tag
- div(division) - 한줄을 차지한다
- span - 줄바꿈 없이 컨텐츠 크기만큼 차지한다.
- img - 이미지 삽입 <img src="url"> 셀프 클로징 태그 가능
- a - 링크 삽입 <a href="url">접속명</a>
- ul↔ol & li - unordered(ordered) list 하위에 list 정의
- input, textarea: 다양한 입력 폼
  <input type="다양한 타입" placeholoder="힌트"> <textarea></textarea>
- radio(택일: name속성으로 그룹화) vs checkbox
- button: 버튼 <button>
- 시맨틱태그: 이름에 의미를 붙여 부르는 태그 (header, main, nav, footer, aside 등… 동작은 div와 같다)
- self-closing tag: 태그 내부 내용이 없다면 <img src="url" /> 와 같이 표현이 가능하다.
CSS
✅ 역할
- 콘텐츠 배치와 위치 (레이아웃)
- 최소한의 타이포그래피 (텍스트 강조 밑줄 등)
  효율적으로 사용자 UI를 구성함으로써 더 나은 사용자 경험을 제공 (가독성, 다크모드 등)
  “콘텐츠를 적당한 위치에 배치하는 레이아웃 디자인 정도는 웹개발자의 기본 소양 “ 즉 백엔드 기능이 훌륭하더라도 UI가 없으면 말짱 도루묵
  UI 뿐 아니라 UX(User Experience)도 고려해 사용자 경험을 개선해야한다.
✅ CSS 추가방법
1. 외부 스타일 시트
```
 
 <head>
   <link rel="stylesheet" href="index.css">
 </head>
      
 
 <head>
   <style>
     .alias{
       color: red;
     }
   </style>
 </head>
```
2. 내부 스타일 시트
```
 <head>
   <style>
     .alias{
       color: red;
     }
   </style>
 </head>
```
3. 인라인 스타일
```
 <p class="alias" style="color: red;">...</p>
```
  관심사의 분리 측면에서 CSS 파일을 별도로 작성하는 외부 스타일 시트 방법을 권장한다.
✅ 사용
- 텍스트에서의 사용
```
.box{
  color: color;  
  background-color: color;  
  border-color: color;  
  font-family: a안, b안, c안 ;  
  font-size: px;  
  font-weight: px;  
  text-align: [left, right, center, justify(양쪽)] 
  ... 
}
```
  - 절대단위: px
  - 상대단위: %, 1rem(브라우저 기본 글자크기 기준), vw, vh
    ❗ vh, vw에 대한 고찰(Viewport)
    % 단위는 HTML이 차지하는 모든 영역(보이지 않는 영역까지 포함)
    vh, vw는 보이는 영역을 기준으로 한다
- 박스에서의 사용
```
박스를 이루고 있는 구성요소(바깥부터 안으로)
* margin: top right bottom left;  top/bottom left/right;
  * border: width(두께) style color  
    * padding
      * content (width, height)
```
  ⭐ display 속성
  block inline inline-block
  줄바꿈o 줄바꿈x 줄바꿈x
  크기변경o 크기변경x 크기변경o
  - overflow 속성: 컨텐츠가 경계보다 넘치면 스크롤 표시
  - box-sizing 속성 : content-box 크기가 기본값(content 자체의 크기만 포함)이지만 border-box로 계산한다면 박스에서 여백과 테두리두께를 포함한 크기로 계산한다.
- 셀렉터
  - id는 고유의 값, 문서 내 단하나의 요소에만 적용하는 유일한 이름 (#)
  - class는 여러 요소에 CSS를 적용하기 위해 사용 (.)
    여러 class를 하나의 요소에 적용이 가능하며 반대로 한 class에 여러 요소 적용 가능
    <li class="a-css b-css c-css">

block	inline	inline-block
줄바꿈o	줄바꿈x	줄바꿈x
크기변경o	크기변경x	크기변경o

📌 정리

HTML과 CSS의 전반적인 기초부분을 배우면서 대학교 웹프로그래밍 강의를 들었을 때가 문득 생각이 났다. 그때와 마찬가지로 이 부분은 내겐 와닿지 않는 것 같다😓 하지만 매니저님께서 말씀하셨듯, 프론트 개발자와 협업해야하는 백엔드 개발자의 위치에서 그들의 Needs에 맞는 데이터를 위해 기본적인 지식은 알아야 완벽한 소통이 될 것이 분명하다.

굿모닝 세션에서 들었던 인상적인 말을 요약해서 남기려 한다.

외우지말고 실습해라. 실패는 경험이다!

🎯 Tomorrow

Page Layout
웹앱 화면 설계

Back to [TIL] 코드스테이츠 SEB BE Day 1

[TIL] 코드스테이츠 SEB BE Day 2

✏️ Summary

HTML & CSS & JS ❓

HTML

CSS

📌 정리

🎯 Tomorrow

Minoolian's Dev

Error

✏️ Summary

HTML & CSS & JS ❓

HTML

CSS

📌 정리

🎯 Tomorrow

Templates (for web app):

Error