⭐️ Markdown & Style sheet/CSS
[CSS] CSS 선택자
[CSS] CSS 선택자
2023.10.11CSS 선택자 CSS 선택자는 스타일을 적용할 HTML 요소를 지정하거나 선택하기 위한 규칙이다. 선택자를 사용하여 원하는 요소를 대상으로 하여 특정 스타일을 적용할 수 있다. CSS에는 다양한 유형의 선택자가 있으며 크게 기본 선택자, 복합 선택자, 가상 클래스 선택자, 가상 요소 선택자, 속성 선택자로 나뉜다. 각각 특정 목적에 따라 요소를 선택하는 데 사용되며, 자주 사용하는 선택자를 정리해보고자 한다. 기본 선택자 전체 선택자 태그 선택자 클래스 선택자 ID 선택자 전체 선택자(Universal Selector) '*'(Asterisk)은 모든 요소를 선택하는 전체 선택자이다. 복합 선택자와 함께 사용하여 범위 내 모든 요소를 선택하는 개념으로 사용하곤 한다. * { color: red; } 전체..
[CSS] CSS 선언 방식
[CSS] CSS 선언 방식
2023.09.21CSS 선언 방식 CSS 선언방식은 크게 4가지 방식으로 이루어져 있다. 인라인 방식 내장 방식 링크 방식 @import 방식 인라인 방식(Inline Style) HTML 요소의 style 속성에 직접 스타일을 작성하는 방식이다. 인라인 스타일은 해당 HTML 요소에만 적용되고, 각 요소마다 별도로 스타일을 지정할 수 있다. 여러 스타일을 선언할 때는 세미콜론(;)으로 구분한다. Hello, World! 인라인 스타일은 다른 선언방식에 비해 우선순위가 높아서, 같은 선택자 스타일을 오버라이드한다. 각 HTML 요소에 대해 스타일을 개별적으로 선언해야 하므로 유지보수가 어렵다. 재사용이 불가능하므로, 동일 스타일을 여러 요서에 적용하려면 각 요소마다 스타일을 선언해야 한다. 인라인 방식은 특정 요소에 빠..
[CSS] 구조 및 특징 이해
[CSS] 구조 및 특징 이해
2023.09.21CSS란? Cascading Style Sheets의 약자로, 웹 페이지의 레이아웃이나 스타일을 정의하는 언어이다. HTML로 작성된 웹 페이지의 내용과 구조를 꾸며주는 역할을 하며 텍스트 색상, 크기, 폰트, 여백, 패딩, 테두리 등을 지정할 수 있다. 구조 선택자 { 속성: 값; 속성: 값; ...; } CSS 규칙은 선택자와 중괄호 {} 사이 속성 집합으로 구성된다. 1. 선택자(Selector) 스타일(CSS)을 적용할 대상으로 특정 요소나 요소 그룹을 선택하는 데 사용한다. 타입 선택자(Type Selectors) : 요소 이름 기반으로 선택한다(h1, p, div). 클래스 선택자(Class selectors) : 요소 class 속성 기반으로 선택한다(.클래스값). ID 선택자(ID sele..
Styled Component 사용하기
Styled Component 사용하기
2022.06.08📝 개요 React, Vue, Angular와 같은 라이브러리, 프레임워크가 인기를 끌면서 재활용 가능한 컴포넌트 기반 개발이 주류가 되고 있다. 여러 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JavaScript를 모두 담는 코드를 많이 사용하고 있다. React는 이미 JSX를 통해 HTML을 포함하고 있고, Styled Component 라이브러리를 사용하여 CSS를 JavaScript에 삽입할 수 있다. 설치 To download styled-components run => npm install --save styled-components SASS는 불충분? CSS 클래스명에 대한 고민 문제 가이드가 없으면 복잡해지는 구조 방대한 스타일 정보로 인한 스크롤 지옥 CSS 클래스 조건부 ..
Sass(SCSS) 적용하기
Sass(SCSS) 적용하기
2022.05.12📝 개요 CSS는 작업이 고도화 될수록 불필요한 선택자 과용, statement 부재 등 규모가 커질수록 불편함도 같이 커진다. JavaScript에서 작업하다가 React로 옮기면서 잘 적용되던 CSS가 제 역할을 못해서 내가 구성했던 화면들이 뭉개지는 결과를 확인할 수 있었다. 이를 해결하고자 SCSS 사용 방법에 대해서 알아보고자 한다. 🚀 목표 SCSS를 작성하는 방법에 대해서 이해할 수 있다. SCSS 기본 문법을 숙지하고 실제로 적용할 수 있다. Sass CSS를 사용하다보면 내용이 쌓일수록 속성을 부여하더라도 적용되지 않는 순간이 온다. 코드가 길어지면 가독성이 떨어지고 유지보수의 어려움을 주는데 사람이 보고 작성하기에는 전혀 좋은 형태가 아님을 느낄 수 있다. 이 때 반복되는 내용은 줄여 ..
CSS display - block, inline-block, inline 이해하기
CSS display - block, inline-block, inline 이해하기
2022.04.27블록 레벨 요소와 인라인 레벨 요소 CSS에서 display 속성은 웹페이지에서 요소들이 어떻게 보여지고 다른 요소와 어떻게 상호 배치되는지를 결정한다. 이를 이해하기 위해서 우선 블록 레벨 요소가 무엇인지, 인라인 레벨 요소가 무엇인지 살펴본다. 블록 레벨(block-level) 요소 태그를 사용해 요소를 삽입했을 때 혼자서 한줄(width 100%)을 차지하는 요소이다. 해당 요소의 좌, 우측에는 다른 요소가 올 수 없으며 새로운 라인을 추가한다. 너비, 마진, 패딩 등을 이용하여 크기나 위치를 지정하려면 블록 레벨 요소여야 한다. 블록 레벨의 대표적인 태그로는 , , , , , , , , , , 등이 있다. 인라인 레벨(inline-level) 요소 블록 레벨 요소와 달리 줄을 차지하지 않으며 화면..
CSS position - static, relative, absolute, fixed 이해하기
CSS position - static, relative, absolute, fixed 이해하기
2022.04.27CSS position CSS에서 position은 웹 문서 안 태그 요소들을 어떻게 배치할지를 정하는 속성이다. position 속성이 가질 수 있는 속성 값에는 다음과 같이 4가지가 있다. static 요소를 문서의 흐름에 맞추어 배치한다(default 값). relative 이전 요소에 자연스럽게 연결해 현재위치에 배치하여 offset을 지정할 수 있다. absolute 문서의 흐름과 상관없이 가장 가까운 부모 요소중 static이 아닌 요소의 위치를 기준으로 상대적인 offset을 지정할 수 있다. fixed 문서의 흐름과 상관없이 위치를 좌표로 결정하지만 부모 요소가 아닌 브라우저 창이 기준이 된다. offset : top, right, bottom, left으로 해당 기준으로 얼마만큼 떨어져 ..
Semantic Web & Semantic Tags – 시멘틱 웹, 시멘틱 태그 이해하기
Semantic Web & Semantic Tags – 시멘틱 웹, 시멘틱 태그 이해하기
2022.04.26시멘틱이 등장한 이유 웹상에 축적된 정보가 방대해 짐에 따라 많은 문제에 봉착하게 되었다. 웹 기술은 축적된 방대한 데이터에 대하여 키워드에 의한 정보 접근만을 허용하고 있어서 정보 검색할 때 무수히 많은 불필요한 정보가 돌출하여 정보 홍수를 가중하고 있다. 또한 컴퓨터가 필요한 정보를 추출, 해석, 가공할 방법이 없어 모든 정보를 사용자가 직접 개입해서 처리해야 하는 문제가 있다. 이러한 문제들의 근본 원인은 컴퓨터가 정보자원의 의미를 이해하지 못하는데 원인이 있다. 시멘틱(semantic) '의미론적인' 이라는 뜻이다. 웹이 발전하는 과정에서 정보로서의 가치가 중요해지면서 사람에게도 의미 있고, 검색엔진이나 스크린리더와 같은 기계가 활용하기 좋은(이해할 수 있는) 형태의 데이터로 웹을 발전시키기 위한..