본문 바로가기

분류 전체보기

 (200)
🎙️ 아리아나그란데와 웹 접근성의 관계 안녕하세요. 웹파트 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을 중점적으로 다뤄보..
웹 접근성과 HTML/CSS 웹파트 35기 YB 최민입니다 1주차 과제를 하면서 그동안 놓치고 있었던 웹 접근성과 HTML/CSS에 대해 정리해보려고 한다. 🐻 웹 접근성이란?우선 웹 접근성이란 웹 사이트, 도구, 기술이 장애를 가진 사용자들이 사용할 수 있도록 설계 및 개발된 것을 말한다.이는 웹사이트의 내용, 기능, 그리고 디자인이 모든 사용자에게 접근 가능하게 보장하는 것이다. -> 웹은 정보의 주요한 출처로, 접근성이 결여된 경우 특정 사용자 집단은 정보와 서비스에 대한 접근이 제한될 수 있다.  1. 시각적 장애시각장애인 사용자들은 화면 리더기를 사용하여 웹 콘텐츠를 탐색한다. 이들을 위해 텍스트 기반의 대체 정보와 의미론적 HTML 사용이 필수적이라고 한다.-> 예를 들어, 이미지에 대한 설명을 제공하는 대체 텍스트(a..
똑똑하게 CSS 선택자 사용하기 ~! :where() / :is() 1주차 과제를 진행하면서, 어김없이 공통된 css 효과를 쉼표로 연결하고 있던 도중.... 이 번거로운 과정을 해결할 수 있는 방법은 없을까? 에 대한 의문이 들었습니다 !!!!!/* 문제 상황 */.header_menu li:hover,.header_icons li:hover { cursor: pointer; transform: scale(1.1);} 뭔가.. 뭔가..  번거로운데요, 개선 방법을 여러분들과 공유하고자 합니다 🤤 💡 CSS 선택자: :where(), :is() 1️⃣ where 선택자 요소 1 요소 2 요소 3  보통 Html이 위와 같이 적혀 있고, 공통의 스타일을 적용해야 할 때 저는 보통 다음과 같은 식으로 작성했었습니다.nav > ul ..
CSS 캐스케이딩 - 스타일 우선 적용 순서 CSS는 "Cascading Style Sheets"의 약자로, 스타일 시트에서 "Cascading"은 여러 스타일 규칙이 어떤 순서로 적용되는지를 결정하는 규칙을 의미한다. 즉, 여러 CSS 선택자들이 어느 것이 최우선으로 적용될지를 결정한다. 간단하게 예를 들어, 동일한 HTML 요소에 class 선택자로 빨간색을 지정하고, id 선택자로 파란색을 지정했다면, id 선택자가 더 높은 우선순위를 갖기 때문에 해당 요소는 파란색으로 표시된다.캐스케이딩 우선순위1. 중요도(Importance)CSS 규칙의 우선순위를 결정하는 첫 번째 요소는 '중요도'이다. 이는 다음 순서로 적용된다:인라인 스타일: HTML 요소 내에 직접 작성된 스타일이며, 가장 높은 우선순위를 가진다.내부 스타일 시트: 태그 내에 작..
[CSS] Animation 동작 효과 주기 이번 1주차 과제 진행하면서, 처음 봤을 때 좀 막막했던 것이 있었다.무한 배너..!동적인 것은 항상 JavaScript 로 구현을 해와서 어떻게 하지? 가 제일 처음 든 생각이었던 것 같다.그래서 이번 과제에서 가장 흥미롭게 느꼈던 css animation 속성과 @keyframes에 대해 알아보고자 한다. 1. animation8가지 속성  2. @keyframes@keyframes에서는 애니메이션의 스타일을 구체적으로 제어한다.-> @keyframes animation-name { keyframes-selector {css-styles;}} @keyframes 를 하는 방법은1. animation 에서 지정했던 animation-name을 지정한다 ( 반드시! 같은 이름으로!)2. 애니메이션의 구체..

티스토리툴바