You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🎨 transition / transform / animation 속성 사용법
CSS 트랜지션 트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다. 상태 변화에 동반하여 변경되는 CSS 프로퍼티 값에 의한 표시의 변화를 부드럽게 하기 위해 애니메이션 속도를 조절한다. 쉽게 말하자면 요소에 마우스를 올렸을 경우, 색 혹은 크기가 변화하는 설정을 가미했는데, 뚝뚝 바로바로 변화하는 것 보단 부드럽게 전환되는 효과를 지정해 줄 때 사용한다고 보면 된다 transition은 전환되는 모션을 추가로 가미하는 속성이지 그 자체로 스타일을 주는 속성은 아니다. 그래서 :hover와 같은 가상 클래스 선택자(Pseudo-Classes) 또는 JavaScript의 부수적인 액션에 의해 발동한다. 그리고..
🎨 Aspect Ratio - 이미지 크기 비율 간단 제어
Aspect Ratio 종횡비 속성 과거에는 css에서 비율로 영역을 조절하게 할 수 있는 css 프로퍼티가 존재하지 않았다. 그래서 있는 속성으로 편법으로 하여 스크린 비율을 지정하여 사용하였다. 그렇지만 이제 css에서 최신 기능으로 드디어 aspect-ratio 라는 종횡비 전용 속성을 지원하게 되었다. aspect ratio 속성은 이미지나 동영상을 비율대로 줄이거나 늘리는 데 사용된다. 매우 직관적이라 다루기도 편하다. 다만 우리의 주적 IE 브라우저에는 지원이 안되기 때문에, 과거에서 사용되었던 간접적으로 비율을 구현하는 방법과 더불어, aspect ratio 속성 사용법을 소개할 예정이다. 과거 종횡비 조절법 1. 단순 지정 가장 간단한 방법은 직접 width와 height를 지정해서 하는 ..
🎨 클릭 이벤트 방지 pointer-events 속성
pointer-events 속성 css를 사용하여 클릭이벤트를 제어할 수 있는데, 그 방법 중 하나가 바로 CSS 프로퍼티인 pointer-events 이다. 이 프로퍼티를 사용하면 특정 요소에서의 클릭 이벤트를 동작하지 않도록 제어할 수 있다. none : 클릭 이벤트를 적용하지 않음 auto : 브라우저 자동으로 선택함 inherit : 상속 되어짐 만약 none의 값을 사용할 경우 클릭 이벤트가 동작하지 않으며 마우스 관련된 효과 (click, :hover) 역시 동작하지 않게 된다. 예를들어 아래와 같이 파란색 박스 영역과 하늘색 박스 영역이 있는데, 하늘색 영역이 파란색 영역을 위에 덮어 일부분을 가리고 있는 상태이다. 이 상태에서 가리고 있는 일부분 영역을 클릭하면 파란색 영역에 등록된 cli..
🎨 CSS 요소 숨김 처리 속성에 따른 특성 차이
숨김 처리 속성에 따른 특성 차이 요소를 숨길때 사용하는 CSS 속성은 여러 가지가 있다. 그러나 이들 방법 마다 제각기 고유의 특성을 지니고 있다. 이번 글에서는 이러한 방법들의 차이점에 대해 살펴보겠다. 숨김 css 속성 공간 점유 이벤트 탭 접근 opacity : 0 점유 활성 가능 visibility : hidden 점유 비활성 불가능 visibility : collapse 점유 (테이블 안에서만 비점유) 비활성 불가능 display : none 비점유 비활성 불가능 opacity: 0 투명도 처리 그러나 요소는 여전히 공간을 차지하게 되므로, 다른 요소들과의 간격이 유지된다. 요소가 보이지 않는 것뿐이지, 여전히 이벤트를 받을 수 있음 visibility: hidden 요소를 숨김 이 경우에도 ..
🎨 Flex에도 Grid와 같이 gap(여백)을 쓰자
CSS Flex gap 예전에는 flex box를 사용할때, 각 item들의 사이 공간을 주기 위해서는 margin을 사용해야 했다. 하지만 margin 과 gap의 차이점은 margin은 무조건 여백을 줘서 불필요한 공간을 만들지만, gap의 경우 엘리먼트 요소들의 사이에 인접한 요소가 있을때만 공간(space)을 만들기 때문에 훨씬 모던하다. 하지만 이제 flexbox도 grid와 같이 gap를 사용할 수 있게 되었다. 문법은 그리드와 완전히 판박이니 그대로 사용하면 된다. gap: [상하좌우 전체의 값]; gap: [상하 사이의값] [좌우 사이의값]; 동일한 여백 주기 1 2 3 4 5 6 7 8 9 .test-parent { display: flex; flex-wrap: wrap; gap: 10p..
🎨 스크롤을 부드럽게 - Scroll Snap 속성
CSS Scroll snap CSS Scroll snap은 웹 페이지에서 스크롤을 할 때, 요소가 스크롤되는 위치에 자동으로 스냅되도록 하는 CSS 속성이다. 예를들어 용자가 웹 페이지를 스크롤할 때 중간에 멈춰버리면 콘텐츠의 중간에서 멈춰 주요 콘텐츠의 일부만 보이게 되는데, 이를 미리 설정한 위치로 자동 스냅하여 자연스러운 스크롤 움직임과 함께 사용자 경험을 더욱 향상시키는 것이다. 스크롤 스냅이 없던 시절에는 자바스크립트로 일일히 요소 위치를 계산해서 조정해야 됬지만, CSS 속성을 통해 공식 지원함으로써 개발의 편리함과 더불어 성능도 비약적으로 상승했다고 볼 수 있다. Scroll snap 사용법 우선 스크롤 스냅을 적용할 부모 컨테이너 영역을 만들고, 그 안에 스냅될 자식 요소 영역을 만들어 준..
![[CSS] 📚 최신 CSS 기능 지원여부 확인 🎨 @supports](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbJht3R%2Fbtrijq1eqZU%2FCmThKK4BKkjkSaLbSB28sK%2Fimg.png)
[CSS] 📚 최신 CSS 기능 지원여부 확인 🎨 @supports
@supports 최신 스펙의 css값을 사용할 때, 해당 css를 제공하는 브라우저에 따라 맞춤형으로 적용할 수 있게 css를 선언할 수 있다. 방법은 바로 @supports 문법(기능 쿼리, feature query)을 이용하는 것이다. @supports 문법은 미디어 쿼리 문법을 사용하는 것과 유사하다. @supports (display:flex) { /* 만약 해당 브라우저가 flex를 지원 할 경우 아랫값을 적용 시킨다. */ .contents { display: flex; margin: 0 5px; align-items: center; justify-content: space-between; } .contents div { flex-grow: 1; } } @supports not (displa..
![[CSS] 📚 미디어 쿼리 - 반응형 레이아웃](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcbmZk3%2Fbtrhh7PT8vl%2FfGmW7ftyZUT37UvhkFJ3T0%2Fimg.jpg)
[CSS] 📚 미디어 쿼리 - 반응형 레이아웃
미디어 쿼리(Media Query) 란? 미디어 쿼리는 CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용한다. @media 키워드로 시작하는 미디어 쿼리의 문법 구조는 아래와 같다. @media (조건) { 스타일 } 스타일 부분에는 일반적인 CSS 코드가 들어가는데, 조건 부분이 만족될 때는 스타일이 적용되고, 만족되지 않을 때는 스타일이 무시된다. 미디어 쿼리를 사용해서 css에 적용하는 방법은 아래와 같이 3가지가 있다. 1. HTML의 link태그의 media속성에 값을 설정해 주는 방법 2. css파일 내에 직접 media를 설정해 주는 방법 @media all and (min-width:480px) { ... } 3. media query를 설정한 파일을 css파일 내에서 impo..
![[CSS] 📚 그리드(Grid) 💯 총정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcHUmp9%2Fbtrg4KfAsQh%2FM6rlrkEeWkPlQA8PReOqY0%2Fimg.png)
[CSS] 📚 그리드(Grid) 💯 총정리
Grid Grid가 나오기 이전에는, float이나 table, flex를 이용해 레이아웃을 짰다. CSS Grid는 예전부터 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈이다. 그리드 용어 그리드 컨테이너 display: grid로 표기하며 모든 그리드 아이템의 부모 요소이다. 일단 컨테이너가 될 요소에게 grid를 주면 그때부터 자식 요소들은 Grid Items이 된다. HEADER MAIN ASIDE FOOTER [그리드 아이템 정렬] align-self 단일 그리드 아이템(Item)을 수직(열 축) 정렬 값 의미 기본값 normal stretch와 같습니다. normal start 시작점(위쪽) 정렬 center 수직 가운데 정렬 end 끝점(..
![[CSS] 📚 플랙스(Flex) 💯 총정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FPGp00%2FbtrgUo5WGcq%2FQmnpxfv6BD3K0Lspkwzd6k%2Fimg.jpg)
[CSS] 📚 플랙스(Flex) 💯 총정리
CSS Flexbox Flexbox는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 니즈에 부합하기 위한 CSS3의 새로운 layout 방식이다. 요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있다. Q. 요즘 다들 grid 쓰는데, flex이제 안쓰는거 아닙니까? A. 정답은 No다. 물론 grid로만 레이아웃을 모두 구현은 가능하다. 하지만 단순한 컨텐츠를 가로 정렬하는데는 flex가 훨씬 간단하게 구현이 가능 하기 때문에, grid는 2차원 행렬 같이 큰 틀 레이아웃을 구현 할때 쓰고, flex는 1차원 행렬 같이 안의 컨텐츠 아이템을 가로 정렬할때 자주 쓴다고 보면 된다. 다음..
🎨 테이블(table) 꾸미기 CSS 속성 정리
CSS 테이블 스타일링 html 테이블에 다음 속성을 사용하여 CSS 스타일을 적용할 수 있다. 속성 설명 border 모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있음. border-collapse 테이블의 테두리를 한 줄로 나타낼지를 설정함. border-spacing 테이블 요소(th, td)간의 여백을 설정함. caption-side 테이블의 캡션(caption)을 설정함. empty-cells 테이블 내의 빈 셀(cell)들의 테두리 및 배경색을 표현할지 안 할지를 설정함. table-layout 테이블에 사용되는 레이아웃 알고리즘을 설정함. 강의에 사용할 예제 html 기본적으로 html의 태그는 행과 열을 정렬해주지만 아무 스타일 없이 적용된다. 참치 고래 날치 상어 문어..
🎨 float 속성 사용법 한방 정리
CSS Float float 프로퍼티는 해당 요소를 다음 요소 위에 떠 있게 한다. 여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것이다. 그래서 보통 레이아웃을 구성할 때 요소를 가로 정렬하기 위해 사용되는 기법이다. 예를 들어, 문서에 사진과 그림이 있을 때, 그림을 왼쪽이나 오른쪽으로 띄워서 정렬 하거나 각 객체를 오른쪽이나 왼쪽으로 정렬하여 전체 문서를 배치(layout)할 때도 사용할 수 있다 float 속성 프로퍼티값 Description none 요소를 떠 있게 하지 않는다. (기본값) right 요소를 오른쪽으로 이동시킨다 left 요소를 왼쪽으로 이동시킨다. 사용법은 간단하다. 부유하게 하고 싶은 요소에 fl..
