웹 개발 기술이 빠르게 발전하면서 CSS 역시 지속적으로 변화하고 있습니다. 2025년을 맞아 프론트엔드 개발자들이 주목해야 할 최신 CSS 트렌드를 정리해보았습니다.1. 컨테이너 쿼리(Container Queries)반응형 디자인에서 미디어 쿼리는 필수적이지만, 요소의 크기에 따라 스타일을 변경하는 것이 어렵습니다. 컨테이너 쿼리는 이러한 문제를 해결하며, 부모 요소의 크기에 따라 스타일을 동적으로 적용할 수 있도록 도와줍니다.@container (min-width: 600px) { .card { display: flex; }}2. CSS 네이티브 스크롤 애니메이션JavaScript 없이도 부드러운 스크롤 애니메이션을 구현할 수 있는 CSS 기능이 주목받고 있습니다. scroll-behavio..
sass(scss) -> css 전처리기 언어다. 전처리기 언어는 css 문법과 유사하지만 훨씬 많은 기능을 사용할 수 있다.직접 동작시키지 않는데, 전처리기 언어 문법으로 코딩 후 css로 컴파일해서 웹으로 동작시킨다. css 코드를 생산해내기 위해 사용하는 일종의 도구나 마찬가지다.sass와 scss는 문법 생김새는 다르지만 사실 같은 파생언어나 다름없다. sass는 코드를 css로 해석하는 역할을 하는 전처리기로써의 의미고, 다른 하나는 문법으로써의 의미다. scss는 css와 완전히 호환되도록 새로운 구문을 도입한 css의 상위 호환 스타일시트다.scss 문법을 기반으로 코드를 작성하면 sass 전처리기의 도움을 받아 컴파일러가 이를 css로 빌드업가능하다.또 압도적으로 더 많이 사용된다.sass..
더보기팀장님이 공유해주신 웹에 가서 읽고 정리해봄,,, 강의가 아니고 글이라 좀 잘 안 읽히긴 했다 html - 요소 (element)hello (시작태그, 콘텐츠, 닫는 태그로 구성) html - 속성 (attribute) (속성명 = 속성값) seo - 검색 엔진 최적화seo 같은 마케팅 도구를 사용해 검색엔진이 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트 조정 크롤링로봇이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집검색엔진의 크롤러가 수행 인덱싱검색 사이트 이용자가 검색할 만한 키워드를 미리 예상해 검색 키워드에 대응하는 인덱스(색인)을 만들어둠검색엔진의 인덱서가 수행 시맨틱 요소검색 엔진은 html 코드만으로 의미를 알 수 있어야 하는데이때 시맨틱 요소를 해석함 시맨틱 태그브..
더보기주말은 공부를 못했다. . . 이모집 갔다가 집에 오느라 + 새로 산 데스크탑 세팅. . .그리고 시험도 있었고. 오늘도 있다. 하지만 해야죠?이제 css를 마저 정리해보고자 한다. css 급하게 강의를 듣느라 정말 강의만 듣고 넘겼는데, 막상 웹페이지를 만들기 시작하니 레이아웃 만드는 게 쉽지 않아서... 플렉스 박스는 무엇이냐... 행 또는 열을 주축으로 설정하여 웹 요소를 배치, 정렬하는 1차원 레이아웃 방식이다.플렉스 컨테이너, 플렉스 아이템 간의 상호작용을 통해 배치, 정렬을 결정한다.플렉스 컨테이너는 플렉스 방식으로 레이아웃을 결정할 요소고,플렉스 아이템은 플렉스 컨테이너 내부에서 플렉스박스 방식으로 배치되는 요소다.시작은 display에 flex를 주면 되는데display: flex..
더보기우리 팀의 미니 프로젝트 주제는 팀과 팀원을 소개하는 간단한 페이지를 만드는 것이었다. 우리 팀에선 무려 미리,,,! 와이어 프레임을 짜오신 팀원 분이 계셔서 수월하게 진행할 수 있었다. 문제는 나였다... ... 서버는 불안하지, 와이파이는 끊기지, 메모리 용량 부족(ㅋㅋ ㅜ) 그래서 깃도 제대로 안 되지... 덕분에 그 전에 작성한 코드는 없다. 하여튼 어제 기억이 잘 나진 않기는 한데 나는 정렬 때문에 꽤 오래 씨름했었었다. 하지만 파일이 날라간 덕분에 ^,.^ 다시했읍니다 제일 애먹었던 것정렬...생소했던 개념 기억이 잘 안 나고 생소했던 태그 정리 1. user select:none : 드래그를 막음 2. webkit-text-stroke : 글씨 테두리 설정 3. animation - ..