여기저기 이것저것

로그인 화면의 로그인박스를 화면 중앙에 배치하고 싶은데, flex와 gird를 이용하면 쉽게 해결할 수 있다. 부모엘리먼트를 flex나 gird로 설정하면 되고, min-height를 100vh를 하면 된다. min-height를 넣지 않을 경우 컨텐츠 높이만큼 되기 때문에 수평 가운데 정렬처럼 느낄 수 있다. flex .wrapper { display: flex; justify-content: center; align-items: center; min-height: 100vh; } grid .wrapper { display: grid; place-items: center; min-height: 100vh; }

웹개발을 하다보면 이미지, 아이콘들이 많이 필요한데 유용한 사이트이다. https://www.flaticon.com/ Free Icons and Stickers - Millions of images to download Download Free Icons and Stickers for your projects. Images made by and for designers in PNG, SVG, EPS, PSD and CSS formats www.flaticon.com

영어의 경우 단어단위로 줄바꿈이 되는 것을 알 수가 있는데, 한글의 경우는 단어단위가 아닌 글자단위로 줄바꿈이 되고 있다. 이때 word-break를 keep-all로 넣어주면 한글도 영어처럼 단어단위로 줄바꿈 되는것을 확인할 수가 있다. 더 자세한 사항은 아래를 참조하면 좋다. https://developer.mozilla.org/ko/docs/Web/CSS/word-break word-break - CSS: Cascading Style Sheets | MDN CSS word-break 속성은 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정합니다. developer.mozilla.org

1. https://fonts.google.com/ 로 이동 후 필요한 폰트를 선택한다 Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 필요한 폰트 굵기를 클릭한다. 3. 오른쪽에 나온 스크립트를 카피하여 프로젝트에 사용한다.

REST Client 1. 파일확장자는 http로 만든다 2. ### 입력 후 3. 호출방법 주소 프로토콜로 입력하고 4. Send Request를 누른다 ex) ### GET http://www.naver.com HTTP/1.1 ### GET http://www.daum.net HTTP/1.1 테스트 할때 엄청 유용함.

https://cdnjs.com/ cdnjs - The #1 free and open source CDN built to make life easier for developers Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and easier to load library fil cdnjs.com

네이버에서 이것저것 검색하다가 우연찮게 본 포스팅글인데 매우 유용한 듯. 브라우저 렌더링 시점(async, defer) : 네이버 블로그 (naver.com) 브라우저 렌더링 시점(async, defer) 1. 브라우저 렌더링 주요 이벤트 ① domLoading: 브라우저가 처음 수신한 HTML 문서 파싱을 시작하려... blog.naver.com Analyzing Critical Rendering Path Performance (web.dev) Analyzing Critical Rendering Path Performance Learn to identify and resolve critical rendering path performance bottlenecks. web.dev Web Club :: 브..

인라인(Inline) & 블록(Block) 화면에 출력되는 특성. 인라인(Inline) = 글자 , 왼쪽에서 오른쪽으로 수평으로 쌓임. = span 태그는 글자로 글자로 취급한다. = 콘텐츠의 크키만듬 자동으로 줄어준다.(높이,너비) = 글자는 가로사이즈와 세로 사이즈를 지정할 수 없다. height, width 안먹음. = 여백(padding, margin)의 경우에도 좌우로만 가능하고 위아래로는 불가능하다. = 인라인요소 안에는 블록요소를 담을 수 없고, 인라인 요소는 담을 수 있다. cf) span, img, a, label 블록(Block) = 상자, 위에서 아래로 수직으로 쌓임 = 대표적인 div 태그. = 부모 요소의 크기만큼 가로 너비가 자동으로 늘어남. 세로 요소는 인라인처럼 자동으로 맞춤..

reset-css 웹을 볼 수 있는 브라우저가 많고, 기본적인 셋팅들도 조금씩 다르기 때문에 크로스브라우징을 위해서 reset css를 적용하면 좋다. reset css cdn이라고 검색하면 cdn을 제공하는 사이트가 나온다. 위의 화면이 나오면 reset.min.css의 오른쪽 파일버튼을 눌러서 copy HTML를 누른 후, 작업하고 있는 html header영역에 ctrl + v하기!

프론트 개발할 때 유용한 사이트 https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 프로젝트를 생성하고 파일을 따로 저장하지 않고, 웹상에서 바로 확인가능.