본문 바로가기

1주차

 (28)
<img> vs background-image 안녕하세요 ....? 🙄 웹 YB 김가현입니다. 웹 개발을 하다보면 이미지를 다루는 경우가 정말 많은데요 ..! 이 이미지를 업로드 하는 방식에는 두 가지가 있습니다.1. HTML에서 태그를 이용하는 방법2. CSS의 background-image를 이용하는 방법 혹시 이 두가지 방법의 차이점을 알고 계신가요 ?저는 주로 첫번째 방법을 주로 이용하는 것 같은데요 ..! 태그를 이용하는 것이 더 익숙해서 별 생각없이 해당 방식으로 이미지 마크업을 해온 것 같아요.  이번 글을 통해 두 방법의 차이점을 알아보고 앞으로는 상황에 맞는 방법을 선택해서 사용하고자 합니다 💪🏻 1. alt 속성의 유무첫번째는 alt 속성의 유무 입니다. 두 가지 경우의 문법을 살펴보면 태그에는 alt 속성이 존재하는 반면..
CSR vs SSR 차이 및 특징 ( + SPA, MPA ) 두가지를 비교하기 전에!먼저 SPA/MPA 의 차이점을 톺아보자 우리는 웹 애플리케이션을 개발한다고 하면 대부분 React, Angular, Vue와 같은 자바스크립트 기반 프레임워크를 사용해 SPA를 개발합니다.  🍀 SPA (Single Page Application) 여기서 SPA 란? SPA는 단일 페이지 애플리케이션으로, 하나의 HTML 페이지에서 모든 콘텐츠를 로드하고 페이지 간 이동 시 전체 페이지를 다시 로드하지 않고 필요한 부분만 업데이트하는 방식입니다. 초기 로딩 시 필요한 리소스를 한 번에 가져오며, 이후에는 JavaScript를 사용해 페이지를 동적으로 변경합니다.  🍀 MPA(Multi Page Application) MPA 란?MPA는 다중 페이지 애플리케이션으로, 각 페이지..
🌐WAI-ARIA : 웹 접근성을 높이는 필수 도구 안녕하세요! WEB OB 김채현입니다.이번에 html 태그를 작성하면서 웹 접근성에 관심이 생겨서 WAI-ARIA를 공부해봤습니다.🤗🤗 🤔 WAI-ARIA란?Web Accessibility Initiative - Accessible Rich Internet Applications WAI-ARIA는 W3C에서 웹 접근성을 담당하는 기관(WAI)가 제정한 RIA 환경의웹 접근성에 대한 표준 기술 규격으로 요소에 적용하여 추가 의미를 제공하고 접근성이 부족한 곳의 접근성을 개선할 수 있는 추가 HTML 속성 세트를 정의합니다.복잡한 웹 애플리케이션과 동적인 사용자 인터페이스(UI)에서 보조기술이 콘텐츠를 더 잘 이해할 수 있도록추가적인 의미(semantics)를 제공하는 것이 WAI-ARIA의 목표입니다..
transform은 왜 composite만 하는가? 왜 repaint와 reflow를 건너뛰는가? 웹파트 문성희입니다.들어가며1주차 세미나의 CSS강의에서 transform이 렌더링이 더 빠르다? 라는 심화 내용이 있었다.그리고 나는 왜 transform은 composite만 수행하고, reflow와 repaint는 건너뛰는지에 대한 의문이 생겨 이에 대해 알아보고자 한다. 웹 페이지를 렌더링하는 과정에서 transform 속성은 Reflow나 Repaint를 건너뛰고 Composite 단계에서만 처리된다. 이 특성 덕분에 transform은 성능 최적화에 매우 유용한 속성이라고 한다. 그렇다면, 왜 transform은 Reflow와 Repaint를 발생시키지 않는지를 알아보자.렌더링 엔진질문을 해결하기 위해서는 브라우저에 렌더링 과정에 대해 알아야 하는데 그전에 렌더링 엔진에 대해 먼저 알아보자.?..
💥SEO 검색엔진 최적화의 모든것 안녕하세요, 웹 파트 김한서입니다.SEO 검색엔진 최적화가 도대체 무엇인지, 왜 최적화를 해야하는지와 그 과정에 대해 알아보겠습니다.  💡 검색엔진 최적화(SEO)란?검색엔진은 사용자의 검색어에 가장 적합한 결과를 제공하는 것, 즉 컨텐츠에 랭킹을 매겨 상단 노출시켜주는 기능을 수행합니다.ex) 구글, 네이버 등SEO란, ‘Search Engine Optimization’의 약자로, 검색엔진 최적화, 즉 검색엔진에서 찾기 쉽도록 사이트를 개선하는 프로세스를 말합니다. 😮 왜 SEO를 해야하지?SEO를 하면 자연적으로 검색 순위가 높아지고, 이에 따라 오가닉 트래픽(광고가 아닌, 자연적인 트래픽)이 증가합니다. 광고 비용 없이 내 글 혹은 웹사이트가 상단에 나올 수 있게 하여 상당한 매출 효과를 누릴 ..
[HTML] 간편하게 아이콘 불러오기 : Font Awesome 안녕하세요:) 웹 파트 YB 유서연입니다! 1주차 과제를 하면서 나는 아이콘을 불러오고 싶을 때 구글에 검색해서 아이콘을 찾고 이를 저장해 사용했다.하지만 문득 더 편한 방법이 있었던 것 같은데? 라는 생각이 들었다.따라서, 이번 글에서는 Font Awesome 사이트를 활용해 간편하게 아이콘을 검색하고 사용하는 방법을 소개하고자 한다. Font Awesome란?Font Awesome 은 수백만 명의 디자이너, 개발자, 콘텐츠 제작자가 사용하는 인터넷의 아이콘 라이브러리이자 툴킷이다.한 줄의 코드만으로 33,000개 이상의 아이콘을 사용할 수 있어 굉장히 간편하고 활용도가 높다.또한, 본인이 사용하고 싶은대로 아이콘을 스타일링할 수도 있다. Font Awesome 사용 방법1. head 태그에 scrip..
[ CSS ] CSS 방법론 안녕하세요! 웹파트 OB 이예림입니다!! 1주차 과제를 진행하며 css 클래스 네이밍 관련해서 어떻게 네이밍하는 것이 효율적인지 고민하곤 했는데요,이와 관련하여 CSS 방법론에 대해 알아보았습니다.  📌 CSS 방법론CSS에서 클래스 네임을 지을 때 작성하는 방식의 일종으로 naming convention이다. : 쉽게 말해 CSS방법론이란 웹에서 CSS의 영향력이 높아지게 되면서 CSS 사용시 클래스 이름을 어떻게 작성할지, 어떠한 방식으로 스타일을 작성할지 등 CSS를 보다 효율적으로 작성하기 위해 정의된 일종의 규칙이다. 🤔 CSS 방법론을 사용하는 이유는?원활한 유지보수코드의 재사용성 및 확장성클래스명으로도 무슨 내용인지 예측 가능CSS방법론에는 다양한 방법론들이 존재하지만 크게 OOCSS, ..
웹 빌드 도구와 번들러 , 그리고 번들링 프로세스 https://ocahs.tistory.com/2  웹 개발, 특히 프론트엔드 개발을 하다보면 빌드 도구와 번들러에 대해 듣곤 합니다.오늘은 그 중에서도 빌드 도구와 번들러에 대해 알아보겠습니다. 빌드 도구란?빌드 도구는 단순히 파일을 합치는 번들링 외에도, 코드의 변환(트랜스파일링), 압축, 테스트, 핫 리로딩 등을 지원하는 더 넓은 범주의 도구입니다. 빌드 도구는 번들링뿐만 아니라 다양한 개발 및 배포 관련 작업을 자동화합니다.  번들러란?번들러는 여러 개의 소스 파일(자바스크립트, CSS, 이미지 등)을 하나 또는 여러 개의 파일로 합쳐서 브라우저에서 더 빠르게 로드할 수 있도록 해주는 도구입니다. 번들러는 코드의 종속성을 분석하고 최종 배포를 위한 파일 크기를 줄이는 데 중점을 둡니다. 결국 번들..

티스토리툴바