프론트엔드스쿨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 (3월 29일) URL, IP, PORT 정리 HTML Living Standard란? HTML/CSS HTML의 정의 HTML(뼈대) + CSS(살) + JavaScript(근육) 2. URL, IP, PORT(과제 2) 프로토콜 종류, 자원이 있는 IP 주소, 도메인 주소, 포트 주소, 자원 위치로 구성되어 있어 3. HTML Living Standard(과제 1) XHTML과 HTML living st... LIKELION프론트엔드멋쟁이사자처럼프론트엔드스쿨2기TILhtmlLIKELION 멋쟁이사자처럼 프론트엔드스쿨 2기 TIL (3월 31일) 회원가입 form 만들기 Git: 버전 관리 도구 을 통해 모든 파일을 대기 시킬 수 있음. commit: 대기하고 있는 코드 보낼 준비를 완료한 과정. push: 준비를 완료한 코드를 repository에 업로드. 무시할 파일을 기입해 해당 파일을 버전 관리에서 제외함. src 속성으로 불러올 HTML 링크를 설정할 수 있으며 보통 youtube 영상을 불러올 때 많이 사용. youtube... LIKELIONgithub프론트엔드멋쟁이사자처럼프론트엔드스쿨2기TILhtmlLIKELION TIL4-HTML, Git git add . git commit -m "커밋메시지" git push 🌱 1일 1커밋!! <iframe> iframe은 현재 HTML 페이지에서 또 다른 HTML 페이지를 보여주고 싶을 때 사용한다. iframe은 width 혹은 height 속성으로 크기를 조절한다. *보통 youtube 영상을 불러올 때 사용! ❕ Why? 이러한 특징은 <iframe>, <audio>, <video>... 멋쟁이사자처럼프론트엔드스쿨2기TILTIL 멋쟁이사자처럼 프론트엔드스쿨 2기 TIL (4월 4일) 하지만, 피드백을 더 자주, 더 빨리, 더 꾸준히 하게 되면 공부를 하는 데도 성장체감을 느낄 수 있고 목표를 이루는데 좋은 과정이 될 것이다. 다른 수강생분들이 피드백을 받는 것을 보고 tag를 어떻게 하면 적절히 사용할 수 있을 지, 내가 사용한 tag가 해당 content에 적절한 tag인지에 대해 복기할 수 있었다. <article>은 어떤 페이지에 넣어도 어색하지 않은 요소 EX) ... LIKELION프론트엔드form멋쟁이사자처럼프론트엔드스쿨2기TIL회고htmlLIKELION 8 - CSS START!! 14px yellow 에 해당하는 부분을 CSS에서는 값(value)라고 부름 block width, height 속성을 사용하여 스타일을 컨트롤 할 수 있음 패딩과 마진, 보더 속성을 사용하여 스타일을 컨트롤 할 수 있으며 해당 속성들이 다른 요소들을 밀어냄 inline-block 패딩과 , 보더 속성을 사용할 수 있지만 마진 속성은 좌우만 조절할 수 있다. 대표적 inline 요소 : s... 멋쟁이사자처럼프론트엔드스쿨2기TILTIL
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 (3월 29일) URL, IP, PORT 정리 HTML Living Standard란? HTML/CSS HTML의 정의 HTML(뼈대) + CSS(살) + JavaScript(근육) 2. URL, IP, PORT(과제 2) 프로토콜 종류, 자원이 있는 IP 주소, 도메인 주소, 포트 주소, 자원 위치로 구성되어 있어 3. HTML Living Standard(과제 1) XHTML과 HTML living st... LIKELION프론트엔드멋쟁이사자처럼프론트엔드스쿨2기TILhtmlLIKELION 멋쟁이사자처럼 프론트엔드스쿨 2기 TIL (3월 31일) 회원가입 form 만들기 Git: 버전 관리 도구 을 통해 모든 파일을 대기 시킬 수 있음. commit: 대기하고 있는 코드 보낼 준비를 완료한 과정. push: 준비를 완료한 코드를 repository에 업로드. 무시할 파일을 기입해 해당 파일을 버전 관리에서 제외함. src 속성으로 불러올 HTML 링크를 설정할 수 있으며 보통 youtube 영상을 불러올 때 많이 사용. youtube... LIKELIONgithub프론트엔드멋쟁이사자처럼프론트엔드스쿨2기TILhtmlLIKELION TIL4-HTML, Git git add . git commit -m "커밋메시지" git push 🌱 1일 1커밋!! <iframe> iframe은 현재 HTML 페이지에서 또 다른 HTML 페이지를 보여주고 싶을 때 사용한다. iframe은 width 혹은 height 속성으로 크기를 조절한다. *보통 youtube 영상을 불러올 때 사용! ❕ Why? 이러한 특징은 <iframe>, <audio>, <video>... 멋쟁이사자처럼프론트엔드스쿨2기TILTIL 멋쟁이사자처럼 프론트엔드스쿨 2기 TIL (4월 4일) 하지만, 피드백을 더 자주, 더 빨리, 더 꾸준히 하게 되면 공부를 하는 데도 성장체감을 느낄 수 있고 목표를 이루는데 좋은 과정이 될 것이다. 다른 수강생분들이 피드백을 받는 것을 보고 tag를 어떻게 하면 적절히 사용할 수 있을 지, 내가 사용한 tag가 해당 content에 적절한 tag인지에 대해 복기할 수 있었다. <article>은 어떤 페이지에 넣어도 어색하지 않은 요소 EX) ... LIKELION프론트엔드form멋쟁이사자처럼프론트엔드스쿨2기TIL회고htmlLIKELION 8 - CSS START!! 14px yellow 에 해당하는 부분을 CSS에서는 값(value)라고 부름 block width, height 속성을 사용하여 스타일을 컨트롤 할 수 있음 패딩과 마진, 보더 속성을 사용하여 스타일을 컨트롤 할 수 있으며 해당 속성들이 다른 요소들을 밀어냄 inline-block 패딩과 , 보더 속성을 사용할 수 있지만 마진 속성은 좌우만 조절할 수 있다. 대표적 inline 요소 : s... 멋쟁이사자처럼프론트엔드스쿨2기TILTIL