w3.css @mixin 지시어를 사용하면 웹사이트 전체에서 재사용할 수 있는 CSS 코드를 만들 수 있다. @include 지시문은 mixin을 사용(include)할 수 있도록 만들어졌다. 공식 레퍼런스는 SCSS 문법을 기준으로 모든 문법을 설명하고 예시를 보여주므로 SCSS 문법으로 작성한 Sass를 사용하자. mixin 정의 mixin은 @mixin 지시어로 정의된다. 예제 mixin 생성   Sass에서 이름 설정시 하이픈(-)과 언더바(_)는 동일한 것으로 간주한다. 즉, @mixin important-text { }와 @mixin important_text { }는 동일한 mixin으로 간주된다. mixin 사용 @include 지시어는 mixin을 포함하는 데 사용한다. 예제 mixin 사용 컴파일한 CSS mixin은…

무단 링크 는 웹사이트의 트래픽을 고의로 유출시키거나 서버 자원을 낭비하는 등 다양한 문제를 일으킬 수 있다. 특히 다른 사이트에서 내 콘텐츠를 무단으로 사용할 경우 SEO에도 악영향을 미칠 수 있다. .htaccess 파일을 활용하여 무단 링크 방지하는 방법을 알아보자. .htaccess .htaccess 파일은 아파치 웹 서버에서 디렉토리 단위로 설정을 변경할 수 있는 강력한 도구다. 웹호스팅 서버에서 .htaccess 파일이 보이지 않는 경우 숨김 파일 표시를 하여 확인해보고 확인되지 않을 시 파일을 새로 만들자. FileZilla 설정 방법 FileZilla » [서버] » [숨김 파일 강제 표시]…

w3.css Sass는 CSS 코드를 DRY(Don’t Repeat Yourself)로 유지한다. DRY 코드를 작성하는 한 가지 방법은 관련 코드를 별도의 파일에 보관하는 것이다. CSS 스니펫으로 작은 파일을 만들어 다른 Sass 파일에 포함할 수 있다. 이런 파일의 예로는 reset file, variables, colors, fonts, font-sizes 등이 있다. Sass 파일 가져오기 CSS와 마찬가지로 Sass도 @import 지시문를 지원한다. 이 @import 지시문을 사용하면 한 파일의 내용을 다른 파일에 포함할 수 있다. CSS @import 지시문은 성능 문제로 인해 큰 단점이 있다. 호출할 때마다 추가 HTTP 요청을 생성한다. 그러나 Sass…

검색 엔진 최적화(SEO)는 웹사이트의 검색 순위를 높이고 유기적인 트래픽을 증가시키는 데 필수다. 하지만 SEO는 끊임없이 변화하는 분야라서 최신 트렌드를 반영하고 주의해야 할 사항을 이해하는 게 중요하다. 2025년 SEO 트렌드와 주의할 점을 살펴보자. SEO 트렌드 AI와 인간의 균형 2025년 SEO에서는 AI 기술이 더 많이 활용된다. 데이터 분석, 키워드 연구, 콘텐츠 아이디어 생성 같은 데서 AI가 많이 도움 된다. 그러나 AI가 만든 콘텐츠는 깊이가 부족하거나 독창성이 떨어질 수 있으니 반드시 인간의 검토와 수정을 거쳐야 한다. 인간의 경험과 감성을 더해 콘텐츠의 품질을 높이는…

w3.css Sass 중첩 규칙 Sass를 사용하면 HTML과 같은 방식으로 CSS 선택기를 중첩할 수 있다. 사이트 탐색을 위한 Sass 코드를 확인해보자. Sass 구문 &nbps; Sass에서는 ul, li, a 선택기가 탐색 선택기 안에 중첩되어 있다. CSS에서는 규칙이 하나씩 정의된다(중첩되지 않음). CSS 구문 공식 레퍼런스는 SCSS 문법을 기준으로 모든 문법을 설명하고 예시를 보여주므로 SCSS 문법으로 작성한 Sass를 사용하자. Sass에서는 속성을 중첩할 수 있으므로 표준 CSS보다 깔끔하고 읽기 쉽다. Sass 중첩 속성 많은 CSS 속성은 font-family, font-size 및 font-weight나 text-align, text-transform 및 text-overflow와 같이…

