반응형 멋쟁이사자처럼후기65 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 14 (반응형 웹, 논리 속성 및 논리 값, 플렉시블 레이아웃) 목차반응형 웹논리 속성 및 논리 값플렉시블 레이아웃오늘 하루를 돌아보며 학습 목표 → 과정 → 결과 → 느낀 점 → 향후 계획반응형 웹방응형 웹은 유연하게 설계하는 서비스다. 2000년대를 기점으로 모바일 기기가 등장하면서 기술 플랫폼의 패러다임이 변화를 맞이했다. 데스크탑 중심 서비스가 모바일 중심 서비스로 이동하면서 기업들이 별도로 모바일 환경에 최적화된 대응을 시작한다. 그러나 모바일 디바이스의 크기가 다양해지면서 N Screen 환경을 고려하는 것이 필요해졌다. 고정형 레이아웃을 사용했던 서비스가 각 환경에 대응하기에는 개발 및 유지보수, 비용 관점에 대한 고민이 발생한다. 이때 반응형 웹이 필요해졌다. 콘텐츠는 물과 같아야 한다는 말이 있다. 컵에 담든, 주전자에 담든, 유리병에 담든 모양은 .. 2025. 5. 12. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 13 (미디어 쿼리, 반응형 웹, 컴포넌트 스타일링) 목차meta 요소미디어 쿼리반응형 웹컴포넌트 스타일링오늘 하루를 돌아보며 meta 요소meta는 문서를 설명하는 데이터인 메타 데이터를 담는 요소다. 에서 charset 속성은 웹 페이지의 문자 인코딩을 지정한다.UTF-8은 유니코드(Unicode)를 위한 가변 길이 문자 인코딩 방식이다. 전 세계의 거의 모든 문자와 기호를 표현할 수 있다. 그래서 title 요소를 meta 요소보다 위에 선언하면 탭 제목이 깨질 수 있다. 에서 viewport는 브라우저에 보이는 영역이다. 뷰포트의 width를 기기 크기에 맞추고, initial-scale(초기 배율)을 1로 맞춘다는 뜻이다. initial-scale을 설정하는 것은 핀치 제스쳐(줌인 줌아웃)를 할 때 2배, 3배, 0.5배로 확대하거나 축소할 수 있.. 2025. 5. 9. 멋쟁이사자처럼 프론트엔드 부트캠프 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. 이전 1 ··· 8 9 10 11 12 13 다음 반응형
