1976s

이 블로그는 웹 개발, 프로그래밍, IT 활용법을 다루며, 실용적인 팁과 정보를 제공합니다.

# Side Menu

recentPost
popularPost
Archive
recentComment

공부/CSS

CSS는 Cascading Style Sheets의 약자로, HTML로 작성된 웹 페이지의 레이아웃, 스타일, 디자인 등을 정의하는 스타일 시트 언어입니다.

추가 태그 리스트

This category have 10 Posts.

This search have 10 Posts.

This tag have 10 Posts.

공부/CSS

css의 nth-child 선택자, first-child, last-child, nth-of-type 선택자 정리

간혹 홈페이지나 기타 부분에서 쓸려니 생각나지 않아 검색하곤 하는데 이것도 생각해 보니 적어 두는 게 좋겠다 싶어 기록에 남깁니다. 아래에서는 CSS의 nth-child 선택자와 first-child, last-child 선택자를 각각 설명하고, 각 선택자에 대한 예제를 포함하여 제공하겠습니다. 1. nth-child 선택자 nth-child 선택자는 부모 요소의 자식 요소 중에서 특정한 순서에 있는 요소를 선택하는 데 사용됩니다. 구문: :nth-child(an + b) n은 요소의 인덱스 번호를 나타냅니다. a와 b는 각각 정수 상수를 나타냅니다. :nth-child(2)는 부모 요소의 자식 요소 중에서 두 번째 요소를 선택합니다. :nth-child(odd)는 부모 요소의 자식 요소 중에서 홀수번째..

2024. 3. 3.
공부/CSS

CSS Box Model(박스 모델)

안녕하세요. 이번에 알아볼 CSS로는 CSS Box Model(박스모델)입니다. 이 박스모델은 기본적인 html 태그에 사용됩니다. 출처 : https://levelup.gitconnected.com/css-box-model-explained-60fc76fe9c4d CSS Box Model은 CSS 1이 처음 등장한 1996년 이후부터 적용되었습니다. 이전에는 HTML 요소의 크기와 위치를 결정하는 데에 테이블(Table) 태그를 사용하는 등 HTML 요소 자체가 레이아웃을 결정하는 역할을 하였습니다. 그러나 CSS의 등장으로 더욱 유연하고 정확한 레이아웃을 만들 수 있게 되었고, Box Model은 이를 위한 기본 개념 중 하나가 되었습니다. Box Model은 CSS 2와 CSS 3에서도 지속적으로 ..

2023. 3. 9.
공부/CSS

CSS - Position

CSS Position position 속성은 Html 문서 상에서 요소가 배치되는 방식을 결정한다. 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용된다. position의 property에는 static, relative, absolute, fixed, sticky 다섯 종류가 있다. position: static|relative|absolute|fixed|sticky position: static은 요소를 문서 흐름에 따라 배치하는 기본값입니다. top, bottom, left, right, z-index와 같은 위치 지정 속성은 적용되지 않습니다. position: relative는 요소의 위치를 상대적으로 이동시키는 데 사용됩니다. 이 경우 top, bot..

2023. 3. 6.
공부/CSS

2

CSS 미디어 쿼리 (Media Queries)

반응형 웹 (Resposible Web) 이란? 반응형 웹(Responsible Web)이란 디바이스(전자기기) 별로 각각 레이아웃(grid)이 달라지는 웹입니다. 미디어 쿼리 (Media Queries) 란? 미디어 쿼리란 반응형 웹을 구현하기 위해 필요한 기술 중에 하나로, 컴퓨터나 기기에게 ‘너는 어떤 종류의 미디어니?’ 또는 ‘미디어의 화면 크기는 어느 정도나 되니?’라고 미디어에게 질문하고 감지하여 웹사이트를 변경하는 기술입니다. 또한, 기기의 종류뿐만이 아니라 해상도, 비트 수, 가로/세로 여부 등 세밀한 부분까지 감지가 가능하여 유용하게 사용됩니다. 미디어 쿼리 작성 @media not|only mediatype and (media features) { CSS-Code; } @media : ..

2023. 3. 3.
공부/CSS

기억해야할 기본 CSS 선택자 형식

