프레임워크/CSS66 [생활코딩] transition transition은 "전환"이라는 뜻을 가지고 있고, CSS의 여러가지 효과(속성)들에 값이 변경 되었을 때 그 전환을 부드럽게 하는 기능을 말합니다. 예를 들어 폰트가 10이었다가 마우스를 올렸을 때 폰트를 100으로 변경한다고 했을 때 10에서 100이 한번에 탁 변하는 것과 부드럽게 변하는 것 중 사용자들을 부드럽게 전환되는 것을 더 선호 합니다. 이때 이 전환을 transition을 통해 조작 할 수 있습니다. 첫번째 예제 더보기 Click transition-property => 장면 전환 효과를 어떤 엘리먼트에게 줄 것인가 transition-duration => 장면 전환 효과를 몇초 동안 지속 할 것인가 축약형 => transtion: propery duration; 복수 설정 시 => .. 2022. 2. 6. [생활코딩] transform transform은 어떠한 엘리먼트가 있을 때 그 엘리먼트의 크기, 엘리먼트의 어떤 회전 또는 비틀기 정도를 설정하는 속성입니다. 위와 같이 포토샵에서 진행하던 작업들을 CSS의 transform을 사용하여 구현 할 수 있습니다. transform에 사용 할 수 있는 속성은 매우 많고, 그에 따른 단위도 약간씩 다릅니다. 대표적으로 px, deg(각도를 설정하는 단위), rem/em 등등이 있습니다. 필요 할 때마다 아래의 CSS 명세서를 통해서 찾아보면 됩니다 transform - CSS: Cascading Style Sheets | MDN The transform CSS property lets you rotate, scale, skew, or translate an element. It modifi.. 2022. 2. 5. [생활코딩] blend filter는 하나의 이미지에 효과를 주는 방식이고, blend는 "혼합한다, 섞는다"는 뜻으로, 두 개 이상의 이미지를 혼합해서 여러가지의 임펙트를 만들어 내는 방식입니다. [ background-blend-mode ] background-color와 background-image를 혼합 할 때는 background-blend-mode를 사용합니다. background-blend-mode에 어떤 값을 부여 하냐에 따라 여러가지 효과를 줄 수 있습니다. 즉, 백그라운드 효과들 간에 블렌딩을 할 수 있는 속성입니다. 더보기 [ mix-blend-mode ] 어느 요소의 콘텐츠가 자신의 배경 및 부모와 어떻게 혼합되어야 하는지 지정 즉, 콘텐츠와 백그라운드 간에 블렌드를 할 수 있는 속성입니다. 더보기 Lo.. 2022. 2. 5. [생활코딩] filter filter 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다. 보통 필터는 이미지, 배경, 테투리 렌더링을 조정 하는 데 사용됩니다. (+ 중첩으로 효과를 부여 할 수도 있습니다.) Mountain 2022. 2. 5. [생활코딩] background 특정 엘리먼트에 배경 이미지나 배경 컬러를 정의하는 것이 백그라운드라는 효과입니다. [ 대표적인 속성 ] background-color : red; → 백그라운드의 색상을 결정 해주는 속성 background-image : url(); → 백그라운드의 이미지를 삽입 해주는 속성 background-repeat : no-repeat (repeat, repeat-x, repeat-y) → 백그라운드 이미지의 반복 여부를 결정하는 속성 background-attachment : fixed (scroll) → 배경 이미지를 뷰포트 내에서 고정 할 지 아니면 자신의 컨테이닝 블록과 함께 스크롤 할 지 지정하는 속성 즉, 배경 이미지의 스크롤 여부를 정하는 속성 background-size : contain (co.. 2022. 2. 5. [생활코딩] float float는 사전에서 찾아보면 "붕 뜨다", "부유하다"라는 뜻을 지니고 있는 단어입니다. 글의 본문 안에서 이미지를 자연스럽게 삽입 할 때 사용하는 기법입니다. float를 많이 사용하는 곳 중 하나는 삽화 삽입 뿐만 아니라 레이아웃을 잡을 때도 사용합니다. Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro aperiam laboriosam cumque ipsam dolore facere commodi modi aliquid. Beatae obcaecati culpa id suscipit in praesentium, doloribus rem a, cupiditate eveniet necessitatibus quo autem velit duc.. 2022. 2. 4. [생활코딩] Media Query 여러 사용자들에게 어떤 정보를 매개 해주는 매체들을 미디어라고 합니다. 쿼리는 "미디어의 상태를 미디어에게 물어봐서 그 상태에 따라 다른 디자인을 할 수 있게 한다"라는 느낌입니다. 화면에 크기에 능동적으로 디자인이 반응해서 거기에 최적화된 모습을 보여주는 반응형 디자인을 만들 때 사용됩니다. ~500px : red; 501~600px : green; 601px~ : blue 생활코딩 html css javascript Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis veniam totam labore ipsum, nesciunt temporibus repudiandae facilis earum, sunt autem illum q.. 2022. 2. 4. [생활코딩] Multi Column [ Multi Column이란? ] 신문과 같이 화면에 크기가 큰 매체에서 사용하는 레이아웃 기법입니다. 만약 저 많은 텍스트를 한 줄로 늘여 쓴다면 이 글을 읽는 것이 상당히 불편해집니다! 그래서 컬럼(열)을 나눠서, 조각조각으로 만들어서 읽기 편하도록 만드는 기법을 Multi Column이라고 합니다. 이렇게 많은글자가 한 줄로 나열되어 있다면 사용자가 읽기에 매우 불편합니다! [ Multi Column 속성 ] column-count => 화면을 분할해준다. text-align : justify => 글자 양옆을 가지런하게 해 준다. column-width => 칼럼의 폭을 지정 해준다. + 화면이 작아지거나 커지면 알아서 단을 줄이고, 늘려준다. column-gap => 컬럼의 간격을 설정해준다... 2022. 2. 4. [생활코딩] flex : holy grail layout [ holy grail layout ] : 성배 레이아웃은 일반적으로 5개의 영역으로 구성이 되는데요. 회면 최상단에 각각 헤더(header)와 풋터(footer) 영역이 위치하고, 그 사이의 영역이 다시 네비게이션(nav), 메인(main), 사이드바(aside) 영역으로 나누어지게 됩니다. 시멘틱(semantic) HTML을 이용해서 성배 레이아웃을 마크업을 해보면 다음과 같은 구조를 가지게 됩니다. 비오는 날 개구리 html css js 비오는 날 개구리 블로그 AD 홈페이지 2022. 2. 3. 이전 1 2 3 4 5 6 ··· 8 다음 728x90
