⭐️ Markdown & Style sheet
[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..
[HTML] HTML 메타데이터 이해하기
[HTML] HTML 메타데이터 이해하기
2023.09.18HTML 메타데이터 HTML 메타데이터는 웹 페이지에 관한 정보를 제공하는 데이터로서, 웹 페이지의 콘텐츠 자체와는 다르게 주로 브라우저나 검색 엔진에게 페이지에 대한 추가적인 정보를 제공하기 위한 것이다. HTML 문서에서 메타데이터는 주로 ... attributes charset Character set의 약어로 문서의 문자 인코딩을 정의하는 속성이며, 우선 인코딩 개념을 이해할 필요가 있다. 인코딩(encoding)은 정보의 형태나 형식을 변환하는 과정이다. 컴퓨터는 데이터를 바이트와 비트로 처리하기 때문에, 사람이 이해하는 형태의 데이터(텍스트, 이미지, 사운드)를 바이트와 비트로 변환하는 과정이 필요하다. 이러한 변환 과정을 인코딩이라고 한다. `charset="UTF-8"`로 문서 문자 인코딩..
[HTML] HTML 기본구조 및 DOCTYPE 이해하기
[HTML] HTML 기본구조 및 DOCTYPE 이해하기
2023.09.15HTML 기본구조 HTML(HyperText Markup Language)은 웹 페이지를 만들기 위한 표준 마크업 언어이다. 웹 페이지의 구조와 내용을 정의하는 데 사용되며, 웹 페이지의 제목, 텍스트, 이미지, 링크, 리스트, 테이블 등 여러 요소를 표현할 수 있다. DOCTYPE(DTD, Document Type Definition)은 문서의 맨 처음에 위치하여 해당 문서의 버전과 유형을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지 또는 렌더링해야 하는지를 알려주는 용도이다. 은 HTML5를 나타내는 선언으로 간소화되어 단순한 형태로 표현되고 있지만, HTML5 이전에는 다양한 DOCTYPE 선언이 있었다. - HTML 4.01 Strict: - HTML 4...
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으로 해당 기준으로 얼마만큼 떨어져 ..