본문 바로가기

1주차

 (28)
웹 접근성과 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. 애니메이션의 구체..
HTML Semantic Tag를 적극 활용해야 하는 이유 웹 프론트엔드를 배우기 시작하면 가장 처음 공부하는것은 HTML입니다. HTML을 배우다보면 참 다양한 태그들을 배우게 되죠.제일 먼저 hello world를 찍기 위한 h1~h6, p, span 태그, 각종 기능을 가진 a, button, input 태그, 시멘틱 태그로 소개되는 header, main, footer, section, article 태그…하지만, 거의 모든 태그를 대체할 수 있는 무적의 태그가 있습니다. 바로 div 태그!div 태그만 있으면 테이블 레이아웃도 만들 수 있고, 섹션 분리도 가능하고, 버튼, 카드 등등 거의 대부분을 만들 수 있습니다.근데!! 왜 사람들은 시멘틱 태그를 사용해야 함을 강조하는걸까요?? 시멘틱 태그가 그렇게 중요한걸까요??네. 중요합니다.❓시멘틱 태그가 뭘까..
[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 (줄바꿈..

티스토리툴바