여기의 일기

코딩을 공부하는 나의 방법내 직업은 코딩을 겸하는 웹디자이너.2012년 즈음에 학원을 다니며 웹표준 코딩을 배우고 수료해서 취업을 한 케이스인데, 모든 웹디자이너들이 공감하겠지만... 자꾸 코딩이 변화된다. 변화라고 해야하나 진화라고 해야하나... 아무튼 한번 배워놓고 땡~이 아니라 환경이 계속 바뀌어서 공부를 꾸준히 해야한다는 소리... 내가 배울때까지만해도 반응형웹을 요즘처럼 이렇게 많이 사용하지는 않았다. 물론 반응형 코딩도 배우기는 했지만, 데스크탑과 모바일웹 따로따로 구축하는게 위주였고, 반응형웹을 부가적으로 배우는 정도? 슬프게도 학원 수료 후 취업하고 입사한 회사에서도 반응형웹을 다루지는 않았던터라 그렇게 반응형 코딩을 배웠던 나의 지식은 내 머릿속에서 점점 사라져갔다... 그런데 이제.....

반응형 코딩 시 참고할점 * 박스를 한번씩 더 감싸줘야 한다. #header 안에 .header_in : #header{width:100%} / .header_in{width:1200px;margin:0 auto;} 만약에 상단 메뉴 형태가 왼쪽에 메뉴, 가운데 로고, 오른쪽 메뉴의 형태라면, position으로 위치를 지정한다. 1.#main_contents 안에 컨텐츠 한줄이 100%일 경우 width:100% 주고 media에 따라 조정할때 좌우 padding값을 함께 주면서 조정 위의 예시는 위의 제목 title까지(잘린부분)를 모두 감싸는 박스 하나를 만들어 100%를 주고(나중에 media 크기별로 여기서 padding값을 함께 주어 ), 그 안에 내용은 아래와 같이 속성을 넣어준다. ul {..

일을 하다가 보면 다양한 종류의 사진을 메인비주얼 부분에 넣어야 하는 상황이 많다. 내가 일하고 있는 회사는 상업적인 홈페이지를 다루는 곳이 아니라, 학술대회, 학회와 같은 부분이 대부분이라서 화려한 기술로 비주얼을 화려하게 꾸미기 보다는 보기좋게 편집해서 반영해 놓으면 되는데, 사실 그 반영하는 형식에도 고민이 될때가 많다. 그래서 여기에 홈페이지의 메인비주얼 디자인 방식을 몇가지 정리해두려고 한다. 1.이미지를 확대해서 꽉 채우는 기본형 일반적으로 홈페이지가 가로로 긴 가로형으로 많이 반영이 되기때문에, 제일 기본적이고 일반적으로 쓰는 방법은 비율에 맞는 사진을 꽉 채워서 넣는 방식이다. 물론 위에 얹어지는 텍스트와도 잘 어우러지고 이미지 자체가 깔끔하면서 주제에 맞는 사진이라는 전제하에 말이다. 이..

평소 괜찮게 봤던 반응형 사이트들 정리 ※매우 개인적인 생각들이 정리되어있음. 심지어 보관해놓은지 오래돼서 리뉴얼된 홈페이지도 많음 1.고려인삼누리집 깔끔한듯 신경 안쓴것 같지만 색감도 괜찮고 딱 떨어지는 디자인 중요한곳에 포인트색상을 잘 써서 군더더기 없어보임 비주얼부분 처리도 참고할만함 2.국립현대미술관 미술관이라는 주제에 맞게 소개되는 작품(포스터)들이 돋보이게끔 최대한 절제하면서 튀지 않고 정리정돈 잘된 홈페이지 거슬릴수 있는 색상부분도 아주 가늘게 들어가고 작은 부분에 쓰여져서 조화가 좋음 3.서울미래유산 여기는 개인적으로 폰트부분은 마음에 들지 않는데, 사이트 특성상 많은 콘텐츠들을 고려하면 나름 고민고민해서 정리한 티가 난다. 그리고 비주얼 부분의 아이디어도 괜찮았음 아래로 툭툭 떨어지는 형..