html
-
[Day 18] 반응형 사이즈 조절 & 밴딩머신 코드리뷰TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 20. 22:07
1. 반응형 고려해서 이미지, 백그라운드, 비디오 사이즈 조절하기 1) 이미지와 비디오 img { max-width: 100% /*원본 이미지크기의 100%*/ width: 100% /*바디의 100%*/ 비디오도 요런 식으로 똑같이 적용되지만, 다만 height는 100%해도 100%로 안맞춰진다. **iframe(뿐만 아니라 모든 요소)는 padding-top, -bottom 속성(%일 경우)이 부모 요소 넓이에 비례한다! 2) 백그라운드 이미지 .요소 { width: 100vw; height: 100vh; background-image: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=MnwxM..
-
[Day 16] 로그인창 구현 코드 리뷰TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 18. 23:06
활기찬 월요일이 돌아왔다! (멋사로 월요병 극복,,?!) 오늘은 큩재현님과 오전에 CSS 설계기법을 배운 후 오후에는 위니브 로그인창 구현 과제에 대해서 코드리뷰하는 시간을 가졌다. 로그인창, 드롭박스, 밴딩머신 과제를 한꺼번에 하느라 정신없었던 지난주.. 주말에 가까스로 로그인창 구현을 어찌저찌 해냈는데 오늘 바로 코드리뷰 하는 시간을 가졌다. 다른 아기사자 분들이 한 코드를 봤는데, 자바스크립트 기능도 넣으신 분들이 많아서 정말 대단하다고 느꼈다..(멋지다 증맬,,,,저도 곧 따라갈게유.,,) 우리 아기사자(쌔)비지님들의 리뷰가 끝나고 재현님이 짠 (*정석*)코드를 봤는데 로그인 버튼이나 x 버튼 등 재활용이 가능한 부분에 대해서 모듈화를 따로 해놓으셨다! 재현님의 짠 코드를 보며 모듈화의 중요성을 ..
-
[Day 7] HTML <table>TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 5. 23:34
오늘 강의는 오전 재현님, 오후 호준님으로 나뉘어서 진행되었다! (하루에 두 분 다 봐서 너무 좋았다 헤헿) 재현님과는 HTML 마무리로 table 태그에 대해 배웠다. table 태그가 정말 어려워서 정말 연습이 많이 필요함을 체감했다 ㅠㅠ 그래서 오늘 TIL 포스팅은 table 에 집중해서 다루려고 한다. 표를 생성하는 table 태그는 컨테이너로서, caption, tr, col, td, th가 자식 요소로 쓰인다. 각각 머리글, 본문, 바닥을 의미하며, 레이아웃엔 영향을 미치지 않으나 css를 사용해 디자인 스타일을 지정할 때 사용 디자인 지정 외에도 thead와 tbody는 JS로 데이터를 컨트롤하는 경우로도 많이 쓰인다고 한다. html에서 표는 반드시 한 행씩 만들어지기 때문에 무조건 내용은..
-
[Day 6] 0404 회고 & HTML 그룹핑 복습 & FormTIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 4. 22:07
활기찬 2주 차 월요일-! 오늘은 메이커준님께서 진행하시는 회고로 아침을 시작했다. https://www.makerjun.com/ 메이커준을 소개합니다. 👋🏼 밝음의 아이콘 메이커준의 초간단 소개 www.makerjun.com 우테코에서 프론트엔드 교육 강사로 활동 중이신 준님:) 밝음의 아이콘이셔서 그런지 덩달아 나도 아침부터 활기활기🔥 크게 3부로 나눠서 회고를 진행하였는데, 1부 - 피드백이 중요한 이유 2부 - 무엇을 피드백 받아야 하지? 3부 - 피드백을 위한 체크리스트 순서로 진행하였다. 게임에서는 레벨, 점수, 경험치라는 측정치가 있기 때문에 내가 성장, 레벨업하는 것을 시각적으로 볼 수 있지만, 현실에서는 게임처럼 내가 성장하고 있는지 몸소 느낄 수 있는 방법이 없다🤢. 내가 과연 잘하고 ..
-
[Day 5] 빔캠프 이종찬 강사님과 함께하는 CSS 뽀시기TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 1. 23:18
https://www.youtube.com/c/veamcamp 빔캠프 - 코딩으로 웹디자인 빔캠프는 여러분들에게 영감을 줄 수 있는 창의적인 컨텐츠 또는 누구든지 따라 할 수 있는 튜토리얼 영상을 제공합니다 www.youtube.com (구독, 좋아요~) 오늘은 빔캠프 이종찬 강사님과 CSS 특강을 하였다! CSS의 본질부터 꿰뚫는 강사님의 강의력은 정말 어마어마했다....!! 하루 특강인 게 정말 아쉬울 정도였다 ㅜㅠ 강사님 덕분에 CSS의 진짜 매력을 느낄 수 있었고, 오늘 배운 것과 추가로 복습이 필요한 부분에 대해서 이번 주말동안 공부해야 겠다고 다짐했다. 오늘 강의 중 나에게 가장 와닿았던 부분을 꼽자면 1. inherit과 initial의 특징과 차이점 2. block과 inline 3. ma..
-
[Day 3] Text-level Sementics & Embedded ContentsTIL/멋쟁이사자처럼 FE스쿨 2기 2022. 3. 31. 00:36
오늘은 제코베의 한재현 강사님께서 수업을 맡으셨다! 재현님께서 풀어주시는 썰들과 동기들의 드립들(멋사 프론트엔드스쿨 2기엔 프로드립러 분들이 많다...아주...) 이 많았어서 수업이 전혀 지루하지 않았다 ㅋㅋㅋ 일단 오늘 배운 것은 어제에 이어서 HTML 요소에 대해 배웠는데, Text-level Sementics와 Embedded Contents이다. Text-level Sementics 이란, 말 그대로 텍스트 수준의 요소에만 쓰이는 태그들을 의미한다. 이러한 태그들에는 , (줄바꿈) (하이퍼텍스트 링크) , (폰트 굵기) , (기울임) (용어 정의) (줄임말) , (윗첨자, 아랫첨자) (div와 마찬가지로 최후의 수단) 이 있다. 이 중 익숙하지 않은 태그들로 아래와 같이 실습을 해보았다. 특히 a..
-
[Day 2] 웹 기본 상식과 HTMLTIL/멋쟁이사자처럼 FE스쿨 2기 2022. 3. 29. 17:17
오늘 수업은 제주코딩베이스의 이호준 강사님께서 진행하셨다:) 크게 웹의 기본 상식과 HTML Living Standard, tag에 대해 배웠다. URL & IP & PORT 1) URL URL은 웹에서 주소라고 할 수 있다. 흔히 우리가 볼 수 있는 https://www.naver.com/ 등이 url이다. 쉽게 말해, 네이버 홈페이지가 어디에 위치해 있는지를 의미한다. URL은 크게 세 가지로 나뉘는데, 프로토콜(http나 https), IP주소 or 도메인주소 or포트 주소, 파일의 위치(+ ?쿼리)로 나뉜다. 네이버 홈페이지를 예로 든다면, https => 프로토콜 www.naver.com => 도메인 주소 2) IP Internet Protocol 의 줄임말로, 인터넷 상의 컴퓨터의 주소 체계이..
-
[Day 1] OT & HTML/CSS로 이력서 만들기TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 3. 28. 23:42
1. 오티 국비과정인 만큼 출석과 훈련장려금 등에 대해 설명하시면서 시작이 되었다. 설명 후에는 팀빌딩이 이루어졌고, 팀장을 자처(?)하여 발표를 맡았다! 사실 대학 때도 발표를 많이 도맡아 했던지라 근자감을 가지고 준비 안하고 다른 팀 발표를 열심히 들었는데 준비를 조금이라도 했어야 했다...!ㅋㅋㅋㅋ 갑자기 발표가 시작되자마자 떨렸드아,,, 기대만큼 발표가 맘에 들진 않았지만 ㅠ 고생했다고 격려해준 팀원들 체고,,,,! 2. HTML, CSS로 간단한 이력서 만들기 팀활동이 끝나고 약 3 시간 동안 코드라이언에서 HTML, CSS 강의를 수강했다. 첫 날이라 기초 부분을 다뤄서 대부분의 내용을 훅훅 넘어갈 수 있었다. 그렇지만 몰랐던 내용도 있었는데..! 1) 가운데 정렬 가운데 정렬을 flex를 통..