프론트엔드스쿨2기 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 TIL16-CSS 레고처럼 여러가지 모듈을 만들어서 조합하도록 하는 방법론 구조(structure)와 스킨의 분리 구조와 스킨을 구별하여 클래스 네이밍 하기! 콘텐츠의 스타일이 컨테이너에 종속되지 않도록함 (분리!) 구조 : width, height, padding, margi 등 레이아웃에 영향을 미치는 속성 스킨 : font관련속성, color, background, border 등 레이아웃에 영향을 미치... 멋쟁이사자처럼TIL프론트엔드스쿨2기TIL 14 - CSS (grid) grid는 flex와 비슷하다 flex와 비슷한점 : container에서 display:grid로 해주는것! grid에서 column 과 row 를 칸으로 계산한다는것이 매우 편하게하는 일이었다..!! 크기를 늘릴때에는 가로축이면 grid-column 으로 세로축이면 grid-row로..!!! 즉, flex는 1차원 적인 레이아웃을 잡을 때 (수평 1줄인 레이아웃을 잡을 때) 용이하고, g... 멋쟁이사자처럼TIL프론트엔드스쿨2기TIL TIL13 CSS display:flex 를 사용하려면, container와 같은 묶어주는 상위개념이 있어야한다! line-height 와 heiht의 크기를 같게주면, 중앙정렬이된다! line-height가 제일 이해가 되지 않았다. 멋사 동기님들의 도움으로 바로 이해가되었다!! 손수 저렇게 그림을 그려주시며 이해를 도와주셨다 😎 1. 저 box크기가 100px이고 원래 line-height가 10px이라고... 멋쟁이사자처럼TIL프론트엔드스쿨2기TIL TIL5(CSS)-veamcamp특강 CSS는 디테일이 아니라, 큼지막한 전체 구조를 보는것이 중요하다! css 책 추천 : css설계가이드 CSS는 스마트한 노가다다! 상속 : 원래 상속이 지원되는 속성은 초기화 해줄때 Inherit 키워드 즐겨쓰장 상속이 지원안되면 Initial 하는것 block level element 가운데정렬 : type selector는 css에서 초기화 해줄 때에만 사용하자! Q. width 100... CSSveamcamp멋쟁이사자처럼프론트엔드스쿨2기TILCSS 멋쟁이사자처럼 프론트엔드스쿨 2기 TIL (4월 4일) 하지만, 피드백을 더 자주, 더 빨리, 더 꾸준히 하게 되면 공부를 하는 데도 성장체감을 느낄 수 있고 목표를 이루는데 좋은 과정이 될 것이다. 다른 수강생분들이 피드백을 받는 것을 보고 tag를 어떻게 하면 적절히 사용할 수 있을 지, 내가 사용한 tag가 해당 content에 적절한 tag인지에 대해 복기할 수 있었다. <article>은 어떤 페이지에 넣어도 어색하지 않은 요소 EX) ... LIKELION프론트엔드form멋쟁이사자처럼프론트엔드스쿨2기TIL회고htmlLIKELION TIL6-HTML section vs div section : 구역의 주제가 명확할 때(section태그 안에는 heading태그를 사용해 줄 것) div : 디자인적으로 나뉘어있고 의미 구분이 어려울 때 구역의 주제가 명확하면 section, 디자인적으로 나뉘어있고 도저히 의미 구분이 어려우면 div... 단순히 input 태그를 설명하는 텍스트를 옆에 붙여 무엇을 입력해야 하는지 설명할 수 있겠지만, 시각... TIL프론트엔드스쿨2기멋쟁이사자처럼TIL
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 TIL16-CSS 레고처럼 여러가지 모듈을 만들어서 조합하도록 하는 방법론 구조(structure)와 스킨의 분리 구조와 스킨을 구별하여 클래스 네이밍 하기! 콘텐츠의 스타일이 컨테이너에 종속되지 않도록함 (분리!) 구조 : width, height, padding, margi 등 레이아웃에 영향을 미치는 속성 스킨 : font관련속성, color, background, border 등 레이아웃에 영향을 미치... 멋쟁이사자처럼TIL프론트엔드스쿨2기TIL 14 - CSS (grid) grid는 flex와 비슷하다 flex와 비슷한점 : container에서 display:grid로 해주는것! grid에서 column 과 row 를 칸으로 계산한다는것이 매우 편하게하는 일이었다..!! 크기를 늘릴때에는 가로축이면 grid-column 으로 세로축이면 grid-row로..!!! 즉, flex는 1차원 적인 레이아웃을 잡을 때 (수평 1줄인 레이아웃을 잡을 때) 용이하고, g... 멋쟁이사자처럼TIL프론트엔드스쿨2기TIL TIL13 CSS display:flex 를 사용하려면, container와 같은 묶어주는 상위개념이 있어야한다! line-height 와 heiht의 크기를 같게주면, 중앙정렬이된다! line-height가 제일 이해가 되지 않았다. 멋사 동기님들의 도움으로 바로 이해가되었다!! 손수 저렇게 그림을 그려주시며 이해를 도와주셨다 😎 1. 저 box크기가 100px이고 원래 line-height가 10px이라고... 멋쟁이사자처럼TIL프론트엔드스쿨2기TIL TIL5(CSS)-veamcamp특강 CSS는 디테일이 아니라, 큼지막한 전체 구조를 보는것이 중요하다! css 책 추천 : css설계가이드 CSS는 스마트한 노가다다! 상속 : 원래 상속이 지원되는 속성은 초기화 해줄때 Inherit 키워드 즐겨쓰장 상속이 지원안되면 Initial 하는것 block level element 가운데정렬 : type selector는 css에서 초기화 해줄 때에만 사용하자! Q. width 100... CSSveamcamp멋쟁이사자처럼프론트엔드스쿨2기TILCSS 멋쟁이사자처럼 프론트엔드스쿨 2기 TIL (4월 4일) 하지만, 피드백을 더 자주, 더 빨리, 더 꾸준히 하게 되면 공부를 하는 데도 성장체감을 느낄 수 있고 목표를 이루는데 좋은 과정이 될 것이다. 다른 수강생분들이 피드백을 받는 것을 보고 tag를 어떻게 하면 적절히 사용할 수 있을 지, 내가 사용한 tag가 해당 content에 적절한 tag인지에 대해 복기할 수 있었다. <article>은 어떤 페이지에 넣어도 어색하지 않은 요소 EX) ... LIKELION프론트엔드form멋쟁이사자처럼프론트엔드스쿨2기TIL회고htmlLIKELION TIL6-HTML section vs div section : 구역의 주제가 명확할 때(section태그 안에는 heading태그를 사용해 줄 것) div : 디자인적으로 나뉘어있고 의미 구분이 어려울 때 구역의 주제가 명확하면 section, 디자인적으로 나뉘어있고 도저히 의미 구분이 어려우면 div... 단순히 input 태그를 설명하는 텍스트를 옆에 붙여 무엇을 입력해야 하는지 설명할 수 있겠지만, 시각... TIL프론트엔드스쿨2기멋쟁이사자처럼TIL