본문 바로가기

1주차

 (28)
웹 접근성을 고려하는 법 안녕하세요 35기 웹파트 한수정입니다.과제를 하며 aria-label, rem과 px 등 궁금한 거에 대해 찾아보다 보니 웹 접근성이라는 공통점을 찾게 되어 정리해 보게 되었습니다. 웹 접근성?웹 접근성(Web Accessibility)이란 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것입니다.눈으로 볼 수 없는 경우를 대비하여 그림이나 사진을 대신할 수 있는 설명을 텍스트로 제공해야 하고 마우스를 사용할 수 없는 사용자를 위하여 키보드만으로도 모든 콘텐츠에 접근하여 이용할 수 있도록 해는 등의 특징이 있습니다. 또한, 웹 접근성 보장은 「국가정보화기본법」과 「장애인차별금지 및 권리구제 등에 관한 법률(이하 "장애인차별금지법")」등 법률에 명..
[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 애니메이션 및 전환 자바스크립트를 사용하지 않더라도 애니메이션을 적용할 수 있다는 사실!! 알고계셨나요~~?우선, CSS의 기본 애니메이션 몇가지를 간단하게 살펴보겠습니다.기본 CSS 애니메이션1. 키프레임키프레임은 시간이 지남에 따라 요소가 어떻게 변경되는지를 정의합니다. 애니메이션 중 특정 순간에 요소가 어떻게 보이는지를 보여주는 "스냅샷" 세트라고 생각할 수 있어요.@keyframes를 CSS로 작성하는 방법은 다음과 같습니다.0%(시작), 50%(중간), 100%(끝) 등 다양한 비율로 변경 사항을 설정할 수 있습니다.예를 들어:@keyframes example { 0% { transform: translateX(0); } /* 시작: 요소가 처음 위치에서 시작합니다. */ 100% { transfo..
[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로 바뀌어 화면에 표시된다. 같은 엘리먼트에 설정된 폰트 크기 값이 없을 경우에는 상위 요소의 폰트 사이즈가 기준이 된다. ..
🎙️ 아리아나그란데와 웹 접근성의 관계 안녕하세요. 웹파트 35기 OB 박채연입니다 😋제가 첫 공유과제로 들고 온 주제는 바로 '웹 접근성'입니다. 근데 왜 뜬금없이 '아리아나 그란데' 얘기를 꺼냈냐구요?  웹 접근성하면, 함께하는 개념이 WAI-ARIA 잖아요!제가 저 글을 본 이후로 아리아나그란데가 ARIA가 잊혀지지 않아서여러분도 이제 웹 접근성, ARIA에 대해 확실하게 기억하면 좋지 않을까 해서 꺼내봤습니다 😁 자 그럼 이제 '웹 접근성'에 대해 자세히 알아볼게요!  🌐 웹 접근성 (Web Accessibility)장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것이다. 🌐 WAI-ARIA (Web Accessibility Initiative’s Accessible R..
[CSS] Flex Container 속성 익히기 안녕하세요 웹파트 YB 김채은입니다.!개구리 게임만으로는 1주차 과제를 위한 Flex의 속성을 완벽히 이해하기 어려웠어서 조금 더 자세하게 정리해 보았습니다. 1. Flex 레이아웃의 기본 HTML 구조 helloflex abc helloflex부모 요소인 div.container는 Flex Container자식 요소인 div.item들은 Flex Item이 된다. 여기서 Container가 Flex의 영향을 받아, 그 속성에 따라 각각의 Item들이 배치된다. 그리고 Flex의 속성은컨테이너에 적용하는 속성과 아이템에 적용하는 속성으로 나뉘는데, 컨테이너 속성들 위주로 적어보려 한다. 2. Flex Container 속성들(1) display: flex;첫 시작이 되는 속성이다..container { ..
[CSS] position의 다섯 가지 값 & relative와 absolute 안녕하세요? 웹 파트 OB(?) 김가연입니다. 사실 저는 OB라기에는 YB의 실력을 가지고 있는데요,오늘은 웹 개발 초보자의 시점에서 position이 무엇인지 알아보고, relative와 absolute를 더 집중적으로 파헤쳐보도록 하겠습니다. 💫 1. position이란?CSS에서 position 속성은 요소가 문서에서 배치되는 방식을 결정하는 속성입니다.position 속성만으로 요소를 배치할 수는 없고, 방식을 결정하는 것이기 때문에, 정확한 위치 지정을 위해 top, right, bottom, left와 같이 다양한 속성과 함께 사용 되곤 하죠. position 속성은 총 다섯 가지의 값을 가지고 있습니다.static: 요소를 일반적인 문서의 흐름에 따라 배치합니다. top, bottom 과 ..
CSS에도 프레임워크가 있다고? 웹파트 YB 김다현입니다! 보통 프레임워크 하면 JavaScript나 다른 기술을 먼저 떠올리기 쉽지만 사실 CSS에도 강력한 프레임워크들이 있다.CSS 프레임워크를 잘 활용하면, 코드 작성 시간도 줄어들고 스타일의 일관성도 높아지기에 이 글을 참고하면 좋을 듯 하다! CSS 프레임워크란?미리 개발 해 둔 완성형 디자인을 쉽게 가져다 쓸 수 있도록 한 것 쉽게 말해, 웹 디자인을 더 쉽고 빠르게 구현할 수 있도록 도와주는 도구를 우리는 CSS 프레임워크라고 한다.사전에 정의된 스타일과 컴포넌트를 제공하여, 개발자가 반복적인 CSS 작업에서 벗어날 수 있게 해준다. CSS 프레임워크엔 어떤 게 있을까? 2024년 기준 상위 2개의 프레임워크, Tailwind CSS와 BootStrap을 중점적으로 다뤄보..

티스토리툴바