그럼에도 불구하고

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를 ..

grid layout 연습을 할 수 있는 Grid Garden라는 사이트를 소개해보고자 한다. https://cssgridgarden.com/#ko Grid Garden A game for learning CSS grid layout cssgridgarden.com CSS grid 속성을 이용하여 28문제를 풀어나가면 된다. 특별하게 어려운 건 없었지만 template를 row나 column으로 나눌 때 auto의 의미를 잘 파악해야 할 것 같다!

flex layout 연습을 할 수 있는 Flexbox Froggy라는 사이트를 소개해보고자 한다. https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 이 사이트에는 flex layout에 대한 각종 연습을 할 수 있다! justify-content, align-items, align-self, align-content, flex-direcion, order 등을 이용하여 단계별로 개구리를 배치하면 된다. 한국어로 번역해서도 볼 수 있으니 flex layout을 연습할 때 참고하길 바란다. :) 개인적인 리뷰로는 24단계까지 있는데 24단계에서 막혔다 ㅎ 막힌 이유는 내가 모르는 속성? ..

flexbox flexbox에서 제일 중요한 것은 flex-direction이다. flex-direction이란 flex 속성을 부여했을 때 기준점을 잡는 것을 말한다. 기본값은 row로 되어있다. 여기서 중요한 점은 flex-direction이 row일때 main-axis이 가로 축이며, cross-axis는 세로 축이라는 것이다. flex-direction이 column이면 main-axis는 세로축이며, cross-axis는 가로축이다. ※ flex-direction : row (기본값) main-axis : 가로 cross-axis : 세로 ※ flex-direction : column main-axis : 세로 cross-axis : 가로 이 부분을 확실하게 알고나니 내가 자주하던 실수가 왜 일..

오늘은 CSS 그리드 레이아웃에 대해 알아보자 [ CSS 그리드 레이아웃 ] 그리드 레이아웃을 많이 사용하면서 플렉스 박스에 이어 CSS 그리드 레이아웃(CSS grid layout)이라는 새로운 CSS 표준이 만들어졌다. 플렉스 박스를 사용할 때는 '주축'이라는 개념이 있어 수평이나 수직 중 하나를 기준으로 해서 요소를 배치한다. 하지만 CSS 그리드 레이아웃은 수평과 수직 어느 방향이든 배치할 수 있다. CSS 그리드 레이아웃에서는 그리드 항목을 배치할 때 가로와 세로를 모두 사용한다. 그래서 플렉스 항목은 1차원이고 CSS 그리드 레이아웃은 2차원이라 말한다. CSS 그리드 레이아웃은 가로 방향을 가리키는 줄(row)과 세로 방향을 가리키는 칼럼(column)으로 웹 화면을 구성한다. 그리고 칼럼과..