HTML 검색엔진 최적화에 간과하기 쉬운 CLS를 해결하는 2가지 방법 검색엔진 최적화는 내돈내산(SEM)이 아닌 내노력 내실력(SEO)으로 상위에 랭크되게 하는 기술인데요. 각 플랫폼 별로 다양한 낭설과 실제 이론들이 존재합니다. 대표적인 낭설로 alt를 이용한 꼼수, 이미지의 갯수에 따른 검색순위 조정등 여러 낭설이 있지만, 어떤 것은 맞고 어떤 것은 틀립니다. 오늘은 구글에서 검증되었으며, 공식적인 SEO 가이드에 있는 CLS에 대해서 말해보려고 합니다. 구글 서치 콘솔 확인검색엔진 최적화를 연구해본 사람은 구글 서치 콘솔을 다 아실겁니다. 아직 모르신다면, 구글 서치 엔진에 들어가서 본인의 사이트를 등록하고 살펴보세요. (필수중에 필수 입니다) 좌측 메뉴에 보면, "코어 웹 바이탈"이라는 메뉴가 있습니다. 해당 스코어에 따라 검색엔진의 순위가 달라질 수 있습니다. .. 2025. 3. 27. JSX의 가독성 이슈에도, React를 선택하는 이유는? React를 사용할 때 HTML과 JavaScript가 분리되지 않아 가독성이 떨어지는 것처럼 보일 수 있습니다. 그럼에도, 여전히 많은 개발자들이 React를 선택하는 이유는 무엇일까요?JSX란 무엇인가?JSX(JavaScript XML)는 JavaScript 안에서 XML/HTML과 유사한 문법을 사용할 수 있도록 도입된 React의 특수한 문법입니다. JSX는 JavaScript 코드 안에서 HTML 태그를 직접 작성할 수 있으며, React의 컴포넌트 기반 UI 개발 방식과 잘 맞아떨어집니다.JSX 예시 (기본적인 React 컴포넌트)function Greeting({ name }) { return Hello, {name}!;}위 코드를 보면 JSX 문법을 사용하여 태그 안에 {name} 변수.. 2025. 2. 27. 브라우저별 개발자 도구 여는 방법 핫키 웹 브라우저에서 개발자 도구(DevTools)를 여는 방법은 다음과 같습니다. 단축키로 개발자 도구 열기Windows/LinuxF12 키를 누르기 또는 Ctrl + Shift + iMacCommand + Option + i 또는 F12 브라우저 메뉴에서 개발자 도구 열기Chrome (크롬):브라우저 우측 상단의 점 세 개 (⋮) 버튼 클릭 → 더보기 도구 → 개발자 도구 선택또는 페이지에서 마우스 오른쪽 클릭 → 검사 선택Edge (엣지):우측 상단의 점 세 개 (⋮) 버튼 클릭 → 도구 더보기 → 개발자 도구또는 마우스 오른쪽 클릭 → 검사 Firefox (파이어폭스):우측 상단의 햄버거 메뉴(☰) 클릭 → 웹 개발자 → 도구 열기또는 마우스 오른쪽 클릭 → 검사 Safari (사파리):Safari .. 2024. 11. 18. css flex 가능한 브라우저 및 버전은? flex는 기존에 div 로 css의 향연을 하던 노가다와 불확실성에서 벗어나.. 박스의 공간 배치를 더 직관적으로 할 수 있는 예약어입니다. 예를 들어 아래와 같이 사용합니다. Item 1 Item 2 Item 3 위와 같은 문서가 있다고 할때, 아래와 같이 CSS를 정의하면, item 클래스를 갖는 div를 수평 및 수직으로, 가운데 정렬할 수 있습니다. 무척 간단하죠. body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: Arial, sans-serif;}.container { .. 2024. 7. 15. DIV 상하 좌우 중앙 정렬하는 CSS html 퍼블리싱을 하다 보면, 중앙 정렬을 하는 경우가 생각보다 많습니다. 물론 요즘에는 flex를 쓰기도 하지만, 좀 더 고전적인 방법을 적어보려고 합니다. 고전적인 방법을 사용하면, 아직 최신 웹브라우저로 업데이트하지 않은 분들의 화면에도 제대로 보일 수 있습니다. 물론! css polyfill 을 사용하는 방법이 있기도 합니다. 물론 서울에서 부산까지 가는 길은 여러 길이 있지만, 오늘은 또 한 길을 소개해 볼까 합니다. 어렵게 생각할 것이 아니라, 객체를 싸고 있는 div의 display를 table로 지정하는 방법입니다. div를 테이블처럼 처리하는 방법입니다. 그리고, 그 안에 들어간 div는 display를 table-cell로 지정하면, text-align 뿐만 아니라, vertical-.. 2023. 6. 19. Html에서 가운뎃점 middle dot 쉽게 찍는 방법 웹 퍼블리싱을 하다보면, 가운뎃점을 찍어야 되는 경우가 종종 나옵니다. 이럴 때, 그림으로 표시할까, 그냥 이모지로 넣을까 고민이 되는데요. HTML 코드중 가운데 점을 표현하는 문자를 사용하는 방법이 있습니다. · middle dot 의 약자로, 상기와 같이 쓰면 가운데 점이 생성됩니다. HTML 삽입 미리보기할 수 없는 소스 아래는, 기타 알고 있으면 유용한 특수 문자들입니다. 칸 띄우기, 많이들 알고 계시죠? (non breaking space) 추가로 알고 있으면 좋은 코드들입니다. © (copyright) © ® (registrated trademark) ® < (less than) ° (degree = 각도) ° ² (superscript two = squared = 좌승) ² & (amper.. 2023. 6. 16. 이전 1 다음 반응형
