Kona Story

플렉스 레이아웃에서부터 갈길을 헤매고 있는 요즘입니다. 사실 노력도 안기울이고 쉽게 얻으려고 하는게 문제겠지요. 한번 방향을 잃으니까 전혀 길을 못찾고 있어서 요즘은 최대한 도움이 될만한 참고 사이트를 찾고 있는 중이에요. 이 사이트 역시 열심히 구글링을 하다가 찾게 된 사이트 인데 마이크로소프트에서 개발자들을 위해 운영하는 사이트네요. 번역체가 약간 거슬리지만 차분히 읽어보면 도움이 될 것 같습니다. 

▶ 마이크로소프트 디벨로퍼 네트워크 바로가기

플렉스 박스를 유연한 상자로 번역 되어 있지만, 읽을 만 합니다 :)

 CSS 를 배울때, 완벽한 가이드가 있으면 얼마나 좋을까 생각했었는데 여기 제목부터 플렉스박스를 위한 완벽한 가이드 라는 문서가 있네요. 영어로 되어있는 점이 안타깝지만, 그림을 보면 쉽게 이해가 갈 만큼 깔끔하게 정리가 잘 되어 있습니다. 어차피 HTML과 CSS 태그 속성이 모두 영어로 되어 있기 때문에 영어 사전을 찾아가면서 영어로 된 설명을 보는 편이 이해가 훨씬 빨리 되는 것 같기도 해요. 이럴때는 진짜 무슨 일을 하든 영어 네이티브 스피커가 부러워요. (T-T)

▶ CSS-TRICKS 플렉스박스를 위한 완벽가이드 바로가기 

플렉스박스를 위한 완벽가이드는 이렇게 속성에 대해 하나하나 그림으로 친절하게 설명을 해주고 있어요. 

그리고 마지막에는 예제 샘플을 보여줍니다.

한번 쓱 그림만 봐서는 100% 이해가 안되어서, 나중에 시간내서 사전 붙들고 심도있게 읽어봐야겠어요.   

웹을 처음 배우는 초보의 발목을 가장 먼저 잡는 건 역시 레이아웃 아닐까요. 가장 중요하지만 가장 헷갈리는 레이아웃 태그들! 매번 구글링을 하면서 태그와 속성을 찾아보지만, 이거야 할만큼 명확하게 잘 설명해주는 해답이 없었는데요, 너무 쉽게 개념을 잡아주는 사이트가 있어서 소개해봅니다. 

사이트명이 바로 CSS 레이아웃을 배웁시다 에요.

▶ CSS 레이아웃을 배웁시다 바로가기

CSS 레이아웃을 배웁시다는 영문으로 된 사이트를 한글로 번역해서 제공해요. 감사하게도 번역이 매끄럽고 이해하기 쉽게 잘 되어 있어서 쏙쏙 머릿속에 들어 옵니다. 총 19페이지로 되어 있는 이 사이트는 1페이지부터 레이아웃의 기초를 설명하고, 한장 한장 넘어갈때마다 실제 구현되는 예제를 해당 페이지에 보여주어 개념을 머릿속에 확 꽂아줘요. 

요건 제가 너무 헷갈렸던 레이아웃 태그 포지션

이 페이지를 보고 나서 아 이렇게 쉬운걸 그렇게 헷갈려 했구나 싶더라구요. 맨날 포지션 태그와 플로트 태그가 헷갈려서 짜증을 냈는데 여기서 속 시원한 답을 찾았답니다. 기초 CSS 태그를 배우시는 분들에게는 정말 유용한 사이트! 한번 가서 샤라락 넘겨 보세요!

요즘 웹디자인을 배우고 있는데 고민이 점점 커지고 있어요. 아무래도 소질이 없나보다 레이아웃은 왜이래 색깔은 왜이래 하면서 자학을 하는 단계가 심해지고 있어요. 그래서 결국은 오픈소스를 적극 활용하자 결심을 하고 우선 색상만 잘 잡아도 그럴싸한 디자인이 나올 수있다는 말을 믿고 컬러 팔레트 검색에 나섰습니다.

그러다 발견한 금쪽같은 사이트! 팔레튼닷컴 이에요. 

▶ Paletton.com바로가기

사이트는 굉장히 심플해요 하지만 기능은 매우 놀랍습니다. 저 원형의 팔레트에서 원하는 계열의 색깔을 선택하면 짠 하고 왼쪽에 레이아웃에 어울리는 색깔이 자동으로 배치가 돼요. 

그리고 아래 example 버튼을 누르면 이 색상을 적용했을때의 웹사이트 레이아웃 예시를 볼 수 있어요. 

코딩하기 쉽게 컬러명까지 제공되어서 완전 감사한 사이트에요. 

요즘 웹사이트를 만들다가 난 못하겠어 하고 백기들기 직전 이었는데 다시 마음을 가다듬고 도전해봐야겠어요. 괜히 이런 신기하고 재밌는 사이트 보면 동기부여가 마구마구 되더라구요. 저 처럼 색상 선택부터 어려우신 분들은 참고해보세요!