반응형 css15 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 12 (사용자 정의 속성, 테이블 스타일링, sr-only 클래스) 목차사용자 정의 속성(CSS 변수)테이블 스타일링sr-only 클래스오늘 하루를 돌아보며 사용자 정의 속성(CSS 변수)Sass와 같은 CSS 전처리기를 사용하면 반복되는 값을 변수로 치환할 수 있다. 다만, 그렇게 하면 CSS로 변환해야 한다.Sass만큼 강력하지는 않지만, CSS에서도 변수와 비슷한 기능을 지원한다. 사용자 정의 속성(custom property)은 CSS 저작자(사용자)가 직접 속성을 정의하고, 문서에서 반복해서 사용할 임의의 값을 지정한다.element { /* 사용자 정의 속성 - 정의 */ /* 대소문자 구분 */ --main-bg-color: pink; /* 사용자 정의 속성 - 사용 */ background: var(--main-bg-color);} 사용.. 2025. 5. 8. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 11 (포지셔닝 레이아웃, 플로팅 레이아웃) 목차포지셔닝 레이아웃플로팅 레이아웃CSS 선택자CSS 스타일링오늘 하루를 돌아보며 포지셔닝 레이아웃position은 요소 박스의 배치 방식을 지정하는 속성이다. 기본 값은 static이다.position이 가질 수 있는 속성 값은 다음과 같다.static: normal flow(일반적인 흐름)에 따른 배치 방식. 마크업 순서대로 선형화되어 배치된다.relative: 원래 있던 영역을 기준으로 움직이며 layer 형태(static을 제외하고, 먼저 선언한 게 밑으로 깔린다. 배경 이미지는 먼저 선언한 게 위로 쌓인다.)로 겹친다. 주변 상자 위치에 영향을 주지 않는다. (그림자를 만들 때 사용할 수 있다.)absolute: 원래 있던 영역을 기준으로 움직이며 layer 형태로 겹친다. 주변 상자.. 2025. 5. 7. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 10 (타이포그래피, 박스 모델, 리스트 스타일링, 배경 스타일링) 목차타이포그래피박스 모델리스트 스타일링배경 스타일링오늘 하루를 돌아보며 타이포그래피fonts는 글꼴, 글자 크기, 굵기 등 다양한 스타일링을 할 수 있는 속성이다.더 자세한 정보 보러가기 CSS Fonts Module Level 3This CSS3 module describes how font properties are specified and how font resources are loaded dynamically. The contents of this specification are a consolidation of content previously divided into CSS3 Fonts and CSS3 Web Fonts modules. The description ofwww.w3.org f.. 2025. 5. 3. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 9 (CSS 기초, 선택자, 상속과 겹침, 우선순위 규칙) 목차CSS 기초CSS 문법CSS 선택자CSS의 세 가지 개념오늘 하루를 돌아보며 CSS 기초CSS란?CSS(Cascading Style Sheet)는 마크업 언어가 실제로 표시되는 방법을 기술하는 언어다. 글꼴, 여백, 배경 이미지 등 HTML 문서의 레이아웃과 스타일을 정의한다.Cascading: 겹쳐서 사용. 마지막 정의한 게 적용된다.Style Sheet: 스타일을 정의함. 워드프로세서 등에 사용했던 개념이다.CSS를 사용하면서 문서의 구조와 표현을 분리할 수 있게 됐다. 구조를 바꾸지 않고도 CSS를 어떻게 적용하느냐에 따라 콘텐츠가 다르게 보일 수 있다. CSS Zen Garden: The Beauty of CSS DesignSo What is This About? There is a conti.. 2025. 5. 3. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 7 (텍스트 레벨 요소, 테이블 관련 요소, 임베디드 요소) 목차프레이징 요소인용문텍스트 레벨 요소테이블 관련 요소address 요소임베디드 요소오늘 하루를 돌아보며 프레이징 요소문장이나 텍스트와 관련된 요소로, 문서의 텍스트를 단락 내에서 마크업하는 데 사용한다. 즉, 문장이나 텍스트의 일부를 의미적으로 표시하거나 스타일을 적용하는 데 사용되는 태그들을 가리킨다. 요소는 텍스트의 중요성을 강조할 때 사용한다. 스타일 기본값은 bold다. 요소도 텍스트를 강조할 때 사용하지만 strong이 중요도가 더 높다. 스타일 기본값은 italic이다. 요소가 텍스트를 기울일 때(italic) 사용하고, 요소는 텍스트를 굵게(bold) 강조할 때 사용한다.strong이나 em의 시각적 모습이 i나 b와 동일하지만 의미가 다르다. strong과 em은 텍스트의 중요성을 강조하.. 2025. 5. 3. 이전 1 2 3 다음 반응형
