숲속코딩

드디어 길었던 생활코딩 CSS 수업 시리즈의 마침표를 찍는 마지막 글이다. 이번에 살펴볼 내용은 웹 아이콘을 효율적으로 관리할 수 있게 돕는 Font…

이제 생활코딩의 CSS 수업 영상도 끝을 향해 달려가고 있다. 다음 포스트가 생활코딩의 CSS 수업 영상의 마지막 포스트가 될 것 같다. 이번에 …

이번 포스트에서는 HTML 내부에 CSS 코드를 쌓아두지 않고 외부 파일로 분리 하여 성능과 유지보수성을 동시에 잡는 방법과, 배포 전 필수 단계인 코…

지난 포스트에서 요소를 변형시키는 transform을 배웠다. 이번에는 그 변화의 과정을 부드러운 움직임으로 바꿔주는 transition 속성을 정…

지난 포스트에서는 배경과 요소를 감각적으로 혼합하는 블렌드 모드에 대해 배웠다. 이번에는 웹 요소의 형태를 자유자재로 변형시키는 transform …

이번 포스트에서는 여러 색상과 이미지를 감각적으로 혼합하여 웹사이트의 시각적 완성도를 극대화해 주는 블렌드 모드 Blend Mode 속성들을 정리해 …

지난 포스트에서는 배경을 다채롭게 꾸미는 법을 배웠다. 이번에는 이미지나 요소에 직접 시각적 효과를 주는 filter 속성을 살펴보겠다. 포토샵 …

이번 포스트에서는 웹사이트의 시각적 완성도를 높여주는 배경 Background 관련 속성들과 이를 효율적으로 사용하는 단축 속성 기법까지 정리해 보겠…

지난 포스트에서 '미디어 쿼리'를 이용해 화면 크기에 반응하는 최신 레이아웃을 배웠다면, 이번에는 CSS 레이아웃의 역사를 지탱해 온 f…

이전 포스트에서는 '멀티 컬럼'을 통해 텍스트 흐름을 제어하는 법을 알아보았다. 오늘의 포스트에서는 웹사이트 전체가 기기 화면 크기에 …

오늘의 포스트에서는 멀티 컬럼 Multi-column 에 대해서 알아보겠다. 멀티 컬럼은 마치 신문이나 잡지처럼 긴 텍스트 내용을 여러 개의 열로 나…

지난 포스트에서 Flexbox 의 기본 개념을 익혔다면, 이제 그걸 활용해 실제 웹사이트의 뼈대를 만들어 볼 차례다. 웹 디자인의 '성배…

지난 포스트에서 요소를 자유롭게 배치하는 'position' 속성을 배웠다면, 이번에는 현대 웹 디자인에서 가장 강력하고 유연한 레이아웃…

지난 포스트에서는 '마진 겹침' 현상에 대해서 알아보았다. 이번에는 박스들을 화면상의 원하는 곳에 배치하는 방법 을 알아보려고 한다. …

지난 포스트에서 여백을 조절하는 마진 Margin 의 기본 개념을 배웠다면, 이번에는 마진이 위아래로 만날 때 발생하는 독특한 현상을 이야기할 차례다.…

CSS 레이아웃의 뼈대가 되는 블록 Block 과 인라인 Inline , 그리고 요소의 크기와 여백을 결정하는 박스 모델 Box Model 은 웹 디자…

지난 포스트의 후반에 생활코딩 CSS 수업 영상 중 'Stylish' 익스텐션을 소개하는 영상을 올렸었다. 거기서 "뒤에서 캐…

CSS의 상속 Inheritance 은 부모 요소에 적용한 스타일이 자식 요소에게도 물려받아지는 현상을 말한다. 이번 포스트에서는 이 '상속&…

이번 포스트에서는 글꼴의 서체 부터 두께 , 줄 간격 에 이르기까지 텍스트의 가독성을 완성하는 CSS 폰트 관련 속성들을 하나씩 알아보겠다. 그리고 …

이번에는 CSS에서 색상을 지정하는 방법을 정리하겠다. CSS에서 색상을 지정하는 방법은 크게 3가지가 있으며, 각각의 상황에 따라 선호되는 이유가 …