반응형 웹 코딩하는 학교 과제가 있었습니다.

마감이 12시까지인데, 다른 과제를 하느라 저녁 6시부터 부랴부랴 만들었습니다.

수정해야 할 부분이 많이 보이지만 그래도 얼추 형태는 갖추었네요.

http://confirm.design/visual_interaction_design/index.html

웹 실제 종사하시는 분들은 그냥 몇 시간이면 완벽하게 짜실 듯...

  • display:flex; 를 사용하라그래서 쓰긴 했는데, 너무 최신(?) 기술인지라 왠지 모르게 불안하네요 ㅋㅋㅋ
  • Lv16
    잘만드셨네요 깔끔해요..!

    제가 오늘 만든 거랑 비교하면 좌절하고 싶어지네요........OTL
  • Lv16
    역시 제한(?)이 있으면 뭐든지 나오긴 하나봅니다... 뭐 그래도 저는 제대로 만든 제 홈피도 없는걸요 ㅠ
  • Lv12
    학교 과제가 이런거면 A+는 따놓은 당상이네요 ㅎㅎ
  • Lv12
    그랬으면 좋겠습니다 ㅎㅎㅎ
  • 메뉴가 폭이 좁아졌을경우 상단에 위치하게 되는데 컨텐츠보다 마진이 20정도 덜 먹은거 같아요!

    혹시 디자인과라 감점요인이 되지 않을까 싶어서 말씀드려봅니당^^
  • 네. 수정해야하는데 ㅠㅠ 너무 급해서 저리 내버렸네요.
  • Lv19

    이 어려운 걸 반나절도 아닌 6시간만에 해내시는군요.

  • Lv19
    덕분에 코드가 엄청 지저분합니다 ㅠㅠㅋ
  • ?

    보니까 하나도 안 지저분한데요!!!! 못 본 사이에 정리하신건가요?

  • ?
    메뉴부분은 바꾸긴 했는데 다른 코드는 그대로입니다! 설계 안 하고 시안도 없이 바로 짜서 중복되는 부분이 분명 있을 거예요 ㅠㅠ
  • 오우 굿^^
  • 감사합니다 ^^
  • ? Lv4

    flex 속성은 처음 들어보군요. 메뉴 블러도 괜찮고 깔끔하네요 :)

  • ? Lv4
    감사합니다! 블러는 사파리에서만 될 텐데... 맥북 쓰시나봐요 ㅎㅎ
  • ? Lv4 ?
    CSS3에서 추가된 새로운 기능입니다. 기존에는 Grid 형태로 콘텐츠를 배치하려면 float: left 등의 방법을 써야했는데, 이제는 더 이상 그러지 않아도 됩니다.

    다만, 최신 기능이기 때문에 브라우저 호환성 이슈가 있습니다. IE10부터 지원하고, 브라우저마다 사용법이 조금씩 다릅니다. 아직도 우리나라에는 IE10 미만 사용자가 많은 것으로 알고 있습니다. 그래서 한국에서는 사용하기 어렵다고 봐야죠.

    자세한 내용은 아래 블로그를 참고하시면 이해하기 쉬울 거에요.

    http://webdir.tistory.com/349
  • ? Lv4
    넵넵 :) 맥에서 사파리 사용하고 있어요!
  • ? ? Lv4
    IE10 미만 사용자가 있어서 실 사용에는 어렵겠군요. 답변 감사합니다 :)
  • ? Lv4
    저도 과제에 한정해서 썼어요 ㅎㅎ flex가 편하긴 한데 실 사용 하려면 몇 년 있어야 하지 않을까요 ㅠㅠ