Mon, Septempber 21, 2020

1. HTML

▶HTML의 구조(틀)를 잘 짜 놓아야 이후 JS로 개발할 때에 더욱 직관적이게 짤 수 있다.

▶HTML 태그는 문서의 틀을 만들기 위한 태그

• ex) div, span, img, a, ul, li, text area, input, script

---

2. CSS 

• HTML 구조에 디자인을 부여하기 위한 도구
• CSS를 HTML에 적용하는 3가지 방법
  1. inline
  2. HTML 내부에 stylesheet 작성 (style tag 이용)
  3. HTML 외부에 stylesheet 작성 (link tag 이용)
• CSS Selector
  • CSS에서 요소(element)를 선택하는 규칙
  • 여기서 요소(엘리먼트)란, "의미를 갖는 하나의 구조"라는 의미를 지님
    1. Solution1: 각각의 엘리먼트에 고유 id 부여 : '#'을 이용해 고유 id 선택 (* 여기서 고유란, 단 하나의 값을 의미함) 
    2. Solution2: 종류(class)를 만들어 엘리먼트에 클래스 부여 : '.' (dot)을 이용, 엘리먼트가 여러 값을 가질 수 있음, 스타일 분류에 사용 (여러 번 사용 가능)
• 다양한 diplay 요소
  1. block : 한 줄 차지
  2. inline : 콘텐츠 공간만 차지
  3. inline-block : width와 height도 차지
• Positioning(포지셔닝)
  
  1. Static : 기본값
  2. Relative : 기본값 + 상대적인 위치
  3. Fixed : 브라우저 화면 좌상단을 기준으로 한 절대적 위치
  4. Absolute : 부모 중 기준점이 있는 경우, 그 기준으로 한 절대적인 위치
  5. Sticky : 평소에 relative처럼 작동하다, 스크롤 영역을 벗어나면 fixed처럼 작동

<더 알아보기> developer.mozilla.org/en-US/docs/Web/CSS/position

---

3. Front-End development Workflow1

1. HTML로 웹앱의 구조 잡기
   1. 큰 틀에서 영역 나누기
      • ex) 쓰는 영역(댓글창), 읽는 영역(댓글 리스트) 
   2. 각 영역을 태그로 표현하기 
      • ex) div, input text, button
2. id 및 class 목적에 맞게 사용하기