[flexbox] 레이아웃을 잡을 때 사용하는 flex 속성

Flexbox는 W3C에서 2009년 7월 첫 번째 초안을 발표했습니다. 이후 여러 차례 개정되어 2012년에 우리가 알고 있는 문법으로 업데이트되었습니다. 2015년 마지막 초안이 발표되었고, 이후로도 계속 업데이트했습니다. 무려 10년도 더 된 속성이지만 브라우저 호환성을 위해 오랜 기간 동안 사용하지 못했던 속성입니다. flexbox 개념이 도입되기 전까지 레이아웃을 잡기 위해서는 position과 float 속성을 사용해야만 했습니다. 그 속성도 정적인 레이아웃을 만들기에는 무난하게 사용이 가능하지만 사용이 제한적이고 비효율적인 코드를 작성해야 하는 단점이 있었습니다. 모바일이 활성화되면서부터는 개선된 코드가 절실히 필요했습니다.  Flexbox 기본 개념저의 블로그의 메뉴 디자인입니다. 가로로 ..

• topic HTML&CSS
• · 2024. 10. 7.
• textsms

2021년 이후 생겨난 CSS의 새 기능 모음

이 글을 시작하며과거에 CSS는 CSS1, CSS2라는 버전명을 붙여 주기적으로 릴리즈가 되었습니다. 하지만 점점 더 빠르고 복잡하게 변화하는 웹/모바일 환경에 대응하기 위해 CSS도 발 빠르게 대처해야 했습니다. CSS3 이후로는 버전으로 공개하지 않고 속성별로 새 기능을 발표하고 있습니다. 현업에 있는 분들은 CSS3이 공개 됐을 때, "HTML5와 CSS3을 배워야지!"하고 신기술을 습득하셨을 겁니다. 그런데 이렇게 속성이 하나씩 공개되다 보니, 한참 후에 그 소식을 접하는 일이 빈번하게 일어날 것이라 생각합니다. 그리하여 새로운 속성에 대한 안내글을 모아보는 포스트가 필요할 것 같아 이 글을 작성하게 됐습니다.CSS의 새 기능:is() 선택자2024.09.27 - [HTML&CSS] - CSS :..

• topic HTML&CSS
• · 2024. 9. 27.
• textsms

CSS :is() 선택자

CSS :is() 선택자가 없던 시절의 코드CSS에서 :is()와 :where() 선택자를 내놓기 전까지는 무수히 많은 중복 코드가 발생했습니다. 아래와 같이 모든 요소를 콤마로 연결해 디자인을 작성해야 했습니다.aside h1,aside h2,aside h3,article h1,article h2,article h3 { color:darkblue; } CSS :is() 선택자 사용법:is() 선택자는 :where() 선택자와 마찬가지로 여러 선택자를 그룹화하여 코드를 간결하게 만들어줍니다. :is() 선택자는 괄호 안에 쉼표로 구분하여 여러 요소를 인자로 받습니다. 사용법은 :where()와 완전히 동일합니다.:is(p, ul, ol) { margin:0; padding:0; } 위 코드는 , , 태..

• topic HTML&CSS
• · 2024. 9. 27.
• textsms

CSS :where() 선택자

:where() 선택자가 없던 시절의 CSS 코드CSS에서 유용한 선택자를 많이 릴리즈하는 것은 무척 반가운 일입니다. :where() 선택자는 CSS 코딩 시 엘리먼트나 클래스를 콤마로 연결해 코드 효율성을 해치는 것을 해소해 주는 일을 합니다..article h1,.article h2,.article h3,.sidebar h1,.sidebar h2,.sidebar h3 { margin:0; padding:0; }기존 코드는 위와 같이 h1~h3 엘리먼트에 동일하게 패딩, 마진을 없애고 싶다면 콤마로 연결을 해야 합니다. 엘리먼트의 h1~h3에도 동일한 규칙을 적용시키고 싶다면, 콤마로 연결된 요소를 3개를 추가해야겠지요. 콤마를 잘못 찍거나, 한 줄을 누락시킨다면 너무 사소해서 잘 찾기 힘든 오류가..

• topic HTML&CSS
• · 2024. 9. 26.
• textsms

CSS :not() 선택자 (~이 아닐 때)

:not() 선택자의 뜻과 기본 사용법CSS :not() 선택자는 특정 조건에 일치하지 않은 요소를 선택하는 데 사용합니다. 아래 코드와 같이 괄호 안에 특정 조건을 입력하는 방식입니다. // p 태그가 아닌 요소:not(p) { margin:0; }// .last 요소가 아닌 divdiv:not(.last) { margin-bottom:20px; } :not 선택자의 응용괄호 안에 HTML 엘리먼트를 작성하거나, 클래스/Id 네임을 작성하는 방식으로도 작성하지만 조금 더 복합적으로 사용할 수 있습니다. 아래 코드와 같이 콤마로 여러 조건 값을 쓰거나 [disabled], [readonly] 처럼 상태를 쓸 수 있습니다.  See the Pen Untitled by flexbox (@flex-gro..

• topic HTML&CSS
• · 2024. 9. 25.
• textsms