본문 바로가기
반응형

Develop Log/HTML, CSS

HTML - SEO를 위한 Meta 태그 알아보기 meta 태그 사이트의 SEO최적화를 위한 방법중 가장 먼저 확인하는 부분중 하나는 HTML meta태그를 이용하는 방법이라고 생각 된다. 이 meta 태그를 사용하는게 어떤 목적을 가지고 있고 어떤 역할들을 하는지 정리해보려고 한다. 태그 태그는 HTML 문서의 메타데이터를 표현하는 데 사용된다. 메타데이터는 페이지에 대한 정보를 나타내지만, 실제 페이지 콘텐츠로 표시되지는 않지만, 브라우저 동작, 검색 엔진 최적화 (SEO), 또는 다른 목적을 위해 사용된다. 사용 목적 검색 엔진 최적화 (SEO): 메타데이터는 검색 엔진이 웹 페이지의 내용을 이해하고 적절하게 색인화하는 데 도움을 준다. 예를 들어, description 메타 태그는 검색 결과에 페이지 설명으로 표시되며, 이는 사용자가 웹 페이지의.. 더보기
CSS 방법론 알아보기 CSS 방법론이란? CSS 방법론은 대규모 프로젝트나 팀 작업에서 CSS 코드의 유지보수성, 재사용성, 확장성을 향상시키기 위해 사용되는 일련의 규칙을 의미한다. 이러한 방법론을 사용하면, CSS의 복잡성을 관리하고 코드의 구조를 표준화할 수 있으며, 현재 개발자들이 사용하는 방법론은 각각의 특징과 목적, 원칙을 갖고 있다. CSS 방법론은 그 자체로 독립적인 지침과 원칙을 가지고 있지만, 실제 프로젝트에서는 이러한 방법론을 혼합하거나 조정하여 사용하는 경우도 많기 때문에 하나의 방법론만을 사용해야 하는것이 아니라 프로젝트의 요구사항, 흐름에 때라 맞는 방법론을 사용하는것이 좋다. 주로 사용하는 CSS 방법론 BEM (Block Element Modifier) BEM의 목적은 구조와 의미를 명확하게 나타.. 더보기
SASS(SCSS)에 대해서 알아보자 SASS(SCSS)가 뭘까? Sass(Semantic Awesome Stylesheet)는 CSS를 보다 효율적이고, 강력하게 만드는 CSS 전처리기(CSS Preprocessor)이다. Sass에는 두 가지 주요 문법이 있는데 Sass 스크립트 (Sass Syntax, .sass): 들여쓰기와 개행을 사용하여 CSS의 블록을 구분하고, 세미콜론을 사용하지 않는다. SCSS 스크립트 (Sassy CSS, .scss): CSS 문법과 완전히 호환되는 새로운 문법이며, CSS와 거의 동일하게 보이지만, Sass의 모든 기능을 사용할 수 있다. 여기서 SCSS는 Sass 3.0에서 도입된 새로운 주요 문법이며, CSS와 많이 비슷하여 CSS를 그대로 적용할 수 있기 때문에 대부분의 경우, SCSS 문법을 주로.. 더보기
CSS - 가상 선택자(Pseudo Selectors) 가상 선택자(Pseudo Selectors) CSS의 가상 선택자(Pseudo Selectors)는 문서의 일부분을 선택하는 데 사용된다. 가상 선택자는 주로 문서의 특정 상태를 선택하거나 문서의 구조를 기반으로 선택하는데, 가상 선택자는 일반 선택자와 다르게 실제 HTML 요소에 직접적으로 일치하지 않는 대신 요소의 특정 상태나 위치를 기반으로 적용되므로 문서의 동적 변경에 반응하거나 특정 요소를 선택할 수 있게 해 준다. 가상 선택자는 가상 클래스(pseudo class)와 가상 요소(pseudo element)가 존재한다. 가상 클래스는 요소의 특정 상태를 기반으로 요소를 선택하며 가상 요소는 문서의 특정 부분에 스타일을 적용하도록 설계되어 있지만 그 부분이 실제 HTML에서는 표현되지 않는다. 가.. 더보기
브라우저 렌더링 알아보기 우리가 사용하는 크롬, 사파리 등등에서 페이지에 접속하게 되면 해당 페이지에서 제공하는 화면을 볼 수 있게 된다. 이렇게 우리가 볼 수 있는 브라우저 화면이 보여지는 과정은 어떻게 이루어져 있을까 렌더링 순서 HTML 다운로드: 브라우저는 웹 서버에게 HTML 파일을 요청하고, 이를 받아서 다운로드한다. DOM 트리 생성: HTML 파일이 다운로드되면, 브라우저는 이를 분석하고 DOM (Document Object Model) 트리를 만든다. 각 HTML 요소(태그)는 DOM 트리의 노드가 된다. CSSOM 트리 생성: HTML 문서가 외부 CSS 파일과 스타일 태그를 포함하고 있다면, 이들을 분석하여 CSSOM (CSS Object Model) 트리를 만든다. 렌더 트리 생성: DOM 트리와 CSSOM.. 더보기
CSS - border 속성과 outline 속성 border 속성과 outline 속성 border border속성은 HTML요소 주위에 테두리를 생성하는 데 사용된다. border는 하나의 속성이 아닌 여러 하위 속성을 결합한 단축 속성이다. 구성 속성 border는 아래 속성을 포함하고 있다. border-width : 테두리의 두께를 지정한다. 값을 px (픽셀), em, rem 등으로 지정할 수 있으며, 미리 정의된 키워드인 thin, medium, thick을 사용할 수도 있다. 기본값 : medium border-style : 테두리의 스타일을 지정한다. 가능한 값은 none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset 등이 있다. 기본값 : none border.. 더보기
CSS 미디어 쿼리 - forced-colors forced-colors CSS 미디어 특성 중 하나로 고대비 모드의 사용 유무에 따라 스타일을 지정할 수 있도록 하는 기능을 가지고 있다. 저시력이거나 특정 색상을 구분하기 어려운 사용자에게 중요한 기능으로 동작할 수 있으며 이런 접근성의 향상은 사용자들에게 더 좋은 웹 경험을 제공하고 서비스를 제공할 수 있게 된다. forced-colors는 사용자가 강제로 시스템 색상을 선택했는지 여부를 감지하도록 디자인 되어있으며, 일부 사용자들은 특정 색상, 특히 고대비 색상 스킴을 사용하여 컨텐츠를 더 잘 볼 수 있게 된다. 고대비 모드란? 사용자의 컴퓨터 시스템에서 제공하는 기능 중 하나로 사용자의 시각적 경험을 향상시키기 위해 화면에 표시되는 색상 대비를 높이는 설정이다. 이 모드는 저시력 사용자나 색상을.. 더보기
CSS media - prefers-contrast prefers-contrast prefers-contrast는 사용자가 시스템 수준에서 높은 대비 모드, 저 대비모드를 선택했는지의 여부를 나타낸다. 사용자의 시스템 설정에 따라 css가 동적으로 적용되도록 웹사이트나 웹 애플리케이션을 조정할 수 있게 해주는 방식으로. 웹 접근성을 향상하는 데 사용될 수 있다. 기능이 생긴 이유 웹 사이트를 이용하는 사용자들 중 시력에 불편함이 있는 사용자나 고령의 사용자 등이 웹사이트를 조금 더 쉽게 읽는 데 도움을 줄 수 있게 하기 위함이다 또한 일부 사용자들은 눈의 피로를 줄이거나 특정 타입의 색안경을 착용하는 등의 이유로 낮은 대비를 선호하는 경우가 생기게 되는데 이러한 부분을 지원하기 위해 prefers-contrast가 생겨나게 되었다. prefers-cont.. 더보기
반응형

티스토리툴바