반응형 썸네일형 리스트형 반응형 웹 (Responsive Web) - test6 상당히 오랫만에 글을 올린다. 그 동안 면접준비랑 면접보러다녀서 바뻤다. 그래도 계속 조금씩 만든 결과를 오늘 올리려 한다. 링크:http://creatijin.dothome.co.kr/project/Responsive/test9.html 여태까지 한 테스트를 합친 결과물이다. 애플사이트랑 구조를 똑같이 해보았는데 요즘 대기업들은 이런 구조를 많이 하는걸로 보여서 한번 해봤다. 더보기 반응형 웹 (Responsive Web) - test4 이번에는 앞에서 했던걸 좀 섞어서 하려고 한다.크리스마스 이브에 코딩하니깐 색은 빨강으로 간다!구조는 이리저리생각해 봤는데 괜찬은거 같다원래 정답은 없으니깐 내가 하고 싶은데로 간다.요즘 highlight.js 를 적용해서 좀 편하게 코드를 볼 수 있게 하려하는데뭐가 문제인지 적용이안되서 짜증이난다.본론으로 돌아가서 css는 위와 같이 적용시켰고 결과물을 보자링크:http://newlex0124.cafe24.com/test/responsive/test4.html+ 메인에 사진을 추가하고 사이즈 별로 box 크기 비율을 다르게 했습니다. 더보기 반응형 웹 (Responsive Web) - test3 test2에서 생각했던것 보다 잘 안되서 다시 생각 좀 해보았다. test2보다는 좀더 간단하게 구조를 해보았다. 기본 CSS를 설정 512px 사이즈일때 CSS를 변경해서 넣어준다. 반응형 웹은 모바일 기기를 위해 제작하는 경우가 많은데 transform:translate3d를 이용하면 좀더 기기에 부담을 덜 줄 수 있고 약간이나마 좀 더 부드러운 움직임을 구현할 수 있다. translate3d는 좀 어려운 부분이라 따로 연구좀 해봐야 되는 부분이다. 나중에 기회가 되면 따로 다뤄봐야 겠다. 자바스크립트를 넣어주는데 ham클릭시 menu-wrap에 addClass로 menu-on 클라스를 추가해준다. ham-wrap은 메뉴가 나왔을시 그 외에 부분은 어둠게 처리해서 메뉴에 집중시켜주는 효과를 넣어준다... 더보기 반응형 웹 (Responsive Web) - test2 반응형 웹 제작은 생각보다 어렵다.그래서 그냥 생각하는데로 코딩 하려고한다.test2에서는 사이즈가 줄어들면 메뉴가 사라지고 햄버그메뉴를 눌렀을때 다시 나오게 끔 해볼라 했다.구조는 대충 이렇게 생각해보았다.처음 큰 사이즈에서는 container만 보이도록 해두고설정해둔 사이즈로 줄어들면 container가 사라지고 container2가 보는 방식으로 생각해보았는데지금 쓰는방식인지는 모르겠다.기본사이즈에서는 CSS를 이렇게 넣어주었다.container가 보이고 container2는 안보이도록 밖으로 보내두었다.창크기가 512px 로 줄어들었을때 CSS 바꿔준다.container를 안보이도록 top 값을 바꿔주고container2를 보이도록 top 값을 바꿔준다.btn 도 CSS를 넣어준다.btn을 클릭했.. 더보기 CSS 반응형 웹 (Responsive Web) - test1 저번 면접때 주로 질문 받은건 반응형 웹이 가능하냐에 대한 질문을 많이 받았다. 내가 리뉴얼한 페이지는 반응형이 아니라 자신있게 할 수 있다고 말을 못했다. 준비되지 않은것에 자신있게 거짓말하기가 싫었다. 그리고 해본거랑 할 주 아는거는 차이가 크기 때문이다. 그래서 조금씩 해보기로했다. 처음에는 간단하게 시작하도록 하자. 미디어 쿼리 적용법은 4가지가 있다. 1.link 태그 안에 위치하여 media 속성 안 조건에 만족할 때 해당 css파일을 불러온다 2. 태그 안에 위치하여 media 속성 안 조건에 만족 할 때 스타일을 적용 시킨다 3. - @import 태그 안에서 @import를 사용하여 뒷 부분의 미디어 쿼리를 만족 할 때 해당 css파일을 불러온다. 4.CSS파일 불러온 css파일 안 혹은.. 더보기 이전 1 다음
