3일차 후기
* Udemy 강의가 괜찮다는 말을 듣고 사이트에 들어갔더니 내가 원하는 강의와 커리큘럼으로 Best강의가 있어서 바로 구매했다.
* 강의 품질이 정말 좋은데 옜날엔 그냥 외우고 지나갔던 것들을 왜 중요한지 하나하나 알려주고 깊게 파고든다. 그리고 암기보다는 이해를 시키려는 방식이 정말 좋다.(하지만 초급부분은 이미 지식이 있어서 지루할 수도 있을 것 같다.)
* 흥미를 유발하고 무엇보다 영어라서 집중하게 된다 ㅋㅋ
* 하지만 문서에서 왜 h1~h6를 나눴는지, 웹 페이지를 만들때 label의 접근성이 얼마나 중요한지, 시맨틱 태크가 왜 중요한지 등등 스크린 리더 사용자들을 예시로 들어서 알려주는데 기억에 정말 잘 남았다.
[섹션 2. Web 개발이란?] 3/17
[섹션 3. HTML 기초] 3/17
The
Purple CSS - adjectives : 형용사
Dino HTML - nouns : 명사
Danced JS - verbs : 동사
HTML이라는 콘텐츠를 CSS로 시각적으로 표현하고, JS로 동작을 만든다.
MDN 을 적극 활용하자
https://developer.mozilla.org/ko/
[섹션 4. HTML Semantics] - 3/18
HTML5:
1) HTML을 정의하는 가장 '발전된 표준'
2) HTML + 수많은 새로운 종류의 (2D,3D,CSS)등의 번들
HTML은 설계도로, 브라우저에 집을 구현한다.
<!DOCTYPE HTML> -> HTML5를 쓴다고 브라우저에 알려주는 구문
Semantic Markup:
HTML에서 의미가 부여된 태그들, 코드를 쉽게 인식할 수 있게 해준다.
스크린 리더 사용자들의 편의성에 많은 영향을 끼친다.
<header><footer><nav><main><article><section>
HTML Entities:
HTML문서에 그대로 넣을 수 없는 기호들을 입력할 수 있도록 예약된 문자들
&로 시작하고 ; 로 끝난다. ex) ♠
TIP:
Emmet 축약어:
> 자식요소
+ 형제요소
^ 상승이동
[] 속성
*5 반복
{} 텍스트 넣기
$ 넘버링
[섹션 5. HTML Forms and Table] - 3/18
Table :
옜날엔 테이블 태그는 화면의 레이아웃을 지정하는데 사용되기도 했다. 하지만 HTML이 발전한 지금 깔끔한 시각화를를 위해 사용된다. <th><tr><td><thead><tfoot><tbody>
Form(★★★) :
Input 요소들을 담는 컨테이너 이자 action="" 을 이용해서 원하는 곳으로 데이터를 보낸다. 이 건 서버가 될 수도 있고, 다른 웹페이지가 될 수도 있다.
Button 태그는 Form 태그 내부에 들어가는데 Form을 기준으로 제출할지 안할지 지정한다.
Form 관련태그 : <input type=""> : radio, checkbox, email, password <Button>등등
id, name, value
- id : input이나 개체들의 접근성을 위해 label과 엮이는 속성
- name : 서버에 데이터가 넘어갈 때, 데이터의 라벨
- value : 서버에 데이터가 넘어갈 때의 실질적인 값
접근성
- label을 이용해 input에 접근하기 좋게 만드는건 귀찮지만 꼭 해줘야하는 중요한 포인트이다.
[섹션 6. CSS 기초] - 3/19
CSS :
HTML 콘텐츠를 시각적으로 표현하기 위한 언어
CSS 문법:
h1 { //h1 is selector color : purple; //color is property, purple is value }*h1이라는 selector 태그의 글씨가 모두 purple로 변함
* ) 외부스타일 시트로 삽입하는게 가장 재사용성이 좋다.
<head> <link rel="stylesheet" href="my_styles.css"> </head>RGB 컬러시스템:
모니터에 표현되는 1600만개의 색을 표현하기 위해선 RGB 와 Hex코드등이 사용됨
1. Named colors : 예약된 색 이름들, 약 140여가지
2. RGB : rgb(255,255,0) 로 색깔 정함
3. Hex : 16진수로 색깔을 정함 ex) #ffff00 -> #ff0 가능
Font-Family :
폰트패밀리로 지정하면 개발자가 설정한 폰트가 지원되지 않을 때 폰트패밀리의 폰트가 대체함
'Develog > Front' 카테고리의 다른 글
| [우아한-Tech 스터디] Framer-motion을 이용한 애니메이션으로 화려한 웹 페이지 만들기 - 2주차 - (1) | 2024.06.20 |
|---|---|
| [리팩터링]Object.keys() 타입 지정해서 사용하기 (0) | 2023.07.23 |
| Drag AND Drop (react.js)구현하기 - 1 (0) | 2023.07.09 |
| React 중첩라우팅 (0) | 2022.07.10 |
| [Udemy Web 부트캠프] 섹션 19,20,21 루프의 구조, 함수란?, 함수 레벨업 (0) | 2022.03.29 |
