본문 바로가기
반응형

Study/HTML & CSS4

[CSS] CSS에서 전역변수 추가하기 CSS에서 전역변수 추가하기 전역변수 선언하기 :root 라는 가상 클래스에 전역변수를 선언할 수 있습니다. 다른 속성 선언하는 방식과 비슷합니다. 앞에 하이픈 2개 ("--")만 붙여주면 됩니다. :root { --main-color: #123456; --sub-color: #654321; } 전역변수 사용하기 var(변수명)과 같이 사용할 수 있습니다. .screen { background-color: var(--main-color); } .button { background-color: var(--sub-color); } 2022. 1. 12.
[CSS] BEM (Block Element Modifier) 방법론 Intro CSS 방법론 중에는 BEM이라는 방법론이 존재합니다. 코드 양이 적다면 구조적으로 작성하지 않아도 큰 불편함이 없지만, 코드 양이 많아질수록 구조적으로 작성하는것이 중요합니다. 이때 CSS를 적용하기 위한 클래스명을 구조적으로 작성하는 방법론 중 하나인 BEM에 대해 알아보겠습니다. 아래의 사이트를 참고하여 작성했습니다. http://getbem.com/ BEM — Block Element Modifier BEM is a highly useful, powerful, and simple naming convention that makes your front-end code easier to read and understand, easier to work with, easier to scale,.. 2022. 1. 12.
[CSS] Reset CSS Intro CSS의 기본 설정값이 브라우저마다 상이하기 때문에, 같은 코드를 입력해도 브라우저에 따라 결과가 달라집니다. 이런 현상을 방지하기 위해 브라우저의 기본 설정값을 초기화 해줘야 하는데, 이러한 초기화 코드가 작성된 파일을 RESET CSS 라고 합니다. RESET CSS 적용법은 다음과 같습니다. 프로젝트에 CSS 파일 직접 추가 CDN을 사용한 실시간 다운로드 CSS 파일 직접 추가 reset.css /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, .. 2022. 1. 12.
[HTML] Head에 들어가는 태그들 Intro HTML의 Head에 들어가는 태그들에 대해 알아보자. This is my website! title 태그 내에 입력한 내용이 웹 사이트의 제목이 된다. 또한, 구글이나 Bing 등 다양한 검색엔진에서 내 웹페이지가 노출될 때 title 태그의 내용이 검색엔진에 노출된다. 검색엔진에서 내 웹페이지가 노출될 때 title 아래의 웹사이트 설명란에 content에 입력한 내용이 출력된다. 검색엔진에 웹사이트가 사용하는 언어를 알려준다. 웹 페이지가 사용하는 charset을 정의한다. 만약 설정이 되어있지 않거나 잘못 설정되어있을 경우 글자가 깨져서 출력될 수 있으므로 정확히 설정해야 한다. 웹사이트의 제목 옆에 표시될 아이콘을 설정한다. 카카오톡과 같이 다른 곳에 내 웹사이트를 공유할 때, 썸네일.. 2022. 1. 8.
반응형

티스토리툴바