기술적 SEO 기술적 SEO 는 웹사이트가 검색 엔진의 검색 결과에서 잘 보이도록 하는 여러 가지 기술적인 방법들을 말한다. 마치 웹사이트가 검색 엔진에게 “나는 여기 있어! 잘 찾아줘!”라고 말하는 것과 같다. 기술적 SEO 의 중요한 요소에는 어떤 기술적인 방법들이 있는지 중요도에 따라 순차적으로 살펴보자. SSL 인증서 SSL(보안 소켓 계층) 인증서는 웹사이트와 사용자 간의 데이터를 암호화하여 보안을 강화하는 프로토콜이다. SSL 인증서를 설치한 웹사이트는 HTTP 대신 HTTPS 프로토콜을 사용한다. HTTPS는 HyperText Transfer Protocol Secure의 약자로 보안된 HTTP라는 의미다. 구글은 HTTPS를 사용하는 웹사이트에 대해…

w3.css Sass 변수 변수는 나중에 다시 사용할 수 있는 정보를 저장하는 방법이다. Sass를 사용하면 정보를 변수에 저장할 수 있다. Strings. 문자열 Numbers. 숫자 Colors. 색상 Booleans. 논리 Lists. 목록 Nulls. 비어있음 Sass는 $ 기호 뒤에 이름을 사용하여 변수를 선언한다. Sass 변수 구문 공식 레퍼런스는 SCSS 문법을 기준으로 모든 문법을 설명하고 예시를 보여주므로 SCSS 문법으로 작성한 Sass를 사용하자. 왜 Sass 를 사용할까? 스타일시트는 점점 더 커지고 복잡해지고 유지 관리하기 어려워지고 있다. 이 때 CSS 전처리기가 도움이 될 수 있다. Sass를 사용하면…

오프페이지 SEO 오프페이지 SEO 는 웹사이트 외부에서 이루어지는 모든 활동을 통해 검색 엔진에서의 순위를 높이고 사이트의 신뢰성을 향상시키는 전략이다. 웹사이트 자체의 최적화(온페이지 SEO)와는 달리 외부 요인에 중점을 둔다. 오프페이지 SEO 의 주요 전략과 각 개념에 대해 공부해보자. 백링크 백링크는 다른 웹사이트에서 내 웹사이트로 연결되는 링크를 의미한다. 예를 들어 A 블로그가 내 블로그의 글을 언급하며 링크를 걸면 그 링크가 백링크가 된다. 백링크의 신뢰성을 높이기 위해서는 링크 제공 사이트의 권위, 주제 관련성, 자연스러운 링크, 링크의 위치와 형식, 링크의 다양성을 고려해야 한다. 백링크가…

w3.css Sass 소개 Sass는 Syntactically A wesome Style Sheet의 약어다. Sass는 CSS의 확장이다. Sass는 CSS 전처리기다. Sass는 모든 버전의 CSS와 완벽하게 호환된다. Sass는 CSS의 반복을 줄여 시간을 절약한다. Sass는 Hampton Catlin이 디자인하고 2006년 Natalie Weizenbaum이 개발했다. Sass는 무료로 다운로드하여 사용할 수 있다. 공식 레퍼런스는 SCSS 문법을 기준으로 모든 문법을 설명하고 예시를 보여주므로 SCSS 문법으로 작성한 Sass를 사용하자. 왜 Sass 를 사용할까? 스타일시트는 점점 더 커지고 복잡해지고 유지 관리하기 어려워지고 있다. 이 때 CSS 전처리기가 도움이 될 수 있다. Sass를 사용하면…

온페이지 SEO 온페이지 SEO 최적화는 웹사이트 내에서 검색 엔진 최적화를 위한 모든 작업을 의미한다. 효과적인 온페이지 SEO 전략은 검색 엔진 결과에서의 가시성을 높이고 사용자 경험을 개선하는 데 중요한 역할을 한다. 온페이지 SEO 최적화 전략에 대해 자세히 알아보자. 키워드 배치 H1 태그에 메인 키워드를 넣고 자연스럽게 읽히도록 작성한다. 첫 번째 문단에 주요 키워드를 넣고 문맥에 맞게 배치한다. H2, H3 태그에도 관련 키워드를 사용하여 콘텐츠 구조를 명확히 한다. 이미지를 설명하는 ALT 태그에 키워드를 포함하여 이미지 검색 최적화를 도모한다. 글 제목 및 메타…