이번 포스트 시리즈에서는 SASS에 대해서 알아보는 시간을 가져보겠습니다. 사실 CSS를 잘 알고 있다면 SASS를 사용하고 익숙해지는데 큰 어려움을 느낄 사람은 없다고 생각합니다. 그 이유는 SASS는 퍼블리셔/개발자들이 CSS를 더 쉽고 반복 없이 효율적으로 사용할 수 있게 만든 것이기 때문입니다. SASS는 전처리기이기 때문에 결국에 최종 결과물은 네이티브 CSS형태로 바뀌지만, SASS (Syntactically Awesome Style Sheets)가 제공하는 탁월한(?) 문법을 사용하면 개발자들이 가장 싫어하는 반복적이고 귀찮은 일들을 많이 줄일 수 있게 됩니다. SASS의 장점 앞서 언급했지만 SASS의 가장 장점은 효율성에 있습니다. SASS가 어떻게 효율적인 코드를 작성할 수 있도록 해주..

이번 포스트에서는 이미지 특정 부분이 반사된 그림자 효과를 만들어 보도록 하겠습니다. 필자는 원래 box-shadow 속성을 사용해 그림자를 줬지만 이번 홈페이지 리뉴얼 작업으로 인해 좀 더 사실적인 그림자를 구현하기 위해 해당 방법을 사용하게 되었습니다. 언뜻 보면 티가 안 날 수도 있지만 위와 같이 캐러셀 슬라이드 같은 곳에 적절히 적용해주면 좀 더 입체적이고 현실적인 그림자 효과를 낼 수 있습니다. HTML 마크업은 그림자 효과를 줄 이미지 태그를 두 개 넣어주시거나 div태그에 background 속성으로 이미지를 불러오시면 됩니다. 본 포스트에서는 img 클래스를 가진 div와 해당 div의 ::after 가상 요소에 background 속성을 사용해보도록 하겠습니다. CSS 해당 효과를 위해 ..

이번 포스트에서는 여러 프로젝트를 진행하고 강의를 들으면서 노트해뒀던 HTML과 CSS 작성 시 주의해야 할 점과 팁을 공유해볼까 합니다. 물론 HTML과 CSS를 꼭 이런 식으로 작성해야 하는 건 절대 아니며 필자도 이 모든 걸 다 고려하면서 작성하진 못하고 있습니다. 다만, 더 효율적이면서 가독성도 좋은 CSS 코드를 작성하려고 매번 노력하고 있고, 해당 포스트를 읽는 분들께서도 좀 더 나은 방향으로 나아갈 수 있었으면 하는 마음에 몇 가지 적어보도록 하겠습니다. HTML이 어떤 역할의 언어인지 알자 필자가 처음 마크업을 할 때 가장 많이 했던 실수 중 하나는 HTML을 작성할 때 스타일적인 요소도 함께 고려를 하면서 마크업을 했던 점입니다. HTML의 가장 근본적인 역할은 문서의 구조를 잡고 독자에..

해당 포스트는 필자가 이전에 작성해둔 TIL을 수정해서 재작성한 글입니다. GRID란 무엇인가 격자 구조를 만드는 행과 열, 모듈로 구성 - Grid Layout GuideBook 비율을 자유자재로 변경시키고 레이아웃의 균형을 쉽게 맞출 수 있음. 예전에는 table을 사용해 레이아웃을 잡기도 했는데 해당 방법은 depth가 깊어져 사용성이나 접근성면에서 좋지 않았는데, GRID를 사용하면 그런 문제 없이 최소한의 마크업과 css로 쉽게 구현 가능함. 다양한 디바이스에 최적화된 인터페이스를 미디어 쿼리와 함께 사용하여 쉽게 제공할 수 있음 (반응형 디자인에 최적화) 인터넷 익스플로러에서 지원하지 않는 관련 속성이 다수 있음 Grid와 Flexbox의 차이점 가장 큰 차이점은 flexbox는 1차원적인 정..

border에 그러데이션을 넣기 위해 사용 가능한 코드는 아래와 같다. 좀 더 자세한 설명을 원한다면 추가설명을 읽어보는 걸 추천한다. HTML CSS .gradient-avatar { width: 100px; height: 100px; background: url(https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory4.daumcdn.net%2Ftistory%2F4809359%2Fattach%2F1af7989e615749b0b3f522ea82e59ba8) padding-box, linear-gradient(90deg, #eaeaa7 , #ffcdf3aa, #c1b0e6) border-box; backgrou..

한번이라도 웹 접근성을 고려해 웹 설계를 해봤다면 IR기법이 생소하진 않을것이다. 필자도 항상 접근성을 고려한 웹 개발을 하려고 노력은 하고 있지만, 요즘은 혼자서 개발을 맡게 되면서 많이 신경을 쓰지 못하게 된것같아 반성하고 있다. 그런 의미로 오늘 IR기법을 시작으로 접근성 관련 포스트를 올리면서 초심(?)을 잃지 않도록 노력하려한다 IR기법(Image Replacement) 의미있는 이미지를 배경처리하고 그에 상응하는 내용을 텍스트로 기입해 역활이나 의도를 명시하는 방법이다. 보통 img 태그에 alt 속성을 이용하면 따로 이 작업이 필요없지만 CSS background 속성을 사용해 이미지를 넣는 경우도 많기 때문에 모든 사용자에게 동일한 정보 제공을 하기 위해선 알아두면 좋은 기법이다. 텍스트는..