전체 글
-
[Font Preload]Font를 Preload 하는 방법CSS3 2023. 11. 19. 15:48
Font Preload란? 웹 폰트의 로딩 속도를 향상시키기 위한 웹 성능 최적화 기술입니다. 로컬 폰트는 사용자의 기기에 이미 다운되어 있는 폰트를 사용하기 때문에 로딩 자체의 속도가 빠르지만, 만약 해당 폰트가 사용자의 기기에 없다면 대체 폰트를 사용하게 되어 페이지의 디자인이 깨질 수 있다는 단점이 있다. 또한 웹 폰트는 서버에서 제공되는 폰트 파일을 사용해 렌더링 하기 때문에 로딩 시간이 있다. 그래서, 웹 폰트의 단점을 보안하기 위해 Font Preload의 방법을 사용하는데, preload 속성을 사용하여 폰트 파일을 미리 다운로드 받아 놓는다면, 사이트에 방문할 때마다 폰트를 렌더링 하지 않아도 되서 로딩 속도가 항상 되는 것이다 FOIT(Flash of Invisible Text)란? 웹 ..
-
HTML/CSSHTML 2023. 11. 15. 13:13
1. HTML/CSS를 공부하면서 느낀점 기존에 웹퍼블리셔를 준비하면서 HTML/CSS를 다시 한 번 복습을 하는 것이 였습니다 하지만 flex, grid 사용을 해본적이 없어서 잘 몰랐는데 이번 계기를 통해서 다시 배우게 되서 좋았습니다 또한, float에 대한 것도 잘 사용을 안하다보니깐. 다시 한 번 복습을 하는 계기가 되었습니다 사용을 안하게 되면 까먹게 되니깐 사용을 해야겠다 2. HTML/CSS를 공부하면서 어려웠던 개념과 이유 우선 grid가 어려웠던 개념입니다. 제가 평소에 해본 적도 없어서 그런거 같습니다. 레이아웃 배치를 각각의 영역을 지정하고, 그 지정한 영역을 부여하는 것이 어려웠습니다 3. 제로베이스 온라인 강의 중 가장 도움이 되었던 강의와 이유 여태까지 배운 강의들이 모두 도움..
-
제로베이스 3~5주차 학습 요약제로베이스스쿨 20기 2023. 11. 7. 16:23
3~5주 차 학습 요약 벌써 한달이라는 시간이 지났네요! 그 전과 마찬가지로 HTML, CSS, CS이론을 배우고 JavaScript를 배웠습니다 거기에 추가로 미션도 시작이 되었고, 코딩 테스트가 시작되었습니다 HTML/CSS HTML/CSS는 가장 많이 쓰면서 핵심적인 것 들을 다시 한번 배우는 시간이었고, 강사님들 따라면서 인스타그램 피드 레이아웃을 만드는 시간을 졌습니다 추가로 미션을 가져서 현재 다섯 가지 미션 중 3가지를 완성하였습니다 JavaScript 사실 제일 공부를 많이 해야 되는 부분이기도 하면서 가장 기대가 되는 부분이 바로 자바스크립트였는데, 자바스크립트를 드디어 배웠습니다! 나는 기본적으로 간단한 이벤트로 구현은 가능하지만 배열이나 객체를 다루는 일이 너무 어려웠는데 처음부터 다..
-
meta 태그 다른 설정 방법제로베이스스쿨 20기 2023. 11. 6. 16:05
메타 태그(Meta tag)란? 하이퍼텍스트(Hyper text) 생성 언어 HTML 문서의 맨 위쪽에 위치하는 태그(tag)로 HEAD 태그 사이 또는 뒤에 있어도 되지만 반드시 BODY 태그 앞쪽에 위치해야 한다. 브라우저와 검색 엔진을 사용할 수 있도록 웹 문서의 정보를 포함하고 있습니다 메타태그 속성에는 http-equiv, name, content 3가지 속성이 있습니다 http-equiv ="항목명" - 웹브라우저 서버에 명령을 내리는 속성 - name 속성을 대신해 사용할수 있음 - html 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되어있을 때만 의미를 가짐 - content 속성의 정보, 값을 위한 HTTP header를 제공 - html4에서는 문자 설정을 할 때 사용했지..
-
Safari 브라우저에서 크로스 브라우징 하기제로베이스스쿨 20기 2023. 11. 6. 15:44
우선 크로스 브라우징이란? 서로 다른 브라우저에서 웹 페이지가 동일한 방식으로 렌더링하는 작업과정을 의미한다. 크로스 브라우징을 고려하지 않으면 웹 브라우저마다 CSS 구현이 다르기 때문에 웹사이트가 브라우저마다 다르게 표시되는 문제가 생길 수 있습니다. 크로스 브라우징 시 예상되는 문제들 1. Box-model : Box-model은 웹 페이지 요소 크기와 간격을 지정하는 방법을 지정하는데, 브라우저 마다 box-model을 다리게 해석하여 레이아웃이 일치하지 않을 수 있다 2. Font : 브라우저마다 기본 글꼴 및 글꼴 크기가 다르므로 웹 사이트 전체 모양에 영향을 줄 수 있다 문제에 대한 해결책?(Safari 브라우저에서 크로스 브라우징하기) 1.can i use HTML/CSS/JS 사용 여부를..
-
제로베이스 프론트엔드 스쿨 20기 1개월차 후기제로베이스스쿨 20기 2023. 10. 31. 15:31
1. 서론 오늘은 제로베이스 프론트엔드 스쿨 1개월차 후기를 적어보려고 한다 내돈내산 내가 직접 경험하고 느꼈던 것을 그래도 글을 작성한 것입니다 2. 지난 한 달간 좋았던 점 1. html/ CSS에 대해서 확실히 개념을 강의로 시청 후 그 개념을 한 번 직접 만들어 보는데도 좋았습니다 2. 데일리 스크럼을 하면서 내가 진짜로 이 개념을 확실히 이해를 할 수 있는지 말을 하면서 하니깐 좋았습니다 3. Todo를 안 밀리게 내 자신한테 너무 만족스럽습니다!(내 자신을 격려하고 사랑하자!) 4. 코딩으로 받은 스트레스를 웨이트로 푼 것 3. 첫 날 작성한 학습 계획대로 공부하고 있는가? 부트 캠프를 하기저 전 자취생이라서 돈이 필요해서 알바라는 변수가 필요했는데 그 변수를 생각을 했었지만 진짜로 이렇게 공..
-
HTML5 시멘틱 태그와 웹 표준을 지키는 이유제로베이스스쿨 20기 2023. 10. 28. 13:10
HTML5 시멘틱 태그 HTML5가 HTML4와의 가장 큰 차이는 시멘틱 구조(의미론적인 구조)를 가지는 것이다. 의미론적인 구조를 통해서 여러 가지 장점을 가지게 된다 시멘틱 구조를 갖게 하는 요소로 시멘틱 태그들이 사용되는데 시멘틱 태그들의 예를 들면 는 non-sementic 태그 인데 div와 같이 레이아웃을 설정해주는 설정은 비슷하지만 , , , , 같은 태그들은 sementic 태그를 해당의미를 담아서 사용된다. 실제로 사용하면 외관상으로 동일하게 보이는데 굳이 의미를 부여하는 시멘틱 태그를 사용하는 이유는 아래의 이점이 있다. 1. 검색엔진 최적화(SEO)에 용의함 2. div로만 작성 했을 떄에 비해서 레이아웃 상의 태그들의 의미를 빠르게 파악할 수 있다 3. 가독성이 좋다 4. 코드의 구..
-
내가 가고 싶은 회사 / 회사를 선택하는 기준제로베이스스쿨 20기 2023. 10. 25. 22:45
1. 내가 성장할 수 있는 회사 신입 개발자이든 경력 개발자이든 꾸준한 성장이 가장 필요하다고 생각이듭니다 회사에서 하는 업무가 제한적이거나, 매일 같은 업무를 유지 보수하는 일만 한다면 큰 성장을 하기에는 힘들 것 같다는 생각이 들어서 신입이 당장 큰 프로젝트나 새로 들어가는 프로젝트에 참여하는 일이 극 소수겠지만 그래도 내가 업무를 하면서 감당할 능력이 생기고 연차가 쌓였을 때, 그 때 쌓인 영략에서 더 성장할 수 있는 기회가 주어지는 회사였으면 한다. 2. 좋은 동료들이 많은 회사 개발자는 협업을 하는 직군입니다. 하지만 협업을 할 때, '상대에 대한 존중이 없어 자기 주장만 내세우는 동료가 있다면 어떨까? 하는 생각을 했습니다. 그런 동료랑 일하면 벌써 부터 한숨이 나온다. 서로의 의견도 존중하고..