그럼에도 불구하고

텍스트를 세로로 표시하는 법을 알아보자 // 세로로 왼쪽 -> 오른쪽 writing-mode: vertical-lr; // 세로로 오른쪽 -> 왼쪽 writing-mode: vertical-rl; // 영어는 추가로 작성 text-orientation: upright; writing-mode 속성을 이용해서 세로로 텍스트를 표시해 줄 수 있다. 한글을 타이핑할 때는 세로로 보이지만, 영어로 타이핑될 때는 기존 속성으로는 90 º 돌아간 모습으로 표시된다. 이를 해결하는 방법으로는 text-orientation 속성을 이용하면 된다.

조건문을 이용하여 반응형 웹을 만들어보자 [ _responsive.scss ] @mixin responsive($device){ @if $device == "maxDesktop" { @media screen and (min-width: 1024px){ @content; } } @else if $device == "minDesktop" { @media screen and (min-width: 768px) and (max-width: 1023px){ @content; } } @else if $device == "tablet" { @media screen and (min-width: 480px) and (max-width: 767px){ @content; } } @else if $device == "phone..

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단계에서 막혔다 ㅎ 막힌 이유는 내가 모르는 속성? ..

mixin, extend, 모듈화(import/use)에 대해 알아보자 [ @ 문법 ] Sass는 작업을 편하게 해 줄 @으로 시작하는 At-Rules라는 문법이 있다. 기본 CSS에서도 @으로 시작하는 문법들이 몇 개 있다. (@font-face 또는 @counter-style, @media 등) Sass에서는 여기에 더해 추가적인 기능들을 제공하는 at-rules 들이 추가된다. 예를 들면 @mixin / @include : 스타일 청크(묶음)를 쉽게 재사용할 수 있다. @extend : 여러 선택자가 스타일을 상속받도록 할 수 있다. @import / @use : 다른 스타일시트에 있는 변수, 함수, 믹스인 등을 불러와 결합해서 쓸 수 있다. @function : SassScript에서 사용할 수 ..

Sass의 기본 문법을 익혀보자 [ 중첩 ] 우리가 사용하는 CSS는 ( Cascading Style Sheet )로 가장 큰 특징은 "Cascading" 위에서 아래로 흐르는 특징을 갖고 있다. 그래서 CSS는 .grand-parent > .parent > .child와 같이 부모에서 자식 순서로 작성한다. 아래의 예시를 보자 .container-grand-parent { color: red; } .container-grand-parent .container-parent { color : orange; } .container-grand-parent .container-parent .container-child { color : yellow; } 부모에서 자식으로 내려가면서 CSS를 적용하고 있지만, 길..

Sass에 대해 알아보자 [ Sass ] Sass(Syntactically Awesome StyleSheets)는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장이다. CSS의 간결한 문법은 배우기 쉬우며 명확하여 프로젝트 초기에는 문제가 없이 보이지만, 프로젝트 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워지는 단점도 가지고 있다. 이러한 CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다. 변수의 사용 조건문과 반복문 Import Nesting Mixin Extend/Inheritance CSS와 비교하여 Sass는 아래와 ..

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 : 가로 이 부분을 확실하게 알고나니 내가 자주하던 실수가 왜 일..

input type="file"에 대해 알아보자 code 이미지 미리보기 1. type을 file로 할 경우 파일을 선택할 수 있는 버튼이 생기고 원하는 파일을 넣을 수 있다. ( 단, 다중 선택 불가 ) 파일을 선택해서 넣으면 파일 이름을 보여준다. 2. type을 file로 하고 mutiple 속성을 지정하면 한 번에 여러 파일을 선택해서 넣을 수 있다. 3. accept 속성을 지정하면 내가 지정한 파일 형식만 올릴 수 있다. 위와 같이 "image/*"라고 지정하면 이미지 파일만 업로드 가능하고, 파일 형식은 상관없다는 뜻이다. 이렇게 파일 형식이 자동으로 지정되어 있다. 하지만 모든 파일로 바꾸면 accept 속성을 지정해도 올라간다는 단점이 있다. 4. accept 속성은 image뿐만 아니라..

오늘은 부트스트랩에 대해 알아보자 Bootstrap은 빠르고 간편한 반응형 웹 디자인(responsive web design)을 위한 open-source front-end framework이다. HTML, CSS JavaScript로 만들어진 typography, 입력양식(forms), 버튼, 테이블, 탭, 네이베이션, 이미지 캐러셀 등을 제공하며 추가적으로 JavaScript plugin들을 제공한다. https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components..

오늘은 벤더 프리픽스에 대해 알아보자 CSS3 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스(Vendor Prefix)를 사용해야 한다. Can I use? 에서 제공하는 브라우저별 CSS 지원 정보를 보면 텍스트와 요소의 선택을 방지하는 user-select 프로퍼티는 모든 브라우저에 벤더 프리픽스를 사용하여야 한다. 브라우저의 버전이 올라감에 따라 벤더 프리픽스를 사용하지 않아도 될 수 있다. 그러나 구형 브라우저를 지원하기 위하여 벤더 프리픽스를 사용하여야 할 필요가 있다. Can I use... Support tables for HTML5, CSS3, etc caniuse.com * { -webkit-user-select: none; /*..

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