<오전 class = "이호준 강사님 Embedded content">
<iframe> 중요한 옵션! 크롬같은경우는 auto play가 막혀있어서 autoplay 옵션이랑 mute옵션을 같이 사용해야 자동재생이 된다
<audio>
<vidio>
Forms
- Server : 서빙_24시간 돌아가는 컴퓨터, 대부분 IP 연결
- Web Server : 정적 파일(잘 바뀌지 않는 메인 화면의 요소들)을 서빙_PHP와 같은 프로그래밍 언어도 처리하긴 합니다
- App Server : 두뇌 역활
- DB : 데이터 저장_이미지와 같은 경우에는 이미지 경로만 저장합니다 (빨리 불러오기 위해)
이미지는 보통 스토리지에 저장되어 있다 - API Server : 카페에 카운터 직원이다. 직접 커피를 내릴 필요는 없다
API는 손님(프로그램)이 주문할 수 있게 메뉴(명령 목록)를 정리하고, 주문(명령)을 받으면 요리사(응용프로그램)와 상호작용하여 요청된 메뉴(명령에 대한 값)를 전달합니다.
쉽게 말해, API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체로 볼 수 있습니다.
https://brunch.co.kr/@operator/65
API란 무엇일까? API 쉽게 이해하기
API | API, 쉽게 이해하기 API란? “API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을
brunch.co.kr
로컬
단점 : 트래픽 확장이 어려움, 서버 확장이 어렵고, 들어오는 트래픽 제한(대역폭 bandwidth의 문제), 정전(클라우드 서버 같은 경우 UPS)
장점 : 비용(전기세 + 인터넷)
클라우드
단점 : 비용
장점 : 서버 확장,이전이 쉽다. IP를 할당 받거나, 도메인 연결하기 쉽고, HTTPS 인증도 쉽다
<body><form action="012.html" method=""><input type="text" name="id"><input type="password" name="pw"><button type="submit">로그인</button></form></body>
코드를 실행 했을때 주소창을 보면 ?가 뜬 것을 볼 수 있다
id와 pw를 입력하면?
물음표 뒤로 키값이 입력 된 것을 볼 수 있다
method에 POST 방식을 입력해 주면 주소창에 아무 값이 뜨지 않는다
- GET : URL로 데이터를 전달할 때 사용한다
file 같은 큰 파일은 GET으로 전송하지 않는다
id와 pw 같은 민감정보는 전송하지 않는다 - POST : 패킷 안에 데이터를 넣어 전달할 때 사용합니다
민감하거나 큰데이터를 전송할 때
- 클라이언트 ↔ 서버
- 프로토콜 ex)국가별 언어
http://www.paullab.co.kr
https://www.paullab.co.kr - ait shift 아래키 : 현재 코드 복사
- 영상 배속 하는 코드(콘솔창ㄱㄱ)
document.getElementsByTagName("video")[0].playbackRate = 2.5;
Tabular data
https://github.com/paullabkorea/FrontendSchool_1/tree/main/html
GitHub - paullabkorea/FrontendSchool_1
Contribute to paullabkorea/FrontendSchool_1 development by creating an account on GitHub.
github.com
<<!--로그인, 약관동의,
17,18 파일 참고 수정예정-->>
Summernote - Super Simple WYSIWYG editor
Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.
summernote.org
https://ui.toast.com/tui-editor
TOAST UI :: Make Your Web Delicious!
TOAST UI is an open-source JavaScript UI library maintained by NHN Cloud.
ui.toast.com
<<!--021파일 참고 수정예정-->>
- from에 제출되는 data를 JavaScript로 수정하는 일은 가능하면 하지 않는 것이 좋습니다.
input으로 해결할 수 있어요 - from에 없는 데이터를 추가하고 싶다면 hidden으로 input 하나 더 만들어 value를 JavaScript로 추가하는 방식을 사용하세요
<023파일 참고 수정예정
col(umn) 컬럼을 꾸며주기 위해 colgroup 컬그룹을 쓴다-->>
네이버 메일을 보면 테이블로 구성되있다 왜그럴까?
멘토님이 실무에서 뉴스레터를 제작했는데
아웃룩 툴 도구 때문인건지 여러 메일 관련 툴에서 깨지는 현상이 발생해서
계속 옛날 방식인 테이블 레이아웃형태로 진행되는것 같다한다
[웹접근성] table에서 scope 속성 사용하기
웹접근성을 위해 사용하는 코딩기술 중 하나가 바로 table에서 scope 속성을 이용하는 방법입니다. scope 속성은 테이블의 th 또는 td 등의 해당 셀에게 사용하며 컬럼(column)인지 행(row)인지의 여부를
webisfree.com
CSS
- 셀렉터: 어떤것을?
- 프로퍼티: 어떻게 하고싶어?
- 벨류: 얼만큼?
폰트 트래픽 문제
- 잘 사용되지 않는 폰트는 이미지화
- 많이 사용되지 않는 폰트는 경량화
- 많이 사용되는 폰트는 CDN을 사용하기 보다는 내부 API 서버나, 로컬 서버에서 서빙
<!--수정예정CDN: Content delivery network
호박을 만들기 위한 기초 keyframes-->
포트폴리오를 만들 떄 노션이 깨질 수도 있어서 안좋아하기도 한다
pdf로 할 것을 추천하고 이력서를 웹으로 만드는 건 가산점이 될만하다
<저녁 class = "이종찬 강사님 CSS특강">
- 전체적인 덩어리를 보고 클틀을 잡아야한다
- 고로, 메인 컨텐츠가 될 여우 이미지와 텍스트를 한번에 wrapper로 잡아준다
- 클래스명은 수정될 때는 고려해 구체적으로 fox까진 아니더라도 animal정도로 한다
(너무 일반화하지도 않으면서 유니크하게) - 색 입히기
- vertical-align : 으로 이미지와의 공백을 없애준다
- 그라운드 배경으로 잔디를 넣어준다
- 전체배경을 넣는다
- 모서리 둥글게 한다
- 그림자처리 한다
- 끝!
- 유지보수_repeat-x; , display : block;
https://camp.veamcamp.com/example/flash/
기억제거기
camp.veamcamp.com
마진 겹침,병합 현상
블럭레벨 엘리먼트끼리 인접해있는 상하단 마진은 의도적으로 겹치게 된다(겹침은 큰쪽으로 일어난다)
도서 추천
- SMACSS
- 설계실전CSS
아 넘 웃기당 재밌었다
할 것
오늘 중간중간 혼이 나갔던 것 같다
놓친부분 다시 메꾸기ㅠ,ㅠ
지난번 과제 코드를 수정?다시 짜보고싶다 (된다면 여러개 배치도)
종찬강사님의 유튜브 조회수 올려드리기..가 아니라 영상보고 공부하기^^
내일 우리조 간단 회고 타임이 있다
발표할 것 미리 정리해놔야지..근데 시간이 다 어디로 갔지??
'멋쟁이사자처럼 프론트엔드 스쿨 > FE TIL' 카테고리의 다른 글
| [멋사 프론트엔드 스쿨]9월 15일 목요일 TIL_CSS Selector 심화, CSS Combinator, Flex (0) | 2022.09.16 |
|---|---|
| [멋사 프론트엔드 스쿨]9월 14일 수요일 TIL_Text, position, Float (0) | 2022.09.14 |
| [멋사 프론트엔드 스쿨]9월 8일 목요일 Reset CSS, 공백처리, 주석 및 벤더프리픽스, CSS Selector, 선택자 우선순위, Box Model (0) | 2022.09.09 |
| [멋사 프론트엔드 스쿨]9월 6일 화요일 TIL_Text-level semantics, Embedded content (0) | 2022.09.06 |
| [멋쟁이사자처럼 프론트엔드 스쿨]9월 5일 월요일 TIL (1) | 2022.09.05 |