멋쟁이사자처럼 멋쟁이사자처럼 프론트엔드 스쿨 2기 17_Day 1. 이미지 포맷 포맷 컬러 표현 용량 애니메이션 투명 그림자 특징 GIF 256색 작음 압축률 안 좋음 JPG/JPEG 24비트 컬러 작음 압축률 좋음 PNG 32비트 트루컬러 반투명 처리 가능 SVG 좋음 모양 복잡에 비례 벡터 그래픽 형식 WebP 매우 좋음 매우 작음 압축률 매우 좋음 AVIF 매우 좋음 작음 지원 브라우저 적음 최신 확장자를 사용 할 때는 위에 소스코드 처럼 기본적으... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS 멋쟁이사자처럼 9기 회고 어느덧 1년 간의 멋사 아기사자 생활을 끝내고, 10기 운영진으로서 향후 1년을 더 활동하게 되었다. 운영진을 결심하게 된 계기에는 작년 한 해 동안 멋사 활동을 하면서 '멋쟁이사자처럼'이라는 동아리에 애정을 느낀 점이 컸다. 이런 간절한 마음이 통했는지 서류-면접 과정을 통과해 최종적으로 9기 아기사자가 될 수 있었다! 이 시간에 깊은 내용을 다루진 못하지만 전반적인 지식들을 습득할 수 있... 멋쟁이사자처럼멋쟁이사자처럼 멋쟁이사자처럼 프론트엔드 스쿨 2기 16_Day 1. 커스텀 input, select box 1. 커스텀 input, select box 1) input box custom 웹접근성을 고려하여 input 태그를 IR 기법으로 숨기고 label 태그를 스타일링 하는 방법이 있습니다. 단순하게 이미지를 삽입하는 방법보다 더 나은 코드라고 볼 수 있습니다. 2) select box custom select box도 위에 input box와 마찬... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS TypeScript 기본 문법 정리 JS는 동적 타입 언어이기 때문에 런타임 속도는 빠른 반면 타입 안정성이 보장되지 않지만 TS는 정적 타입 언어이기 때문에 컴파일 시 시간이 좀 더 걸리더라도 타입 안정성을 보장한다. TS는 타입을 선언해 이를 보장하기 때문에 타입을 제어할 수 있게 되어 훨씬 더 간편하게 에러를 잡을 수 있다~! TS는 JS의 슈퍼셋, 즉 JS 기본 문법에 TS의 문법을 추가한 언어. TS는 ES6에서 새롭... 멋쟁이사자처럼webtypescripttypescript 18 - CSS (반응형 이미지, 동영상) <img>태그 background-image bacground-size가 contain 이면 ? bacground-size가 cover 사용하면 ? <video>태그 video태그 img태그 처럼 똑같이 width만 100%주면 반응형 됨! Video 속성 preload =“none”, “auto”; : 페이지를 로드할때 영상을 미리 로드할지 말지 결정함 Poster : 비디오를 내려받을 동... 멋쟁이사자처럼TIL프론트엔드스쿨2기TIL 17 - CSS(Image Sprite) 이미지를 편집할 때는 온라인 에디터를 사용하거나 직접 에디팅 앱(포토샵, 피그마, 스케치 등)을 사용해 개발자가 직접 편집함. 장점 : 이미지 태그의 개수를 줄이기위해, html 파일 자체가 깔끔해지고 스크린리더로 탐색할 때 탐색속도가 빨라질것, 이미지 태그가 많을 수록 웹페이지를 로딩할 때 속도가 늦어짐 특정한 시야 거리에서 인간의 눈으로는 화소를 구분할 수 없는 화소 밀도(300 PPI가... 멋쟁이사자처럼TIL프론트엔드스쿨2기TIL [CSS] checkbox와 select 꾸미기 form 양식을 제작할 땐 기본적으로 브라우저 기본 스타일이 적용되어있다. 이때 <input type="checkbox">, <input type="radio">, <select>안에 <option> 이 세가지는 CSS가 먹히지 않아 원하는 디자인으로 꾸밀 수 없게 된다. 그럼 이 3가지는 못꾸미는 것인가...? 물론 아니다. 이번 포스팅에서는 해당 요소들을 꾸미는 방법에 대해 작성하고자 한... 멋쟁이사자처럼CSS제주코딩베이스캠프CSS JavaScript 기본 문법 정리 이번주부터 백엔드 세션에 참여하기로 했다.....!!!! 미루고 미뤄오던 백엔드 공부,,, 드디어 시작,,, 그 기념으로 javascript 문법 다 까먹어서 기억이 나지 않는 기본적인 내용들은 복습을 해보려고 한다💨 강의는 생활코딩 강의를 참고했습니다:) true와 false는 변수명으로 사용하면 안돼! 비교연산 1 == 1 true 1 == 2 false 1 > 2 false 1 === ... web멋쟁이사자처럼JavaScriptjsJavaScript [CSS] IR기법 IR(Image Replacement) 기법은 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것으로 이는 웹 접근성 준수를 위한 스크린 리더 사용자뿐 아니라 검색 엔진의 효과적인 내용 수집을 위해서도 필요하다. 사용된 이미지내 의미있는 텍스트의 대체 텍스트를 제공할때 Mobile의 color:transparent;는 IE9부터 사용 가능하기 때문에 PC에서는 적용하지 않는다.... 제주코딩베이스캠프CSS멋쟁이사자처럼CSS CSS 실무 테크닉 스타일링이 까다로운 input요소를 화면에서 숨기고 label 요소 연결하여 커스텀 select 박스 대신 button, ul, li 를 이용하여 커스텀 ✔ input 커스텀 디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보 전달 텍스트를 숨겨두는 방법 ✔ 카카오가 사용하는 방법 (PC) 이미지내 의미있는 텍스트의 대체텍스트 제공 (Mobile) 이미지내 의미있는 텍스트의 대체텍... 멋쟁이사자처럼front endCSSCSS 멋쟁이사자처럼 프론트엔드 스쿨 2기 15_Day 1. CSS 설계 기법 1. CSS 설계 기법 1) OOCSS (Object Oriented CSS) 🕵️♀️ OOCSS란? UI에 있는 것들을 모두 객체로 생각하고 여러가지 모듈로 만들어 조립하는 기법입니다. 같은 형태의 UI 에 스킨만 다르다면 구조와 스킨을 분리하여 조합 합니다. 구조에 해당하는 btn 클래스에는 width, height, padding, margin 등 레이아웃에 영... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS [HTML/CSS] Day20. Flex(2) 🤷♂️ 아래의 소스 코드에서는 자식 요소에 height:100px를 주고 요소에 각각 width:200px과 flex-basis:200px을 적용시켜보았다. 하지만 아래 이미지에서 볼 수 있듯 .box2는 flex-basis:200px가 적용된 기본 너비 '200px'(빗금친 부분)보다 더 많은 영역(화살표 부분)을 차지하는 것을 볼 수 있다. 이를 보면 width를 적용하면 강제적인 고정값으로 딱... 멋쟁이사자처럼제주코딩베이스캠프htmlcss프론트엔드htmlcss TIL16-CSS 레고처럼 여러가지 모듈을 만들어서 조합하도록 하는 방법론 구조(structure)와 스킨의 분리 구조와 스킨을 구별하여 클래스 네이밍 하기! 콘텐츠의 스타일이 컨테이너에 종속되지 않도록함 (분리!) 구조 : width, height, padding, margi 등 레이아웃에 영향을 미치는 속성 스킨 : font관련속성, color, background, border 등 레이아웃에 영향을 미치... 멋쟁이사자처럼TIL프론트엔드스쿨2기TIL [일단 만드는 JS] 로또 번호 추첨기 1-45 숫자 사이에서 무작위로 로또 번호를 추첨하는 로또 번호 추첨기를 만들어 보려고 한다. JavaScript의 내장 함수를 활용해 간단히 만들 수 있다. 우선 뽑힌 번호들을 보관할 수 있는 공간이 필요하다. 로또 번호는 하나가 아닌 여러 개의 숫자를 뽑기 때문에 5개의 숫자를 담을 수 있는 배열 형태로 선언해 준다. .length를 사용해 배열의 길이를 계산할 수 있는데, 로또 번호가 ... 멋쟁이사자처럼JavaScriptJavaScript 14 - CSS (grid) grid는 flex와 비슷하다 flex와 비슷한점 : container에서 display:grid로 해주는것! grid에서 column 과 row 를 칸으로 계산한다는것이 매우 편하게하는 일이었다..!! 크기를 늘릴때에는 가로축이면 grid-column 으로 세로축이면 grid-row로..!!! 즉, flex는 1차원 적인 레이아웃을 잡을 때 (수평 1줄인 레이아웃을 잡을 때) 용이하고, g... 멋쟁이사자처럼TIL프론트엔드스쿨2기TIL [일단 만드는 JS] 기념일 계산기 Date 객체 Date 객체는 날짜를 다루는 객체이다. 사용할 수 있는 메소드가 다양하므로 한번 써 보도록 하자. 구현 시작 우선 기념일을 계산하기 위해서는 시작점으로 잡을 특정 날짜를 지정해야 한다. 앞에서 본 것처럼 특정일의 Date 객체 생성 방법대로 시작일을 지정한 후 시간이 얼마나 흘렀는지 getTime을 통해 계산한다. 현재 시간 - 시작 시간으로 계산하면 된다. 그러나 이대로 계... 멋쟁이사자처럼JavaScriptJavaScript [일단 만드는 JS] 미니 스타크래프트 jQuery는 JS를 쉽게 사용할 수 있도록 해 주는 라이브러리다. IE, Chrome, Firefox, Safari 등 각 브라우저와 버전 차이 때문에 동작하는 모습이 조금씩 다르지만 jQuery를 사용하면 이러한 문제를 해결할 수 있다. 이번 프로젝트에서는 클릭 이벤트를 사용할 예정인데, JS에서는 onclick 키워드로 사용할 수 있다. jQuery 버전 클릭 이벤트는 이렇게 사용할 수... jquery멋쟁이사자처럼JavaScriptJavaScript [일단 만드는 JS] 자소서 글자 수 계산기 DOM(Document Object Model)은 말 그대로 Document, 즉 화면을 구성하는 HTML 코드를 쉽게 접근할 수 있도록 만든 모델이다. JS는 DOM을 활용하여 화면을 구성하는 모든 것들에 접근할 수 있다. 위와 같은 코드를 JS를 통해 내용을 바꿀 수 있다. 내용뿐만 아닌 클래스나 스타일 같은 속성도 바꿀 수 있다. document.getElementById()로 특정 아... 멋쟁이사자처럼JavaScriptJavaScript 정렬(정열x)의 요정 float 이 때, float: left; 속성을 부여하면 아래와 같이 된다. 원래 블록 레벨 요소는 가로폭 전체의 넓이를 가지는 속성을 가지고 있지만, float 속성을 주면 콘텐츠에 해당하는 너비만큼만 차지하고 다른 요소에 대해 왼쪽, 혹은 오른쪽으로 배치된다. 아직 float 속성을 설정하지 않은 상황이라, 부모 안에 div 두 녀석이 고스란히 포장되어 있다. 부모 요소 아래에 여러 개의 형제 요... 멋쟁이사자처럼CSSCSS 뭐야 마진 어디갔어 : 마진 겹침 현상 마진(margin)이란, 요소 바깥 네 방향의 여백 영역을 설정하는 css 속성이다. 이러한 현상을 마진 겹침 현상(margin collapsing)이라고 한다. 1. 형제 요소 간의 상하단 마진 겹침 2. 부모 자식 요소 간의 마진 겹침 반면, 부모 요소의 마진과 자식 요소의 마진이 병합되는 경우도 있다. 부모 요소 안에서 자식 요소에 margin을 주면 1번에서의 예시와 같이 숫자 8 모... 멋쟁이사자처럼멋쟁이사자처럼 [멋쟁이사자처럼 FE 스쿨 2기] 4월 6일 과제 풀이 : 인접 형제 결합자(+) 오늘 멋쟁이사자처럼에서는 주요 CSS Selector들에 대해서 알아보았다. Universal Selector (*) Type Selector ([attr="value"]) Class Selector (.class) 등의 Selector들로 요소를 선택하며, 콤마(,)로 선택자들을 연결하여 일치하는 모든 요소를 선택하는 선택자 목록(Selector list)을 이용해 중복되는 코드를 줄일 수... 멋쟁이사자처럼CSSCSS 멋쟁이사자처럼 FE SCHOOL 2기: 2주까지의 회고 아침 9시부터 6시, 실시간 수업이 끝나고 저녁을 먹으면 같은 클래스 사람들과 게더타운에 모여 그 날 과제를 하거나, 오늘 배운 내용을 정리한 블로그 글을 공유한다. 시간 가는 줄 모르고 과제 하고, 정리하고, 하기 싫을 때는 또 마이크를 키고 잡담을 하다 보면 어느샌가 자정이 되어 있다. 하지만 그런 것 보다도 이 짧은 시간에 내 마인드셋이 바뀌었고 그게 정말 좋았다. 잘 쓴 글을 비교군으... 멋쟁이사자처럼회고록멋쟁이사자처럼 [TIL] CSS_빔캠프 특강 (이종찬 강사님) width: 800px; 너비가 줄어든 것을 볼 수 있다. 브라우저가 디폴트로 갖고있는 스타일시트를 알 수 있다. width : auto; > css > background-color 검색 즉, div 안에 있는 컨텐츠의 높이만큼 차지한다. padding : div 전체 크기가 커지게 된다. border: 전체 크기가 커지게 된다. width auto로 하면 옆 공간을 다 쓰게 된다. mar... 프론트엔드스쿨개발일지멋쟁이사자처럼빔캠프TILhtmlCSSCSS TIL13 CSS display:flex 를 사용하려면, container와 같은 묶어주는 상위개념이 있어야한다! line-height 와 heiht의 크기를 같게주면, 중앙정렬이된다! line-height가 제일 이해가 되지 않았다. 멋사 동기님들의 도움으로 바로 이해가되었다!! 손수 저렇게 그림을 그려주시며 이해를 도와주셨다 😎 1. 저 box크기가 100px이고 원래 line-height가 10px이라고... 멋쟁이사자처럼TIL프론트엔드스쿨2기TIL 멋쟁이사자처럼 프론트엔드 스쿨 2기 13_Day 1. flex 2. grid 1. flex flex-grow는 flex 아이템의 여백 비율을 정할 수 있는 속성입니다. flex-shrink 는 flex 아이템의 줄어드는 비율을 정할 수 있는 속성입니다. flex-basis 는 flex 아이템의 크기를 정합니다. 위에 2행에 있는 사진처럼 중심축 기준으로 grow 비율을 뺀 너비가 basis 사이즈입니다. 맨 오른쪽에 있는 사진처럼 flex... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS [HTML/CSS] Day18. Position 🪑 이미지를 보면 가장 밑에 normal flow, 중간 쯤 float, 가장 위의 position이 자리잡고 있다. 위의 코드의 결과는 block level Elements은 전체 영역을 다 차지하고, 바로 아래에 inline Elements 2개가 나란히 나열되는 것이 normal flow라고 생각하면 된다. 하지만 float과 position 속성을 사용하면 normal flow보다 더 높... 멋쟁이사자처럼제주코딩베이스캠프htmlcss프론트엔드htmlcss [HTML/CSS] Day19. Flex(1) 😎 flex-direction은 Main-axis의 방향만 정할 뿐 Cross-axis에는 변화를 주지 않는다. 또한 만약 컨테이너 요소 내부에 있는 자식요소에게 width를 주지 않으면 아래의 이미지처럼 한 줄의 영역을 모두 차지하게 되는 특징이 있다. flex-direction의 기본값인 row가 적용되었을 때는 column과 반대로 한 줄 영역을 차지하지 않고 콘텐츠의 영역만큼만 차지하고 ... 멋쟁이사자처럼제주코딩베이스캠프htmlcss프론트엔드htmlcss 멋쟁이사자처럼 프론트엔드 스쿨 2기 11_Day 첫 번째 사진처럼 자식 요소들이 전부 float 속성일 경우, 부모는 자식 요소들의 높이를 인식 할 수 없다! ✍ 참고 내용: 형제 요소 모두 float이 되어 있다면, 1번 부모가 자식 요소의 높이를 인식할 수 없는 문제가 발생합니다. 형제 요소 중에 float으로 지정된 요소가 있고 없는 요소가 있다면 2번 문제가 발생합니다. 부모 요소에 overflow:hidden;을 추가. 부모 요소... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS 1 - Restart 오늘부터 새롭게 시작되는 만큼, TIL을 하루도 빠짐없이 작성하는것이 새로운 목표이다. 오늘은 간단한 OT, 팀빌딩, 이두희님의 특별 강연, 코드라이언 [일단 만드는 HTML/CSS]강의를 수강하였다. 우리팀은 6명 모두 비전공자들로 구성되어 팀명은 All Be 전공자! 모두 전공자수준이 되자 라는 의미도 같이되어있다 😋 Firebase 프론트엔드 동작시키기위한 최고의 서포터 9to6는 점프... 멋쟁이사자처럼프론트엔드스쿨TILTIL 이전 기사 보기
멋쟁이사자처럼 프론트엔드 스쿨 2기 17_Day 1. 이미지 포맷 포맷 컬러 표현 용량 애니메이션 투명 그림자 특징 GIF 256색 작음 압축률 안 좋음 JPG/JPEG 24비트 컬러 작음 압축률 좋음 PNG 32비트 트루컬러 반투명 처리 가능 SVG 좋음 모양 복잡에 비례 벡터 그래픽 형식 WebP 매우 좋음 매우 작음 압축률 매우 좋음 AVIF 매우 좋음 작음 지원 브라우저 적음 최신 확장자를 사용 할 때는 위에 소스코드 처럼 기본적으... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS 멋쟁이사자처럼 9기 회고 어느덧 1년 간의 멋사 아기사자 생활을 끝내고, 10기 운영진으로서 향후 1년을 더 활동하게 되었다. 운영진을 결심하게 된 계기에는 작년 한 해 동안 멋사 활동을 하면서 '멋쟁이사자처럼'이라는 동아리에 애정을 느낀 점이 컸다. 이런 간절한 마음이 통했는지 서류-면접 과정을 통과해 최종적으로 9기 아기사자가 될 수 있었다! 이 시간에 깊은 내용을 다루진 못하지만 전반적인 지식들을 습득할 수 있... 멋쟁이사자처럼멋쟁이사자처럼 멋쟁이사자처럼 프론트엔드 스쿨 2기 16_Day 1. 커스텀 input, select box 1. 커스텀 input, select box 1) input box custom 웹접근성을 고려하여 input 태그를 IR 기법으로 숨기고 label 태그를 스타일링 하는 방법이 있습니다. 단순하게 이미지를 삽입하는 방법보다 더 나은 코드라고 볼 수 있습니다. 2) select box custom select box도 위에 input box와 마찬... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS TypeScript 기본 문법 정리 JS는 동적 타입 언어이기 때문에 런타임 속도는 빠른 반면 타입 안정성이 보장되지 않지만 TS는 정적 타입 언어이기 때문에 컴파일 시 시간이 좀 더 걸리더라도 타입 안정성을 보장한다. TS는 타입을 선언해 이를 보장하기 때문에 타입을 제어할 수 있게 되어 훨씬 더 간편하게 에러를 잡을 수 있다~! TS는 JS의 슈퍼셋, 즉 JS 기본 문법에 TS의 문법을 추가한 언어. TS는 ES6에서 새롭... 멋쟁이사자처럼webtypescripttypescript 18 - CSS (반응형 이미지, 동영상) <img>태그 background-image bacground-size가 contain 이면 ? bacground-size가 cover 사용하면 ? <video>태그 video태그 img태그 처럼 똑같이 width만 100%주면 반응형 됨! Video 속성 preload =“none”, “auto”; : 페이지를 로드할때 영상을 미리 로드할지 말지 결정함 Poster : 비디오를 내려받을 동... 멋쟁이사자처럼TIL프론트엔드스쿨2기TIL 17 - CSS(Image Sprite) 이미지를 편집할 때는 온라인 에디터를 사용하거나 직접 에디팅 앱(포토샵, 피그마, 스케치 등)을 사용해 개발자가 직접 편집함. 장점 : 이미지 태그의 개수를 줄이기위해, html 파일 자체가 깔끔해지고 스크린리더로 탐색할 때 탐색속도가 빨라질것, 이미지 태그가 많을 수록 웹페이지를 로딩할 때 속도가 늦어짐 특정한 시야 거리에서 인간의 눈으로는 화소를 구분할 수 없는 화소 밀도(300 PPI가... 멋쟁이사자처럼TIL프론트엔드스쿨2기TIL [CSS] checkbox와 select 꾸미기 form 양식을 제작할 땐 기본적으로 브라우저 기본 스타일이 적용되어있다. 이때 <input type="checkbox">, <input type="radio">, <select>안에 <option> 이 세가지는 CSS가 먹히지 않아 원하는 디자인으로 꾸밀 수 없게 된다. 그럼 이 3가지는 못꾸미는 것인가...? 물론 아니다. 이번 포스팅에서는 해당 요소들을 꾸미는 방법에 대해 작성하고자 한... 멋쟁이사자처럼CSS제주코딩베이스캠프CSS JavaScript 기본 문법 정리 이번주부터 백엔드 세션에 참여하기로 했다.....!!!! 미루고 미뤄오던 백엔드 공부,,, 드디어 시작,,, 그 기념으로 javascript 문법 다 까먹어서 기억이 나지 않는 기본적인 내용들은 복습을 해보려고 한다💨 강의는 생활코딩 강의를 참고했습니다:) true와 false는 변수명으로 사용하면 안돼! 비교연산 1 == 1 true 1 == 2 false 1 > 2 false 1 === ... web멋쟁이사자처럼JavaScriptjsJavaScript [CSS] IR기법 IR(Image Replacement) 기법은 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것으로 이는 웹 접근성 준수를 위한 스크린 리더 사용자뿐 아니라 검색 엔진의 효과적인 내용 수집을 위해서도 필요하다. 사용된 이미지내 의미있는 텍스트의 대체 텍스트를 제공할때 Mobile의 color:transparent;는 IE9부터 사용 가능하기 때문에 PC에서는 적용하지 않는다.... 제주코딩베이스캠프CSS멋쟁이사자처럼CSS CSS 실무 테크닉 스타일링이 까다로운 input요소를 화면에서 숨기고 label 요소 연결하여 커스텀 select 박스 대신 button, ul, li 를 이용하여 커스텀 ✔ input 커스텀 디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보 전달 텍스트를 숨겨두는 방법 ✔ 카카오가 사용하는 방법 (PC) 이미지내 의미있는 텍스트의 대체텍스트 제공 (Mobile) 이미지내 의미있는 텍스트의 대체텍... 멋쟁이사자처럼front endCSSCSS 멋쟁이사자처럼 프론트엔드 스쿨 2기 15_Day 1. CSS 설계 기법 1. CSS 설계 기법 1) OOCSS (Object Oriented CSS) 🕵️♀️ OOCSS란? UI에 있는 것들을 모두 객체로 생각하고 여러가지 모듈로 만들어 조립하는 기법입니다. 같은 형태의 UI 에 스킨만 다르다면 구조와 스킨을 분리하여 조합 합니다. 구조에 해당하는 btn 클래스에는 width, height, padding, margin 등 레이아웃에 영... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS [HTML/CSS] Day20. Flex(2) 🤷♂️ 아래의 소스 코드에서는 자식 요소에 height:100px를 주고 요소에 각각 width:200px과 flex-basis:200px을 적용시켜보았다. 하지만 아래 이미지에서 볼 수 있듯 .box2는 flex-basis:200px가 적용된 기본 너비 '200px'(빗금친 부분)보다 더 많은 영역(화살표 부분)을 차지하는 것을 볼 수 있다. 이를 보면 width를 적용하면 강제적인 고정값으로 딱... 멋쟁이사자처럼제주코딩베이스캠프htmlcss프론트엔드htmlcss TIL16-CSS 레고처럼 여러가지 모듈을 만들어서 조합하도록 하는 방법론 구조(structure)와 스킨의 분리 구조와 스킨을 구별하여 클래스 네이밍 하기! 콘텐츠의 스타일이 컨테이너에 종속되지 않도록함 (분리!) 구조 : width, height, padding, margi 등 레이아웃에 영향을 미치는 속성 스킨 : font관련속성, color, background, border 등 레이아웃에 영향을 미치... 멋쟁이사자처럼TIL프론트엔드스쿨2기TIL [일단 만드는 JS] 로또 번호 추첨기 1-45 숫자 사이에서 무작위로 로또 번호를 추첨하는 로또 번호 추첨기를 만들어 보려고 한다. JavaScript의 내장 함수를 활용해 간단히 만들 수 있다. 우선 뽑힌 번호들을 보관할 수 있는 공간이 필요하다. 로또 번호는 하나가 아닌 여러 개의 숫자를 뽑기 때문에 5개의 숫자를 담을 수 있는 배열 형태로 선언해 준다. .length를 사용해 배열의 길이를 계산할 수 있는데, 로또 번호가 ... 멋쟁이사자처럼JavaScriptJavaScript 14 - CSS (grid) grid는 flex와 비슷하다 flex와 비슷한점 : container에서 display:grid로 해주는것! grid에서 column 과 row 를 칸으로 계산한다는것이 매우 편하게하는 일이었다..!! 크기를 늘릴때에는 가로축이면 grid-column 으로 세로축이면 grid-row로..!!! 즉, flex는 1차원 적인 레이아웃을 잡을 때 (수평 1줄인 레이아웃을 잡을 때) 용이하고, g... 멋쟁이사자처럼TIL프론트엔드스쿨2기TIL [일단 만드는 JS] 기념일 계산기 Date 객체 Date 객체는 날짜를 다루는 객체이다. 사용할 수 있는 메소드가 다양하므로 한번 써 보도록 하자. 구현 시작 우선 기념일을 계산하기 위해서는 시작점으로 잡을 특정 날짜를 지정해야 한다. 앞에서 본 것처럼 특정일의 Date 객체 생성 방법대로 시작일을 지정한 후 시간이 얼마나 흘렀는지 getTime을 통해 계산한다. 현재 시간 - 시작 시간으로 계산하면 된다. 그러나 이대로 계... 멋쟁이사자처럼JavaScriptJavaScript [일단 만드는 JS] 미니 스타크래프트 jQuery는 JS를 쉽게 사용할 수 있도록 해 주는 라이브러리다. IE, Chrome, Firefox, Safari 등 각 브라우저와 버전 차이 때문에 동작하는 모습이 조금씩 다르지만 jQuery를 사용하면 이러한 문제를 해결할 수 있다. 이번 프로젝트에서는 클릭 이벤트를 사용할 예정인데, JS에서는 onclick 키워드로 사용할 수 있다. jQuery 버전 클릭 이벤트는 이렇게 사용할 수... jquery멋쟁이사자처럼JavaScriptJavaScript [일단 만드는 JS] 자소서 글자 수 계산기 DOM(Document Object Model)은 말 그대로 Document, 즉 화면을 구성하는 HTML 코드를 쉽게 접근할 수 있도록 만든 모델이다. JS는 DOM을 활용하여 화면을 구성하는 모든 것들에 접근할 수 있다. 위와 같은 코드를 JS를 통해 내용을 바꿀 수 있다. 내용뿐만 아닌 클래스나 스타일 같은 속성도 바꿀 수 있다. document.getElementById()로 특정 아... 멋쟁이사자처럼JavaScriptJavaScript 정렬(정열x)의 요정 float 이 때, float: left; 속성을 부여하면 아래와 같이 된다. 원래 블록 레벨 요소는 가로폭 전체의 넓이를 가지는 속성을 가지고 있지만, float 속성을 주면 콘텐츠에 해당하는 너비만큼만 차지하고 다른 요소에 대해 왼쪽, 혹은 오른쪽으로 배치된다. 아직 float 속성을 설정하지 않은 상황이라, 부모 안에 div 두 녀석이 고스란히 포장되어 있다. 부모 요소 아래에 여러 개의 형제 요... 멋쟁이사자처럼CSSCSS 뭐야 마진 어디갔어 : 마진 겹침 현상 마진(margin)이란, 요소 바깥 네 방향의 여백 영역을 설정하는 css 속성이다. 이러한 현상을 마진 겹침 현상(margin collapsing)이라고 한다. 1. 형제 요소 간의 상하단 마진 겹침 2. 부모 자식 요소 간의 마진 겹침 반면, 부모 요소의 마진과 자식 요소의 마진이 병합되는 경우도 있다. 부모 요소 안에서 자식 요소에 margin을 주면 1번에서의 예시와 같이 숫자 8 모... 멋쟁이사자처럼멋쟁이사자처럼 [멋쟁이사자처럼 FE 스쿨 2기] 4월 6일 과제 풀이 : 인접 형제 결합자(+) 오늘 멋쟁이사자처럼에서는 주요 CSS Selector들에 대해서 알아보았다. Universal Selector (*) Type Selector ([attr="value"]) Class Selector (.class) 등의 Selector들로 요소를 선택하며, 콤마(,)로 선택자들을 연결하여 일치하는 모든 요소를 선택하는 선택자 목록(Selector list)을 이용해 중복되는 코드를 줄일 수... 멋쟁이사자처럼CSSCSS 멋쟁이사자처럼 FE SCHOOL 2기: 2주까지의 회고 아침 9시부터 6시, 실시간 수업이 끝나고 저녁을 먹으면 같은 클래스 사람들과 게더타운에 모여 그 날 과제를 하거나, 오늘 배운 내용을 정리한 블로그 글을 공유한다. 시간 가는 줄 모르고 과제 하고, 정리하고, 하기 싫을 때는 또 마이크를 키고 잡담을 하다 보면 어느샌가 자정이 되어 있다. 하지만 그런 것 보다도 이 짧은 시간에 내 마인드셋이 바뀌었고 그게 정말 좋았다. 잘 쓴 글을 비교군으... 멋쟁이사자처럼회고록멋쟁이사자처럼 [TIL] CSS_빔캠프 특강 (이종찬 강사님) width: 800px; 너비가 줄어든 것을 볼 수 있다. 브라우저가 디폴트로 갖고있는 스타일시트를 알 수 있다. width : auto; > css > background-color 검색 즉, div 안에 있는 컨텐츠의 높이만큼 차지한다. padding : div 전체 크기가 커지게 된다. border: 전체 크기가 커지게 된다. width auto로 하면 옆 공간을 다 쓰게 된다. mar... 프론트엔드스쿨개발일지멋쟁이사자처럼빔캠프TILhtmlCSSCSS TIL13 CSS display:flex 를 사용하려면, container와 같은 묶어주는 상위개념이 있어야한다! line-height 와 heiht의 크기를 같게주면, 중앙정렬이된다! line-height가 제일 이해가 되지 않았다. 멋사 동기님들의 도움으로 바로 이해가되었다!! 손수 저렇게 그림을 그려주시며 이해를 도와주셨다 😎 1. 저 box크기가 100px이고 원래 line-height가 10px이라고... 멋쟁이사자처럼TIL프론트엔드스쿨2기TIL 멋쟁이사자처럼 프론트엔드 스쿨 2기 13_Day 1. flex 2. grid 1. flex flex-grow는 flex 아이템의 여백 비율을 정할 수 있는 속성입니다. flex-shrink 는 flex 아이템의 줄어드는 비율을 정할 수 있는 속성입니다. flex-basis 는 flex 아이템의 크기를 정합니다. 위에 2행에 있는 사진처럼 중심축 기준으로 grow 비율을 뺀 너비가 basis 사이즈입니다. 맨 오른쪽에 있는 사진처럼 flex... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS [HTML/CSS] Day18. Position 🪑 이미지를 보면 가장 밑에 normal flow, 중간 쯤 float, 가장 위의 position이 자리잡고 있다. 위의 코드의 결과는 block level Elements은 전체 영역을 다 차지하고, 바로 아래에 inline Elements 2개가 나란히 나열되는 것이 normal flow라고 생각하면 된다. 하지만 float과 position 속성을 사용하면 normal flow보다 더 높... 멋쟁이사자처럼제주코딩베이스캠프htmlcss프론트엔드htmlcss [HTML/CSS] Day19. Flex(1) 😎 flex-direction은 Main-axis의 방향만 정할 뿐 Cross-axis에는 변화를 주지 않는다. 또한 만약 컨테이너 요소 내부에 있는 자식요소에게 width를 주지 않으면 아래의 이미지처럼 한 줄의 영역을 모두 차지하게 되는 특징이 있다. flex-direction의 기본값인 row가 적용되었을 때는 column과 반대로 한 줄 영역을 차지하지 않고 콘텐츠의 영역만큼만 차지하고 ... 멋쟁이사자처럼제주코딩베이스캠프htmlcss프론트엔드htmlcss 멋쟁이사자처럼 프론트엔드 스쿨 2기 11_Day 첫 번째 사진처럼 자식 요소들이 전부 float 속성일 경우, 부모는 자식 요소들의 높이를 인식 할 수 없다! ✍ 참고 내용: 형제 요소 모두 float이 되어 있다면, 1번 부모가 자식 요소의 높이를 인식할 수 없는 문제가 발생합니다. 형제 요소 중에 float으로 지정된 요소가 있고 없는 요소가 있다면 2번 문제가 발생합니다. 부모 요소에 overflow:hidden;을 추가. 부모 요소... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS 1 - Restart 오늘부터 새롭게 시작되는 만큼, TIL을 하루도 빠짐없이 작성하는것이 새로운 목표이다. 오늘은 간단한 OT, 팀빌딩, 이두희님의 특별 강연, 코드라이언 [일단 만드는 HTML/CSS]강의를 수강하였다. 우리팀은 6명 모두 비전공자들로 구성되어 팀명은 All Be 전공자! 모두 전공자수준이 되자 라는 의미도 같이되어있다 😋 Firebase 프론트엔드 동작시키기위한 최고의 서포터 9to6는 점프... 멋쟁이사자처럼프론트엔드스쿨TILTIL 이전 기사 보기