본문 바로가기

front-end/css37

CSS, float 속성을 이용해서 만드는 Holy Grail Layout 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, float 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, Media Query를 이용해 반응형 홈페이지 만들기 이 포스팅은 PC로 작성 gogogameboy.tistory.com 지난 포스트에서 float 속성의 기초를 공부했습니다. CSS, Holy Grail Layout 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, flex-basis와 grow 그리고 shrink 이 포스팅은 PC로 작성되었습니다. 모바 gog.. 2021. 1. 8. 08:50
CSS, float 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, Media Query를 이용해 반응형 홈페이지 만들기 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 반응형 웹을 만들기 위한 Media Query 기초 이 포스팅은 PC로 작성되었 gogogameboy.tistory.com 지난 글에서는 반응형 웹사이트를 제작하는데 있어서 정말 중요한 CSS 속성인 Media Query를 공부했습니다. 이번에는 float에 대해서 배워보겠습니다. float로 자연스럽게 이미지 삽입하기 Lorem ipsum dolor sit amet consectetur adipis.. 2021. 1. 7. 10:06
CSS, Media Query를 이용해 반응형 홈페이지 만들기 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 반응형 웹을 만들기 위한 Media Query 기초 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 신문을 보는 것 같은 레이아웃 이 포스팅은 PC로 작성되었습니다. gogogameboy.tistory.com 위의 포스트에서 공부한 Media Query를 응용해서 이번에는 반응형 홈페이지를 만드는 실제 코드 작성을 해보겠습니다. 반응형 웹사이트 만들기 생활코딩 html css javascript Lorem ipsum dolor sit amet, consectetur adipisicing elit. Re.. 2021. 1. 6. 16:51
CSS 반응형 웹을 만들기 위한 Media Query 기초 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 신문을 보는 것 같은 레이아웃 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, Flex 기타 속성들 이 포스팅은 PC로 작성되었습니다. 모바일로 보시 gogogameboy.tistory.com 반응형 웹이란? 반응형 웹사이트란 컴퓨터처럼 가로가 긴 화면으로 봤을 때와, 가로가 좁고 세로가 긴 모바일 화면으로 봤을 때, 각각 다른 인터페이스를 보여주는 웹사이트를 말합니다. 이 블로그 또한 반응형 웹사이트이죠. 오늘은 그런 웹사이트를 만들기 위한 Media Query의 기초를 공부해보겠습니다. @medi.. 2021. 1. 6. 14:51
CSS 신문을 보는 것 같은 레이아웃 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, Flex 기타 속성들 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, Holy Grail Layout 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 gogogameboy.tistory.com 지난 포스트에서는 가장 이상적인 웹페이지 레이아웃인 Holy Grail Layout과 유용한 기타 속성들을 공부했습니다. 오늘은 웹페이지를 신문처럼 꾸미는 Multi column에 대해서 공부해보겠습니다. Multi column Lorem ipsum dolor sit amet consectetur, adi.. 2021. 1. 5. 13:17
CSS, Flex 기타 속성들 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, Holy Grail Layout 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, flex-basis와 grow 그리고 shrink 이 포스팅은 PC로 작성되었습니다. 모바 gogogameboy.tistory.com 지난 포스트에는 플렉스 Flex를 이용한 Holy Grail Layout을 잡는 방법을 배웠습니다. 이번에는 Flex의 미처 다 설명하지 못한 여러가지 유용한 속성들을 배워보겠습니다. !DOCTYPE html 에러 !DOCTYPE html 이 포스팅은 PC로 작성되었습니다. 모바일로 보시.. 2021. 1. 4. 16:23
CSS, Holy Grail Layout 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, flex-basis와 grow 그리고 shrink 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 웹사이트 레이아웃 기초 이 포스팅은 PC로 작성되었습니다. 모바일 gogogameboy.tistory.com 이번에 배울 내용은 지금까지 배워온 모든 것들을 총망라해서 가장 이상적인 웹페이지의 레이아웃을 잡는 방법을 배워보겠습니다. 가장 이상적인 웹페이지 레이아웃 생활코딩 html css javascript Lorem ipsum dolor sit amet consectetur, adipisicing el.. 2021. 1. 3. 16:50
CSS, flex-basis와 grow 그리고 shrink 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 웹사이트 레이아웃 기초 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 포지션 fixed 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분 gogogameboy.tistory.com 지난 포스트에서는 웹사이트의 레이아웃을 잡는 플렉스 flex의 기초를 배웠습니다. 이번에는 조금 더 구체적인 내용을 공부해보겠습니다. flex-basis 1 2 3 4 5 위의 소스 코드는 PC에서 드래그 후, ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다. ctrl+c(복사)는 불가능합니다. .item:n.. 2021. 1. 3. 13:16
CSS 웹사이트 레이아웃 기초 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 포지션 fixed 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 포지션 absolute 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 gogogameboy.tistory.com 어제는 CSS의 포지션과 관련된 속성들만 세번의 포스팅을 통해 세가지를 공부해보았습니다. 오늘부터 공부해볼 주제는 플렉스 Flex입니다. 생활코딩의 강의 영상에서는 자꾸 플럭스라고 발음을 하시는데 잘못 읽으신 것 같습니다. ㅎㅎ 표를 만드는 table 태그 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가.. 2021. 1. 3. 09:19