프론트엔드스쿨 [TIL] CSS_빔캠프 특강 (이종찬 강사님) width: 800px; 너비가 줄어든 것을 볼 수 있다. 브라우저가 디폴트로 갖고있는 스타일시트를 알 수 있다. width : auto; > css > background-color 검색 즉, div 안에 있는 컨텐츠의 높이만큼 차지한다. padding : div 전체 크기가 커지게 된다. border: 전체 크기가 커지게 된다. width auto로 하면 옆 공간을 다 쓰게 된다. mar... 프론트엔드스쿨개발일지멋쟁이사자처럼빔캠프TILhtmlCSSCSS 1 - Restart 오늘부터 새롭게 시작되는 만큼, TIL을 하루도 빠짐없이 작성하는것이 새로운 목표이다. 오늘은 간단한 OT, 팀빌딩, 이두희님의 특별 강연, 코드라이언 [일단 만드는 HTML/CSS]강의를 수강하였다. 우리팀은 6명 모두 비전공자들로 구성되어 팀명은 All Be 전공자! 모두 전공자수준이 되자 라는 의미도 같이되어있다 😋 Firebase 프론트엔드 동작시키기위한 최고의 서포터 9to6는 점프... 멋쟁이사자처럼프론트엔드스쿨TILTIL [HTML/CSS] 프론트엔드 스쿨 1일차 📌 중앙 정렬 이렇게도 사용할 수 있다는 법을 배웠다. 📌 box-shadow텍스트 이 부분은 부끄럽지만 자주 사용되는 속성임에도 쓸 때마다 헷갈려서 계속 썼던 코드 복붙하거나 어물쩡 넘어갔던 기억이..... 이번 기회에 여러 숫자로 실험해보고 다시 공부해볼 수 있었다. box-shadow: {inset offset-x offset-y blur-radius spread-radius color... CSS프론트엔드스쿨htmlTILCSS [TIL] HTML_Embedded Content <img src="경로"> 이 경우 스크린리더에서 "파일명"과 "라벨이 없는 이미지"라고 읽어준다. 따라서 <img src="경로" alt="">라고 공백으로 해주면 스크린리더에서 생략하게된다! srcset 속성을 사용하면 여러 해상도에 대응하여 브라우저가 알아서 이미지를 선택하면서 최상의 이미지를 로딩하게 된다. 브라우저는 우리가 제공한 이미지의 원본 사이즈와 뷰포트에 따른 이미지의 사이즈... 멋쟁이사자처럼프론트엔드스쿨개발일지TILhtmlTIL [TIL] HTML_Embedded Content_2 : 현재 HTML 페이지에서 또 다른 HTML 페이지를 보여주고 싶을 때 사용! width 혹은 height 속성 : 크기를 조절 allow : iframe 에서 허용할 기능들을 지정 allowfullscreen : 전체화면을 지원 ex. 백그라운드 배경이 영상인 경우! < html 실습 > 'frontendschool2' repository 만들기 add file > upload file ... 멋쟁이사자처럼프론트엔드스쿨개발일지TILhtmlTIL [TIL] Git 시작하기 window 사용자는 git 설치하기! % git pull % git add . % git commit -m "메세지" % git push 내 컴퓨터 파일을 커밋해서 git으로 보내고 push해서 github으로 보내기! git : 분산 버전 관리 툴 ✅ 맥 git 설치 확인 ✅ git version 확인 ✅ git 사용을 위한 사용자 설정 ✅ git 사용자 확인 원하는 장소로 이동 후, 만... 멋쟁이사자처럼프론트엔드스쿨gitTILTIL [TIL] HTML_Text-level Semantics 텍스트 레벨은 사용한 콘텐츠 영역만큼만 그 크기를 차지하고 있다! <br> : 줄바꿈을 위한 태그 : 링크(하이퍼 텍스트)를 만들때 사용한다. <a> 앵커 태그 안에 이동할 페이지의 주소를 적어주면 된다. 앵커 태그는 sections, grouping content 요소를 자식으로 하는 것이 가능하다. 하지만, 앵커 태그 안에 앵커 요소를 넣거나, <button>과 같은 사용자와 인터렉션이 ... 멋쟁이사자처럼프론트엔드스쿨개발일지TILhtmlTIL [CSS] 프론트엔드 스쿨 css 적용 우선순위 CSS의 C(Cascading: 폭포와 같이 위에서 아래로 흐르며 적용되는 방법)의 의미에서 알 수 있듯, 후에 오는 속성이 적용된다는 점은 알고있었지만 구체적인 적용 순서는 항상 헷갈렸는데 이번 기회에 새로 정리를 해보려고 한다. 1. 속성 값 뒤에 !important 2. 인라인 스타일 (HTML 요소 내부의 style 속성) : 1000점 3. id 선택자 : 100점 4. class,... CSS프론트엔드스쿨TILCSS [HTML/CSS] 인라인 요소와 블록 요소 CSS에는 크게 두 가지 박스 요소가 있다 : block 요소와 inline 요소 전후 줄바꿈이 발생하여 다른 요소를 다른 줄로 밀어냄 한 줄 100% 사용. 사용하지 못하는 공간은 margin width, height, padding, margin, border 모두 사용 가능 위의 속성이 다른 요소를 밀어냄 블록 요소 안에 블럭 요소 사용 가능 컨텐츠 크기만큼만 차지 width, heig... CSS프론트엔드스쿨htmlTILCSS [CSS] 마진 병합 현상 CSS 작업을 하다 보면 UI가 의도치 않게 구현되는 경우가 있곤 하는데, 지금까지 가장 큰 이유는 브라우저마다 디폴트로 설정된 스타일(이는 reset css로 해결) 혹은 마진 병합 현상 때문이었다. ❓ 마진 병합(Margin Collapsing)이란? 인접한 블럭 요소의 상하 마진값이 합쳐져 더 큰 마진으로 병합되는 현상 ↑ 두 박스에 모두 margin 값 30px을 줬기에 두 블럭 사이... CSS프론트엔드스쿨TILCSS [HTML] 프론트엔드 스쿨 Semantic Markup 거의 매 수업마다 강조해주시는 semantic tag의 중요성... (이제 꾸준한 연습만이 남은 것 같다) 🔎 semantic tag란? semantic : 의미론적인 의미에 맞는 HTML 태그를 사용함으로써 문서를 구조화 해주고 기계와 사람이 이해하기 쉬운 코드를 만드는 것 semantic markup을 지향해야 하는 이유는 다음과 같다. 1. 기계적 측면 2. 유지보수 측면... TILhtml프론트엔드스쿨TIL [HTML/CSS] 2일차 HTML 미션 1일 1커밋(양도 양이고 질도 질이다) 양이 많아지면 많아질 수록 질도 올라간다고 생각 보안 지식 필수 해킹당하는 사이트 부지기수 VSCode 원하는 폴더에서 바로 열기 원하는 폴더에서 gitbash를 켜고 “code .”을 입력하면 바로 오픈! TextEditor 설명 영상 !+ : html 전체적인 틀 자동완성 crtl+p : 명령팔레트 >snippets html.json <titl... 프론트엔드스쿨htmlcsshtmlcss TIL #4 | CSS 미디어 쿼리 우선 미디어 쿼리는 특정 조건(단말기의 유형, 화면 해상도, 뷰포트 너비 등)에서 특정 스타일을 적용되도록 만들어주는 기능이다. 가장 자주 사용하는 이유는 사용자의 스크린의 크기에 맞춰서 그에 최적화된 화면을 보여주기위해서 사용한다. 미디어 쿼리를 이용하면 위처럼 화면의 넓이 값에 따라 css에 변화를 줄 수 있다. 사용방법은 매우 간단하지만 반응형 웹페이지를 만들 떄 정말로 도움이 많이 되... TIL미디어 쿼리프론트엔드스쿨TIL
[TIL] CSS_빔캠프 특강 (이종찬 강사님) width: 800px; 너비가 줄어든 것을 볼 수 있다. 브라우저가 디폴트로 갖고있는 스타일시트를 알 수 있다. width : auto; > css > background-color 검색 즉, div 안에 있는 컨텐츠의 높이만큼 차지한다. padding : div 전체 크기가 커지게 된다. border: 전체 크기가 커지게 된다. width auto로 하면 옆 공간을 다 쓰게 된다. mar... 프론트엔드스쿨개발일지멋쟁이사자처럼빔캠프TILhtmlCSSCSS 1 - Restart 오늘부터 새롭게 시작되는 만큼, TIL을 하루도 빠짐없이 작성하는것이 새로운 목표이다. 오늘은 간단한 OT, 팀빌딩, 이두희님의 특별 강연, 코드라이언 [일단 만드는 HTML/CSS]강의를 수강하였다. 우리팀은 6명 모두 비전공자들로 구성되어 팀명은 All Be 전공자! 모두 전공자수준이 되자 라는 의미도 같이되어있다 😋 Firebase 프론트엔드 동작시키기위한 최고의 서포터 9to6는 점프... 멋쟁이사자처럼프론트엔드스쿨TILTIL [HTML/CSS] 프론트엔드 스쿨 1일차 📌 중앙 정렬 이렇게도 사용할 수 있다는 법을 배웠다. 📌 box-shadow텍스트 이 부분은 부끄럽지만 자주 사용되는 속성임에도 쓸 때마다 헷갈려서 계속 썼던 코드 복붙하거나 어물쩡 넘어갔던 기억이..... 이번 기회에 여러 숫자로 실험해보고 다시 공부해볼 수 있었다. box-shadow: {inset offset-x offset-y blur-radius spread-radius color... CSS프론트엔드스쿨htmlTILCSS [TIL] HTML_Embedded Content <img src="경로"> 이 경우 스크린리더에서 "파일명"과 "라벨이 없는 이미지"라고 읽어준다. 따라서 <img src="경로" alt="">라고 공백으로 해주면 스크린리더에서 생략하게된다! srcset 속성을 사용하면 여러 해상도에 대응하여 브라우저가 알아서 이미지를 선택하면서 최상의 이미지를 로딩하게 된다. 브라우저는 우리가 제공한 이미지의 원본 사이즈와 뷰포트에 따른 이미지의 사이즈... 멋쟁이사자처럼프론트엔드스쿨개발일지TILhtmlTIL [TIL] HTML_Embedded Content_2 : 현재 HTML 페이지에서 또 다른 HTML 페이지를 보여주고 싶을 때 사용! width 혹은 height 속성 : 크기를 조절 allow : iframe 에서 허용할 기능들을 지정 allowfullscreen : 전체화면을 지원 ex. 백그라운드 배경이 영상인 경우! < html 실습 > 'frontendschool2' repository 만들기 add file > upload file ... 멋쟁이사자처럼프론트엔드스쿨개발일지TILhtmlTIL [TIL] Git 시작하기 window 사용자는 git 설치하기! % git pull % git add . % git commit -m "메세지" % git push 내 컴퓨터 파일을 커밋해서 git으로 보내고 push해서 github으로 보내기! git : 분산 버전 관리 툴 ✅ 맥 git 설치 확인 ✅ git version 확인 ✅ git 사용을 위한 사용자 설정 ✅ git 사용자 확인 원하는 장소로 이동 후, 만... 멋쟁이사자처럼프론트엔드스쿨gitTILTIL [TIL] HTML_Text-level Semantics 텍스트 레벨은 사용한 콘텐츠 영역만큼만 그 크기를 차지하고 있다! <br> : 줄바꿈을 위한 태그 : 링크(하이퍼 텍스트)를 만들때 사용한다. <a> 앵커 태그 안에 이동할 페이지의 주소를 적어주면 된다. 앵커 태그는 sections, grouping content 요소를 자식으로 하는 것이 가능하다. 하지만, 앵커 태그 안에 앵커 요소를 넣거나, <button>과 같은 사용자와 인터렉션이 ... 멋쟁이사자처럼프론트엔드스쿨개발일지TILhtmlTIL [CSS] 프론트엔드 스쿨 css 적용 우선순위 CSS의 C(Cascading: 폭포와 같이 위에서 아래로 흐르며 적용되는 방법)의 의미에서 알 수 있듯, 후에 오는 속성이 적용된다는 점은 알고있었지만 구체적인 적용 순서는 항상 헷갈렸는데 이번 기회에 새로 정리를 해보려고 한다. 1. 속성 값 뒤에 !important 2. 인라인 스타일 (HTML 요소 내부의 style 속성) : 1000점 3. id 선택자 : 100점 4. class,... CSS프론트엔드스쿨TILCSS [HTML/CSS] 인라인 요소와 블록 요소 CSS에는 크게 두 가지 박스 요소가 있다 : block 요소와 inline 요소 전후 줄바꿈이 발생하여 다른 요소를 다른 줄로 밀어냄 한 줄 100% 사용. 사용하지 못하는 공간은 margin width, height, padding, margin, border 모두 사용 가능 위의 속성이 다른 요소를 밀어냄 블록 요소 안에 블럭 요소 사용 가능 컨텐츠 크기만큼만 차지 width, heig... CSS프론트엔드스쿨htmlTILCSS [CSS] 마진 병합 현상 CSS 작업을 하다 보면 UI가 의도치 않게 구현되는 경우가 있곤 하는데, 지금까지 가장 큰 이유는 브라우저마다 디폴트로 설정된 스타일(이는 reset css로 해결) 혹은 마진 병합 현상 때문이었다. ❓ 마진 병합(Margin Collapsing)이란? 인접한 블럭 요소의 상하 마진값이 합쳐져 더 큰 마진으로 병합되는 현상 ↑ 두 박스에 모두 margin 값 30px을 줬기에 두 블럭 사이... CSS프론트엔드스쿨TILCSS [HTML] 프론트엔드 스쿨 Semantic Markup 거의 매 수업마다 강조해주시는 semantic tag의 중요성... (이제 꾸준한 연습만이 남은 것 같다) 🔎 semantic tag란? semantic : 의미론적인 의미에 맞는 HTML 태그를 사용함으로써 문서를 구조화 해주고 기계와 사람이 이해하기 쉬운 코드를 만드는 것 semantic markup을 지향해야 하는 이유는 다음과 같다. 1. 기계적 측면 2. 유지보수 측면... TILhtml프론트엔드스쿨TIL [HTML/CSS] 2일차 HTML 미션 1일 1커밋(양도 양이고 질도 질이다) 양이 많아지면 많아질 수록 질도 올라간다고 생각 보안 지식 필수 해킹당하는 사이트 부지기수 VSCode 원하는 폴더에서 바로 열기 원하는 폴더에서 gitbash를 켜고 “code .”을 입력하면 바로 오픈! TextEditor 설명 영상 !+ : html 전체적인 틀 자동완성 crtl+p : 명령팔레트 >snippets html.json <titl... 프론트엔드스쿨htmlcsshtmlcss TIL #4 | CSS 미디어 쿼리 우선 미디어 쿼리는 특정 조건(단말기의 유형, 화면 해상도, 뷰포트 너비 등)에서 특정 스타일을 적용되도록 만들어주는 기능이다. 가장 자주 사용하는 이유는 사용자의 스크린의 크기에 맞춰서 그에 최적화된 화면을 보여주기위해서 사용한다. 미디어 쿼리를 이용하면 위처럼 화면의 넓이 값에 따라 css에 변화를 줄 수 있다. 사용방법은 매우 간단하지만 반응형 웹페이지를 만들 떄 정말로 도움이 많이 되... TIL미디어 쿼리프론트엔드스쿨TIL