HTML & CSS3 썸네일형 리스트형 반응형 웹 (Responsive Web) - test6 상당히 오랫만에 글을 올린다. 그 동안 면접준비랑 면접보러다녀서 바뻤다. 그래도 계속 조금씩 만든 결과를 오늘 올리려 한다. 링크:http://creatijin.dothome.co.kr/project/Responsive/test9.html 여태까지 한 테스트를 합친 결과물이다. 애플사이트랑 구조를 똑같이 해보았는데 요즘 대기업들은 이런 구조를 많이 하는걸로 보여서 한번 해봤다. 더보기 CSS3 - overflow 종류 overflow는 작업할때 자주 쓰는거 같다. 주로 hidden을 사용하는데 다른 종류도 알아보자 일단 overflow가 뭔지부터 알아보자 - overflow영역 안에 있는 내용이 넘칠 경우 어떻게 처리할지 결정한다. - 종류 visivle : 영역보다 넘쳐난 내용을 그대로 보여줌 hidden : 영역보다 넘쳐난 내용을 표시하지 않고 스크롤을 제공하지 않는다. scroll : 영역보다 넘쳐난 내용을 위해 스크롤 제공 auto : 브라우저에 의존해서 해당내용이 영역보다 넘칠 경우 스크롤 자동 제공 더보기 CSS3 - border: style 종류 이번에는 CSS3 border-style 을 알아보자 거의 solid를 많이쓰지만 디자이너가 뭘 요구할지 모르니깐 알아둬보자 종류 -none: 테두리 없음 -hidden: 테두리 숨김 (none과 같으나 테이블 셀 요소라면 테두리 통합) -dotted: 점선 테두리 -dashed: 짧은 선들의 연속 지정 -solid: 실선 -double: 두개의 실선으로 지정 -groove: 테두리가 안으로 파진것처럼 보임 -ridge: 테두리가 밖으로 튀어나온것처럼 보임 -inset: 테두리를 포함한 컨텐츠 영역이 안으로 들어간것처럼 보임 -outset: 테두리를 포함한 컨텐츠 영역이 밖으로 튀어나온것처럼 보임 범위 div { border-style: solid } - 모든 테두리를 solid로 설정 div { bor.. 더보기 반응형 웹 (Responsive Web) - test5 벌써 test5 입니다.이번에는 앞에 해결 안되던 문제점과 구조를 살짝 바꿔봤습니다.저번과 크게바뀐건 없지만 header 부분에 logo-box, menu-box로 나눠서 구조를 만들어 봤습니다.main부분에는 양 옆에 여백을 주기위해 air-left,right를 넣었지만 깔끔하지 못하네요CSS로 저렇게 여백을 주려니 문제가 생겨서 일딴 임시방편으로 해두었습니다.header쪽에 집중하죠 ㅎㅎ맥에서 찍다보니깐 너무 크게나온거같다. 스타일은 위와 같이 적용시켰다.제일 중요한 js부분이다.밑에 2개의 클릭이벤트는 기존과 달라진건 없다 달라진게 있다면 if문을 추가했다. 그 동안 문제점이 햄버거 버튼을 클릭해서 메뉴가 나와서 창 사이즈가 760이하 일때는 유지가되고 761이상일때는사라지게 해야되는데 test1~.. 더보기 반응형 웹 (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 2 3 다음
