본문 바로가기

CSS11

[멋사 FE 스쿨] 13일차 리뷰 오전 9시 생활코딩 WEB2-CSS 수강 킹갓제너럴 조코딩님의 원데이 특강!! https://www.youtube.com/c/조코딩JoCoding 오전(10:00~11:50) 수업 by jocoding 쿨찐 테스트 만들기! 테스트류는 가벼우면서 임팩트가 있기에 준비했다 그냥 만들고 끝나면 노의미 → 배포까지 해보자https://tescoolzin.shop/index.html 희망찬 동기 바이럴이 터지면 수업시작 vscode로 할거임 기본 마크업 Bootstrap https://getbootstrap.com/ css를 미리 만들어놓은 사이트 정도 표준화된 규격을 제공하는 CSS 프레임워크 ress.css든 reset.css든 읽어보고 알맞은 걸 사용해주자. cdn, reset, style 중에서 제일 중요.. 2021. 11. 17.
[멋사 FE 스쿨] 12일차 리뷰 오전(09:00~11:50) 수업 by Licat morning icebreaking 금융권 시절 썰 풀다.txt OO카드가 새벽 2시에 안된 엄청난 이슈 → 보통 이런 실수는 시니어보다는 주니어들에 의해 발생한다. 그렇게 주니어가 한줄 잘못친다고 오류나면 안되는 것 아닌가? 주니어의 중대한 실수로 억대 손실이 난다면?빠른 보고 필수 → 집가고 싶다는 생각하면 절대 안됨 + 내가 한실수를 감출 수 있지 않을까? 하는 생각도 절대 안됨 선임이 보기엔 아무것도 아닌 실수여서 금방 롤백할 수 있다. → 누군가는 회사에서 자고 있다.. 이런 걸로 배상 청구하고 하면 누가 그 명령어를 치려고 하겠는가.. 다들 지켜주려고 하니 너무 겁먹지 말자. 악성, 고의적인 오류가 아니면.. 위 사례 같은 경우는 대량 3개월치.. 2021. 11. 16.
[멋사 FE 스쿨] 11일차 리뷰 오전(09:00~11:50) 수업 by Licat morning break 과제는 내일 재현님과 함께 코드 리뷰는 멘토들이 해줄 것, 재현님 코드는 재현님 시간에 면접 질문은 노드까지는 가야.. 비전공자는 코테 빡센 기업보다는 좀 쉬운 코테 회사를 노려보자 br 태그에 관하여 → 너무 많은 br 태그는 금지라 생각하자 많은 기업들이 사용하고 있기 때문에 금지라기보다는 권장으로 방향을 바꾸자 대표님 깃헙 자료 106_br.html 참고 의미없는 줄바꿈이면 의미 없는 태그(ex. div class="br")가 낫지 않느냐는 의견도 결론: 개행에 이유가 있을 것이니 개행의 목적에 맞게 사용하자! 디플 홈페이지를 보면 버튼을 flex로 해놨는데 외국 기업은 flex를 많이 쓰는 경향이 보인다. class명에 g.. 2021. 11. 15.
[멋사 FE 스쿨] 10일차 리뷰 오전(09:00~11:50) 수업 by Wade 어제 클론마저 진행 Figma 100% 화면에서 캡쳐해서 비교해보기 → chrome 확장 프로그램 perfect pixel 이용해서 비교가 가능하다! 개꿀팁 다만, liveserver등으로 해당 페이지를 서버에 올리고 실행 가능 확인 작업 등도 엄청 오래 걸리기 때문에 사실상 만드는 것은 전체 작업의 30%밖에 되지 않는다고 할 수도 있다(!) 엄청난 노가다.. 반응형(!) - 보통 기준이 되는 폰 하나에 맞추는 편 FE 개발이라 퍼블리쉬는 벗어났다! 기뻐해선 안된다. 다들 각자의 고충이 있는 것.. 정해진 너비 외의 화면에서 레이아웃이 깨지는 문제? → 괜찮다. 원래는 좀 더 700정도로 tight하게 반응형이라고 무조건 모든 사이즈에 대응하지 않는다. .. 2021. 11. 12.
[멋사 FE 스쿨] 9일차 리뷰 오전(09:00~11:50) 수업 by Wade 진도 많이 나갔다 미디어 쿼리 screen은 모니터, 스크린이 있는 디바이스 print는 출력 미리보기 abbr이 뭐였나? 축약어 attr() : css 속성 가져오는 함수 pixel ratio는 클수록 css 1px에 들어오는 기기 화소수가 높으니까 화질이 좋다. → 해상도 별로 style을 다르게 줄 수 있다. console 창에서 window.devicePixelRatio로 알 수 있다. BOM(Browser Object Model) api → 브라우저의 정보를 가져오는 api가 있다. 기기정보도 가져올 수 있다. -webkit-device-pixel-ratio 이걸 왜 알아야 할까? → 해상도 따른 이미지 제공 그럼 왜 해상도 따른 이미지 변화를 감.. 2021. 11. 11.
[멋사 FE 스쿨] 8일차 리뷰 + 특강 수업(09:00~18:00) by Licat morning break Python 오픈 소스 프로젝트 준비 중 markup layout에 맞게 작성할 수 있게 도와주는 프로그램 짜면 좋을 것 같다. 작명 규칙(Convention) 작명 방법론 되게 긴데 snake 규칙을 지키면 이름이 너무 길어진다. weniv는 snake법으로 작성하지 않는다. 이상한 class name 대기업 간다? class 명을 정한다는게 의미가 없을 수 있다. 왜? → 보안 때문에 내부적으로는 지켜도 프로그램을 돌려서 사용자가 볼때에는 해슁된 것 마냥 이상한 이름으로 보인다. 암호화된 class 명으로 바뀐 것 어떤 보안 이득이 있을까? → 크롤링을 막기 위해 크롤링? 웹에 있는 정보를 가져오는 것 업무 자동화 관련 JS, Py.. 2021. 11. 10.
[멋사 FE 스쿨] 7일차 리뷰 오전 수업(09:00~1150) 호준님(Licat) 수업 Morning QnA 피그마 활용한 과제? 와 같은 테스트가 코딩 테스트로 나오는가? → 물론이다. 구현해봐라, 서버를 주고 서버 통신하게 하라 등의 과제가 나올 수 있다. 단순 1박 2일이 아니라 2박3일 길게는 일주일 요새는 개발자 뽑기가 어려우니까 포트폴리오 보기만 하는 곳도 있고 코테 비관론자들이 계신다. 코테는 주니어를 뽑는데에 필요하지 않다. 또, 코테 이정도는 해야지 생각으로 하시는 분도 계신다. 제주코베 통해 취업 후에도 관계 끝나는게 아니라 출제된 문제를 다시 함께 문의하는 경우도 있었다. 일반 면접은 무엇을 질문하는가? → 이 사람이 우리 회사 문화 fit에 맞는지를 확인하기 위한 질문 위니브처럼 칼퇴를 절대적으로 권장하는데 너무.. 2021. 11. 9.
[멋사 FE 스쿨] 6일차 리뷰 + 스프린트회고 오전(09:00~11:50) 재현님(Wade) 수업 flex flex order를 통한 순서는 rendering화면상의 순서지 markup 상의 순서가 아니다! flex froggy, css dinner 등 게임으로 재밌게 익힐 수 있는 곳들이 있다. (깨알 Tip. 100vh는 height를 꽉 채운다.) flex로 9칸같은 칸을 채울 때 마지막 칸이 비는 문제 발생? ::after를 이용해서 가상요소를 넣어서 채워줄 수 있음 이런 부분에서는 flex보다는 grid가 반응형 웹을 짜는데 있어서 더 유리하다. grid - flex의 main, cross 축과 같은 역할은 grid에서 행과 열 - grid에만 쓰는 단위 fr(fraction) - 한줄에 3개 칸이 있을 때 각각 columns마다 1fr 1.. 2021. 11. 8.
[멋사 FE 스쿨] 5일차 리뷰 morning qna FE 개발자의 가장 기본 소양? 바로 Layout 구현 능력!! 시작은 box모델부터 클론코딩으로 연습도 좋음. 우려되는 점? 획일화에 대한 염려 but 같은 기능이라도 다르게 구현해봤음을 강조하자! 한번 본건 본게 아니다 - 공신 강성태 -> 백문이 불여일타! 수업 box 모델 - float은 현업에서 안쓰지 않느냐? → 아직까지 쓰기는 한다. 네이버, 카카오 같이 많은 사용자를 접하는 회사는 다양한 지원을 해주니까 float 쓰긴한다. - 반드시 유지보수할 일이 있는 것 → 레거시 코드 레거시 코드란? https://ko.wikipedia.org/wiki/%EB%A0%88%EA%B1%B0%EC%8B%9C_%EC%8B%9C%EC%8A%A4%ED%85%9C 레거시 시스템 - 위키백과.. 2021. 11. 5.
[멋사 FE 스쿨] 4일차 리뷰 morning qna& review 1. zoom 입장 소리 제거 -> 검색하세욧 2. css 작성 순서? -> 뭔 내용이었드라.. 까먹음 3. 클래스 선택자 보강 -> 헷갈리기 쉬운 선택자 정리 예정 4. 우선순위 계산법 class 11개 vs id 1개+class 1개 → id 포함된게 우선순위 더 높다 / 상속까지 생각해야 된다🤮 css 책에서는 선택자 가중치 점수 계산법만 30페이지가 넘는단다..^^ - 재현(Wade)님 tip - 실무에서는 주로 클래스 선택자를 많이 사용. ID 선택자는 중복을 허용(1개의 id attribute에 1개의 value 밖에 오지 못한다.)하지 않으니 사용하기 힘들고, 요소 선택자는 모든 요소에 영향을 주기 때문에 조심스럽게 사용. 클래스 선택자는 중복을 허용하고 .. 2021. 11. 5.