CSS Cascading Style Sheets Cascading Style Sheets (CSS)는 documents가 사용자에게 어떻게 보여질가를 기술하는 언어입니다. html문이 뼈대라면 css는 겉 피부 또는 화장이라고 할 수 있습니다. 스타일 규칙 Rule Set(Rule)은 HTML페이지 안의 특정 요소들을 어떻게 렌더링(Rendering) 할 것인지 브라우저에게 알려주는 CSS 문장입니다. 밑의 스타일 규칙이라고도 불리는 이 문장은 스타일에 관한 규칙들을 나타냅니다. 기본 CSS 선택자 형식 1. * 전체선택자(Universal Selector) 별표는 페이지의 모든 요소를 타기팅합니다. * { margin: 0; padding: 0; } '*' - 전체선택자(Universal Selecto..

2023. 3. 2.
공부/CSS

CSS 글꼴 크기 비교 및 단위

글꼴 크기 CSS에서는 폰트 크기 정하는 방법이 몇가지 있습니다. Px는 화면 해상도의 점 크기를 가지고 em은 각각 문서의 기본 글골 크기를 상대적으로 가집니다. rem은 html문서의 글꼴 크기를 가집니다. 폰트 단위 REM (Root EM) : html에 정의된 기본글꼴의 크기에 대하여 값을 가짐. PX(Pixel) : 고정된 크기 단위 (1px는 컴퓨터 화면에서 점 1개와 같음) EM : 웹 문서에서 사용되는 단위. (해당폰트의 대문자 M의 너비를 기준으로 함.)- 가변 단위 EX : x-height, 해당폰트의 소문자 x의 높이를 기준으로 함. PT(Point) : 고겅되 크기 단위 (주로 인쇄물에 사용됨) Percent(%) : 기본글꼴의 크기에 대하여 상대적인 값을 가짐 화면 단위 vw : ..

2023. 3. 1.
공부/CSS

Reset CSS

모든 웹 브라우저는 디폴트 스타일(브라우저가 내장하고 있는 기본 스타일)을 가지고 있어서 CSS가 없어도 작동합니다. 그런데 웹브라우저에 따라 디폴트 스타일이 다르고 지원하는 tag나 style도 제각각이어서 주의가 필요합니다. Reset CSS Reset CSS는 기본적인 HTML 요소의 CSS를 초기화하는 용도로 사용합니다. 즉 브라우저 별로 제각각인 것을 디폴트 스타일로 통일시켜 주는 역할도 합니다. 인터넷에는 많은 스타일들이 있습니다. 그중에 저에게 맞는 스타일을 찾고 짜깁기 하여 사용하고 있습니다. 인터넷의 기본 Reset CSS Eric Meyer’s reset CDN : https://cdnjs.com/libraries/meyer-reset normalize.css CDN : https://..

2023. 2. 27.
공부/CSS

CSS 수학함수 [calc(),max(),min()]

calc(); calc();함수는 속성의 값으로 사용가능하며 계산하여 그 값을 적용합니다. calc(expression) max(); max()함수는 쉼표로 구분된 값 목록에서 가장 큰 값을 속성 값으로 사용합니다. max(value1, value2, ...) min(); min()함수는 쉼표로 구분된 값 목록에서 가장 작은 값을 속성 값으로 사용합니다. min(value1, value2, ...) 마무리 이번에 max, min이 있는 것을 알게 되었고, calc와 clac가 헷갈려서 이렇게 알아보았습니다.

2023. 2. 27.
공부/CSS

CSS 선택자(Selector) 우선순위

기억해야할 기본 CSS 스타일을 적용하는 데는 다양한 방법이 있으며 동시에 여러 가지 방법을 사용할 수도 있기 때문에 엘리먼트에 적용되는 스타일이 충돌할 수도 있습니다. 따라서 스타일 적용의 우선순위 규칙을 알아둘 필요가 있습니다. 선택자(Selector) 우선순위 복합 선택자 패턴에서의 우선 적용 순위 규칙 !important 선언을 한 사용자 스타일 > !important 선언을 한 작성자 스타일 > 작성자 스타일 > 사용자 스타일 > User Agent 선언 (브라우저 자체의 선언) 선택자우선순위 선택자방식 적용예 혼용 방식의 점수 산정 비고 속성 기준 가장 우선 !important 속성: 적용 값 !important; 속성 기준 가장 우선 속성 기준 가장 우선 1 인라인 스타일 style=”” 1..

2023. 2. 27.

공부/CSS

추가 태그 리스트

css의 nth-child 선택자, first-child, last-child, nth-of-type 선택자 정리

CSS Box Model(박스 모델)

CSS - Position

CSS 미디어 쿼리 (Media Queries)

기억해야할 기본 CSS 선택자 형식

CSS 글꼴 크기 비교 및 단위

Reset CSS

CSS 수학함수 [calc(),max(),min()]

CSS 선택자(Selector) 우선순위

티스토리툴바