본문 바로가기

css

 (10)
[CSS] object-fit 과 object-position 속성으로 깔끔하게 사진과 싸움 끝! 안녕하세요, 웹파트 35기 OB 손지유입니다😋1주차 과제로 홈페이지에 사진첩을 만들면서 가장 신경 쓰였던 것은, 사진의 각기 다른 크기!!보기만 해도 불편함이 느껴지는 이 상황저는 처음에 조금 더 깔끔하게 사진을 정렬하기 위해아래와 같은 선택을 했습니다!.img img { width: auto; height: 100px; }한층 깔끔해지기는 했지만,모든 사진의 크기가 아예 똑같으면 더 보기 좋을 것 같지 않나요? 그럴 때 사용할 수 있는 CSS 속성이 바로object-fit 과 object-position 입니다! object-fit 속성은 이미지의 크기를 맞추기 위해 사용할 수 있는 속성인데요.총 5가지의 object-fit 적용 사례를 소개해드리도록 하겠습니다.object-fit: cover..
[CSS] font-size: 62.5% 초기화와 8pt 그리드 시스템 웹 파트 YB 이진혁입니다!  오늘은 1주차 과제를 하던 중에 이전에도 궁금증이 들었지만 제대로 사용하는 이유를 파악하지 못했던 font-size: 62.5%에 대해 정리해보고자 한다. 먼저 font-size: 62.5% 초기화를 정확히 이해하기 위해선 상대 단위인 rem에 대해서 알아야 한다.  상대 단위란?: 상대(relative) 단위란 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위이다. px과 같은 고정된 절대 단위와 반대로 대표적인 em, rem이 있다.  em: em은 해당 단위가 사용되고 있는 요소의 font-size를 기준으로 px로 바뀌어 화면에 표시된다. 같은 엘리먼트에 설정된 폰트 크기 값이 없을 경우에는 상위 요소의 폰트 사이즈가 기준이 된다. ..
[CSS] position의 다섯 가지 값 & relative와 absolute 안녕하세요? 웹 파트 OB(?) 김가연입니다. 사실 저는 OB라기에는 YB의 실력을 가지고 있는데요,오늘은 웹 개발 초보자의 시점에서 position이 무엇인지 알아보고, relative와 absolute를 더 집중적으로 파헤쳐보도록 하겠습니다. 💫 1. position이란?CSS에서 position 속성은 요소가 문서에서 배치되는 방식을 결정하는 속성입니다.position 속성만으로 요소를 배치할 수는 없고, 방식을 결정하는 것이기 때문에, 정확한 위치 지정을 위해 top, right, bottom, left와 같이 다양한 속성과 함께 사용 되곤 하죠. position 속성은 총 다섯 가지의 값을 가지고 있습니다.static: 요소를 일반적인 문서의 흐름에 따라 배치합니다. top, bottom 과 ..
웹 접근성과 HTML/CSS 웹파트 35기 YB 최민입니다 1주차 과제를 하면서 그동안 놓치고 있었던 웹 접근성과 HTML/CSS에 대해 정리해보려고 한다. 🐻 웹 접근성이란?우선 웹 접근성이란 웹 사이트, 도구, 기술이 장애를 가진 사용자들이 사용할 수 있도록 설계 및 개발된 것을 말한다.이는 웹사이트의 내용, 기능, 그리고 디자인이 모든 사용자에게 접근 가능하게 보장하는 것이다. -> 웹은 정보의 주요한 출처로, 접근성이 결여된 경우 특정 사용자 집단은 정보와 서비스에 대한 접근이 제한될 수 있다.  1. 시각적 장애시각장애인 사용자들은 화면 리더기를 사용하여 웹 콘텐츠를 탐색한다. 이들을 위해 텍스트 기반의 대체 정보와 의미론적 HTML 사용이 필수적이라고 한다.-> 예를 들어, 이미지에 대한 설명을 제공하는 대체 텍스트(a..
CSS 캐스케이딩 - 스타일 우선 적용 순서 CSS는 "Cascading Style Sheets"의 약자로, 스타일 시트에서 "Cascading"은 여러 스타일 규칙이 어떤 순서로 적용되는지를 결정하는 규칙을 의미한다. 즉, 여러 CSS 선택자들이 어느 것이 최우선으로 적용될지를 결정한다. 간단하게 예를 들어, 동일한 HTML 요소에 class 선택자로 빨간색을 지정하고, id 선택자로 파란색을 지정했다면, id 선택자가 더 높은 우선순위를 갖기 때문에 해당 요소는 파란색으로 표시된다.캐스케이딩 우선순위1. 중요도(Importance)CSS 규칙의 우선순위를 결정하는 첫 번째 요소는 '중요도'이다. 이는 다음 순서로 적용된다:인라인 스타일: HTML 요소 내에 직접 작성된 스타일이며, 가장 높은 우선순위를 가진다.내부 스타일 시트: 태그 내에 작..
[CSS] display 속성 - none, inline, block, inline-block 💬 웹 파트 35기 최정완 입니다. 세미나 시간에 display 속성에 대해 배웠는데, 개념이 제대로 잡히지 않아다시 공부해보고자 display 속성을 주제로 포스팅을 하게 되었습니다.CSS에서 display 속성은 요소의 크기를 조정할 때 자주 사용된다.요소가 화면에서 얼마만큼 크기를 차지하고 싶을 지에 대해 고민할 때, display 속성이 자주 사용된다. 이번 포스트에서는 display의 4가지 속성값을 알아보려고 한다.  1. display: none;display: none; 속성값으로 none을 주면 해당 요소가 화면에서 사라진다. 크게 자체도 차지하지 않게 되기 때문에, 화면에서 요소가 안 보이게 만들고 싶을 때 사용할 수 있다. DOCTYPE html>html lang="en">head>..
스타일링 라이브러리 비교하기 최근 지인의 스타일링 라이브러리에 대한 개인적인 생각을 듣고 난 이후로 얻은 인사이트를 wavy 동기들에게도 공유하고 싶어서 글을 작성해봅니다. 마침 이번 주차 과제가 CSS 기본을 다시 생각할 수 있는 과제이기도 했구요! 🏊‍♂️CSS (Cascading Style Sheets)웹의 스타일링을 위한 기본 표준을 얘기하는 것으로, 모든 웹 브라우저에서 지원하는 스타일 시트 언어를 말한다 HTML 선택자 를 이용해서 HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다.body { margin: 0; padding: 0; background-color: black;}장점표준 CSS 를 사용하여 개발한다면 전역 스타일링을 편리하게 적용할 수 있다.예를 들면, 모든 태그에 특정 스타일을 ..
CSS Flexbox 공부하자고? 너 누군데. 처음 웹 공부를 시작하면 가장 먼저 배우는 HTML과 CSS!그 중에서 프로젝트를 해도 헷갈리는 Flexbox 개념을 정리하려고 한다 💥 CSS Flexbox는 웹 페이지의 레이아웃을 쉽게 만들고 관리할 수 있도록 도와주는 1차원 레이아웃 모델이다.Flexbox를 사용하면 컨테이너 내에서 아이템의 배치, 정렬, 크기 조정을 간편하게 할 수 있다. Flex 속성을 적용하기 위해서는 부모와 자식의 관계가 존재해야 한다.Flex container → 부모flex-direction : 요소 배치 방향 선택 (row (default) / column / row-reverse / column-reverse)flex-wrap : 컨테이너 너비보다 아이템 너비가 클 때 줄바꿈을 결정하는 속성 (nowrap (줄바꿈..

티스토리툴바