저번주 수혁님의 git세션으로 개발 환경을 세팅하고 이제 본격적으로 개발을 시작해보았습니다!!
웹 개발의 첫 시작은 Html과 Css 그리고 Javascript죠~!
3가지나 알아야 시작이 된다니.. 너무 막막하다고 생각이 드시나요…?
막막한 아기사자분들을 위해 다은님께서 ✨Html, Css, Javascript의 기초와 실습✨으로 구성된 알찬 세션을 준비했답니다!!
그럼 세션 정리와 기록 시작합니다~!
먼저 편집기인 Vscode와 Git 설정을 확인한 다음 다은님이 노션에 준비해주신 Html / Css 기초 이론을 함께 확인했답니다!!
난이도는 웹개발의 ‘ㅇ’자도 모르는 🦁아기사자 기준으로 구성했답니다!
📙HTML은 크게 head, body로 구성된답니다.
head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담습니다.
- head 안에 들어가는 대표적인 요소들 - meta, script, link, title 등
: 페이지의 속성을 정의하거나, 필요한 스크립트들을 부릅니다.
⇒ 즉, 눈에 안 보이는 필요한 것들을 담는 것.- body 안에 들어가는 대표적인 요소 → 태그와 속성
👉 태그(Tag)
✔️Tag 또는 Element라고 부른다
- 정확하게는 다르나 혼용해서 사용
- HTML 문서를 구성하는 기본 단위
✔️태그는 Attributes와 Value를 가지고 있다.
ex. < tag attributes="value" >< / tag >
👉속성(attribute)
말 그대로 태그만 사용해서는 동작하기는 뭔가 아쉬운 부분들을 속성이라는 기능을 추가적으로 적용함으로써 태그가 정상적으로 동작 할 수 있도록 만들어 주는 기능
→이 외에도 많은 기초를 정리해주셨지만,
🤫쉿..이건 12기 운영진과 아기사자만 알고 가는걸로 해요...
( 궁금하면 다음 기수 신청하기!! )
정말 빈틈없게 작성해주신 다은님입니다!!
( 머리 넘기는 모습..머시따~!! ✨선배미✨ 유후~! )
그리고 등장한 상우하왼. ( 그리고 🔃로딩중인 다은님 )
이제부터 멋사 내에서는 마진은 상우하왼으로 말하는거에요~
세션 집중해서 듣는 아기사자들…청춘이다~✨!!
이슈가 발생하자 흐린눈이 되버린 다은님이에요~🫠
도와주려고 보는거랍니다~ 우리 대표님 착해요~
이잉!! 준영이는 프론트가 너무 어려웡!! (>_<)
오늘 세션은 양이 조금 많았는데 다들 잘 따라와주셔서 정말 감사했답니다~!
백엔드이시지만 계속 아기사자들을 도와주시던 멋진 대표님이랍니다~! ( 아빠사자 최고~!👍 )
실습 진행 시 어려운 부분은 상시 대기중인 운영진들이 도와주시면서 아기사자도, 운영진도 같이 성장할 수 있는 시간이었어요~!
( 이게 바로...청...춘...?✨ )
실습으로는 로그인 페이지를 구현해보았답니다!!
먼저 css 요소와 이미지 없이 실습을 진행한 뒤, 이렇게 이미지도 추가하고 css도 수정해보았답니다!!
세션 마지막 실습은 간단한 시계와 이벤트 페이지를 만들어보았답니다!
다들 잘 따라와주셔서 정말 감사해요!!
( 다들 최고 최고~!~! 👍👍👍 )
첫 개발 세션을 잘 이끌어주신 다은님께 박수를 보냅니다!! 👏👏👏
프론트에서 다은님이 귀여움을 담당한다면, 백엔드에서는 나연님이 귀여움을 담당하고 있죠.
다음 세션은 백엔드 최고 귀염둥이,