그럼에도 불구하고

요소의 밝기와 채도를 조절해 보자 [ 요소 밝기 조절하기 ] ● 밝기를 조절하여 요소를 눈에 띄게 만들고 싶을 때 ● 포커스 상태 효과를 주고 싶을 때 밝기 조절은 CSS의 filter 속성에 brightness() 메서드를 사용하여, brightness(100%)가 기본 상태다. 인수가 100% 보다 크면 밝아지고 작으면 어두워진다 CSS Transitions와 Web Animations API의 샘플을 확인해 보자 ※ CSS Transitions를 사용한 샘플 HTML HTML 삽입 미리보기할 수 없는 소스 CSS HTML 삽입 미리보기할 수 없는 소스 JavaScript HTML 삽입 미리보기할 수 없는 소스 클릭 전 클릭 후 ※ Web Animations API를 이용한 샘플 참고 :) https..

내가 사용하고 싶은 패턴을 클릭하여 사용하면 된다, :) https://projects.verou.me/css3patterns/ CSS3 Patterns Gallery CSS3 Patterns Gallery Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for ex projects.verou.me

스크롤 앵커링에 대해 알아보자 [ 스크롤 앵커링 / overflow-anchor ] 스크롤 앵커링이란 데스크톱 혹은 모바일 기기를 통해 웹 페이지를 볼 때, 이미지 로딩 등으로 화면이 갑자기 다른 곳으로 스크롤링되어 버리는 현상을 해소하기 위해 도입된 기능이다. 데스크톱이나 모바일 기기를 이용해서 인터넷 뉴스나 블로그 같은 웹 페이지들을 보다 보면, 갑자기 웹 페이지의 다른 곳으로 화면이 스크롤되어 버리는 현상이 나타나고는? 했다. ( 이제는 그러지 않는다. 적어도 크롬에서는!!! ) 이는 웹 페이지를 로딩하는 방식에서 용량이 작은 텍스트를 먼저 로딩하고, 고해상도의 이미지나 비디오 같은 오브젝트들을 나중에 로딩해서 발생하는 문제이다. 사용자가 웹 페이지를 스크롤 다운로드 하면서 보고 있을 때, 이미 스..

Accordion을 만들어보자 accordion.html HTML 삽입 미리보기할 수 없는 소스 accodion.css HTML 삽입 미리보기할 수 없는 소스 accordion.js HTML 삽입 미리보기할 수 없는 소스 arrow_black.svg ※ 화살표 아이콘의 경우 이 소스 코드를 그대로 사용해도 되고, 다른 걸 사용해도 무방합니다 :) HTML 삽입 미리보기할 수 없는 소스 REF: https://stickode.tistory.com/504

max-( width / height )과 min-( width / height )의 여러 쓰임새에 대해 알아보자 [ max- width / height ] max-width와 max-height는 어떤 요소의 최대 너비와 높이값을 설정하는 속성이다. 반응형 웹 디자인에서 화면에 따라 스타일을 적용할 때 자주 사용한다. ※ max-width 속성 어떤 요소의 최대 너비를 지정하며, 요소의 너비값이 max-width 너비값보다 커지는 것을 방지한다. 즉, max-width는 width 속성값을 무효화시킨다. 예를 들어 이미지 가로 너비가 500px 일 때, max-width: 400px으로 설정하면 400px 이하로만 이미지가 보인다. ※ max-height 속성 요소의 최대 높이를 지정한다. max-he..

