w3.css 공식 레퍼런스는 SCSS 문법을 기준으로 모든 문법을 설명하고 예시를 보여주므로 SCSS 문법으로 작성한 Sass를 사용하자. Sass 문자열 함수 문자열 함수는 문자열을 조작하고 문자열에 대한 정보를 얻는 데 사용된다. Sass 문자열은 1부터 시작한다. 문자열의 첫 번째 문자는 0이 아니라 인덱스 1에 있다. 다음 표는 Sass의 모든 문자열 함수를 나열한다. 기능 설명 예시 quote(문자열) 문자열에 따옴표를 추가하고 결과를 반환한다. quote(Hello world!)결과: “Hello world!” str-index(문자열,하위 문자열) 문자열 내에서 하위 문자열이 들어간 인덱스(시작 위치)를 반환한다. str-index(“Hello world!”, “H”)결과: 1 str-insert(문자열, 삽입할 내용, 인덱스)…

w3.css 공식 레퍼런스는 SCSS 문법을 기준으로 모든 문법을 설명하고 예시를 보여주므로 SCSS 문법으로 작성한 Sass를 사용하자. @extend 지시어 @extend 지시어를 사용하면 한 선택기에서 다른 선택기로 CSS 속성 집합을 공유할 수 있다. 이 지시어는 몇 가지 작은 세부 사항만 다를 뿐 거의 동일한 스타일이 적용된 요소가 있는 경우에 유용하다. 예제 먼저 버튼에 대한 기본 스타일을 만들어보자. 이 스타일은 대부분의 버튼에 사용된다. 그 후 “Report” 버튼에 대한 스타일 하나와 “Submit” 버튼에 대한 스타일 하나를 만든다. “Report”와 “Submit” 버튼은 모두 @extend 지시문을 통해…

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 블로그가 내 블로그의 글을 언급하며 링크를 걸면 그 링크가 백링크가 된다. 백링크의 신뢰성을 높이기 위해서는 링크 제공 사이트의 권위, 주제 관련성, 자연스러운 링크, 링크의 위치와 형식, 링크의 다양성을 고려해야 한다. 백링크가…