본문 바로가기

분류 전체보기

 (200)
💥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, 이미지 등)을 하나 또는 여러 개의 파일로 합쳐서 브라우저에서 더 빠르게 로드할 수 있도록 해주는 도구입니다. 번들러는 코드의 종속성을 분석하고 최종 배포를 위한 파일 크기를 줄이는 데 중점을 둡니다. 결국 번들..
웹 접근성을 고려하는 법 안녕하세요 35기 웹파트 한수정입니다.과제를 하며 aria-label, rem과 px 등 궁금한 거에 대해 찾아보다 보니 웹 접근성이라는 공통점을 찾게 되어 정리해 보게 되었습니다. 웹 접근성?웹 접근성(Web Accessibility)이란 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것입니다.눈으로 볼 수 없는 경우를 대비하여 그림이나 사진을 대신할 수 있는 설명을 텍스트로 제공해야 하고 마우스를 사용할 수 없는 사용자를 위하여 키보드만으로도 모든 콘텐츠에 접근하여 이용할 수 있도록 해는 등의 특징이 있습니다. 또한, 웹 접근성 보장은 「국가정보화기본법」과 「장애인차별금지 및 권리구제 등에 관한 법률(이하 "장애인차별금지법")」등 법률에 명..
[CSS] object-fit 과 object-position 속성으로 깔끔하게 사진과 싸움 끝! 안녕하세요, 웹파트 35기 OB 손지유입니다😋1주차 과제로 홈페이지에 사진첩을 만들면서 가장 신경 쓰였던 것은, 사진의 각기 다른 크기!!보기만 해도 불편함이 느껴지는 이 상황저는 처음에 조금 더 깔끔하게 사진을 정렬하기 위해아래와 같은 선택을 했습니다!.img img { width: auto; height: 100px; }한층 깔끔해지기는 했지만,모든 사진의 크기가 아예 똑같으면 더 보기 좋을 것 같지 않나요? 그럴 때 사용할 수 있는 CSS 속성이 바로object-fit 과 object-position 입니다! object-fit 속성은 이미지의 크기를 맞추기 위해 사용할 수 있는 속성인데요.총 5가지의 object-fit 적용 사례를 소개해드리도록 하겠습니다.object-fit: cover..
CSS 애니메이션 및 전환 자바스크립트를 사용하지 않더라도 애니메이션을 적용할 수 있다는 사실!! 알고계셨나요~~?우선, CSS의 기본 애니메이션 몇가지를 간단하게 살펴보겠습니다.기본 CSS 애니메이션1. 키프레임키프레임은 시간이 지남에 따라 요소가 어떻게 변경되는지를 정의합니다. 애니메이션 중 특정 순간에 요소가 어떻게 보이는지를 보여주는 "스냅샷" 세트라고 생각할 수 있어요.@keyframes를 CSS로 작성하는 방법은 다음과 같습니다.0%(시작), 50%(중간), 100%(끝) 등 다양한 비율로 변경 사항을 설정할 수 있습니다.예를 들어:@keyframes example { 0% { transform: translateX(0); } /* 시작: 요소가 처음 위치에서 시작합니다. */ 100% { transfo..
[CSS] font-size: 62.5% 초기화와 8pt 그리드 시스템 웹 파트 YB 이진혁입니다!  오늘은 1주차 과제를 하던 중에 이전에도 궁금증이 들었지만 제대로 사용하는 이유를 파악하지 못했던 font-size: 62.5%에 대해 정리해보고자 한다. 먼저 font-size: 62.5% 초기화를 정확히 이해하기 위해선 상대 단위인 rem에 대해서 알아야 한다.  상대 단위란?: 상대(relative) 단위란 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위이다. px과 같은 고정된 절대 단위와 반대로 대표적인 em, rem이 있다.  em: em은 해당 단위가 사용되고 있는 요소의 font-size를 기준으로 px로 바뀌어 화면에 표시된다. 같은 엘리먼트에 설정된 폰트 크기 값이 없을 경우에는 상위 요소의 폰트 사이즈가 기준이 된다. ..

티스토리툴바