layout 만들기 Ver_5 소스코드 더보기 화면 너비 1220px 초과 section { clear: both; width: 100%; height: 200px; background-color: #bebee8; display: flex; justify-content: space-around; align-items: center; } section>div { width: 15%; margin: 5%; height: 80%; background-color: #9090ed; border-radius: 20px; } 화면 너비 1220px 이하 /* 화면 너비 0 ~ 1200px */ @media (max-width: 1220px) { #wrap { width: 100%; } .bottom-article {..

layout 만들기 Ver_4 width 1220px 초과 width 1220px 이하 /* 화면 너비 0 ~ 1200px */ @media (max-width: 1220px) { #wrap { width: 100%;} section > div { width: 23%;} section > div:nth-child(5n) { display: none;} } section 안에 div 5번째와 10번째를 display: none;으로 만들어 한 줄에 4개씩 표시 width 768px 이하 /* 화면 너비 0 ~ 768px */ @media (max-width: 768px) { #wrap { width: 100%;} section > div { width: 31.333333%;} section > div:nt..

Elarm Artists 사이트를 따라 해보자 https://elamartists.ac.nz/? year_select=2022&themes_select=all&practice_areas_select=all Elam Artists — The University of Auckland elamartists.ac.nz 따라 할 Elarm Artists main page 완성본 HTML 더보기 Year: 2022 2021 2020 2019 Programme: ALL BFA BFA(Hons) PGDipFA Themes: All Abstraction Affect Agency Practice: All Artist's Book Ceramics Comics Students Susu Ali senescall Alyssa K..

layout 만들기 Ver_3 ※ 화면너비 1260px 초과 ※ 화면너비 1260px 이하 /* 화면 너비 0 ~ 1240px */ @media (max-width: 1260px){ #wrap{ width: 100%;} section:nth-of-type(1) { height: 300px;} section:nth-of-type(2) { height: 300px;} section:nth-of-type(3) { width: 100%; height: 300px;} article { width: 100%; height: 300px;} } 첫 번째 section과 두 번째 section의 높이를 300px로 수정 => aside의 높이가 600px이기 때문에 기존에 section의 높이가 200px 일 때는 se..

layout 만들기 Ver_2 ※ 화면 너비 1220px 초과 width 100%, 전체 영역 차지 ※ 화면 너비 1220px 이하 /* 화면 너비 0 ~ 1200px */ @media (max-width: 1220px){ aside { width: 40%; } section { width: 60%;} article { width: 100%; height: 300px; float: none; clear: both;} } aside 영역이 전체 너비의 40%, section 영역이 전체 너비의 60%를 차지하며, article은 아래로 내려간다. ※ 화면 너비 768px 이하 /* 화면 너비 0 ~ 768px */ @media (max-width: 788px){ aside { width: 100%; } s..

layout 만들기 Ver_1 시맨틱 태그 참고 : https://despiteallthat.tistory.com/57 [HTML] 시맨틱 웹(Sementic Web) / 시맨틱 태그(Sementic tag) 오늘은 시맨틱 웹(Sementic Web)과 시맨틱 태그(Sementic tag)에 대해 알아보자 [ 시멘틱 웹 ] 시멘틱 웹이란? 시멘틱 웹은 '의미론적인 웹'이라는 뜻으로, 현재의 인터넷과 같은 분산 환경에서 리소스(웹 despiteallthat.tistory.com ※ 화면너비 1200px 초과 #wrap의 영역의 width 1200px ※ 화면 너비 0 ~ 1200px @media (max-width:1200px){ #wrap { width: 98%; } } #wrap 영역의 width 전체..

미디어쿼리에 대해 알아보자 [ 미디어쿼리 ] 미디어 쿼리는 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술이다. @media only all and (조건문) {실행문} @media : 미디어 쿼리가 시작됨을 표시한다. only : 미디어 쿼리 구문을 해석하라는 명령어이다. (생략가능) all : 미디어 쿼리를 해석해야 할 대상을 나타낸다. (생략가능) all : 모든 미디어 유형해서 사용할 CSS를 정의 print : 인쇄 장치에서 사용할 CSS를 정의 screen : 컴퓨터 스크린에서 사용할 CSS를 정의 aural : 화면을 읽어 소리로 출력해주는 장치에서 CSS를 정의 tv : TV에서 사용할 CSS를 정의 handheld : 손에 들고 다니는 장치를 사용할 CSS를 ..