웹개발/css (7) 썸네일형 리스트형 [CSS] 반응형 웹페이지 디자인 (Responsive Webpage Design) 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. 반응형 웹 디자인이란 반응형 웹 디자인이란 당신의 웹페이지가 모든 기기에서 보기 좋게 만들어진 디자인이다. 웹페이지는 데스크탑 뿐만아니라 태블릿 pc, 모바일, 노트북 등 여러 다양한 기기에서 보인다. 그래서 기기와는 상관없이 보기 좋게 만들어져야 한다. 반응형 웹 디자인은 프로그램이나 javascript가 아닌 오직 html과 css를 사용해서 리사이즈하거나 숨기거나 키우거나 움직이게 만들어 어느 화면에서도 아름답게 만들어야 한다. 또한 작은 화면에서 정보를 빼는 것이 아닌 어느 기기에서도 맞는 정보를 채택하여 보여주는것이다. Viewport 뷰포트 뷰포트란 사용자 웹페이지의 보여지는 영역을 말한다. 태블릿이나 모바일이.. [CSS] 플렉스박스 Flexbox 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. 플렉스모드를 사용하려면 플렉스 컨테이너부터 정의해야 한다. Flexbox parent element - Container 디스플레이 속성을 플랙스로 지정하면서 컨테이너는 flexible한 부모요소가 된다. .flex-container { display: flex; } flex-direction flex-direction 속성은 flex item들을 정렬하는 방법을 정의한다. .flex-container { display: flex; flex-direction: column; } column : flex item들을 행 기준으로 정렬한다. column-reverse : 행 기준 거꾸로 정렬한다. row : 열 기준으로 정렬.. [CSS] 미디어쿼리 Media Queries 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. css 중 반응형 웹페이지의 핵심이라고 할 수 있는것이 바로 미디어쿼리이다. 미디어 쿼리는 css3 부터 등장한 기술로 어떤 특정 조건이 충족되면 @media 규칙을 css 블록영역에서 적용시킨다. 조건식 @media (조건) { 적용할 css } @media only screen and (max-width: 600px) { body { background-color: lightblue; } } 윈도우 브라우저가 600px 이하일 경우에 배경색이 lightblue 색으로 변한다. 브레이크포인트 (Breakpoint) 우리가 웹페이지를 만들면 화면에 띄워질때 스마트폰이든 태블릿이든 그 화면 크기에 맞게 반응형으로 보여준다... [CSS] 텍스트 줄바꿈, 말줄임 처리, 글자 자르기 css 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. 웹페이지상에서 텍스트를 삽입할때 짧은 텍스트일경우는 문제가 없지만 block의 크기보다 넘치게 클 경우 넘치는 글을 잘라내거나 줄바꿈을 해야 하는 경우가 있다. 그럴때 유용하게 사용할 수 있는 것이 white-spacing, text-overflow, word-break 이다. white-space 공백 문자를 어떻게 다룰것인가를 지정한다. normal : 정상적으로 출력하도록 지정한다. 연속된 공백 문자나 줄바꿈을 통합한다. pre : 연속된 공백문자나 줄바꿈을 통합하지 않고 원문 그대로 출력한다. nowrap : 연속된 공백문자는 출력하지만 줄바꿈은 통합하지 않는다. 예제) 원문: 안녕하세요 크리벨로퍼의 블로그입니다... [CSS] 그림자 text-shadow , box-shadow 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. css로 문자나 박스의 그림자를 추가할 수 있다. 그림자를 추가할 때 쓰는 속성은 text-shadow와 box-shadow 두 가지이다. Text shadow text-shadow 속성으로 문자의 그림자를 추가 할 수 있다. 입력값으로는 수평값(px)과 수직 값(px)을 지정해주어야 한다. h1 { text-shadow: 2px 2px; } 또한, 색상도 지정 해 줄 수 있다. h1 { text-shadow: 2px 2px red; } 그림자의 크기와 색상 사이에 블러값도 넣어줄 수 있다. 블러값이 높아질수록 블러의 효과가 더 커진다. h1 { text-shadow: 2px 2px 5px red; } 그림자의 크기값을 .. [CSS] 그리드 - 자식 속성, 그리드 함수 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 그리드 속성 그리드는 컨테이너(Container)와 아이템(item)들로 나뉜다. 컨테이너는 부모 요소이며 그 안에 자식 요소인 아이템들을 배치 시킬 수 있다. 자식 속성 (Item) grid-row-start : 그리드 아이템 행의 시작 위치를 지정한다. (아래내용과 동일) grid-row-end : 그리드 아이템 행의 끝 위치를 지정한다. 단축속성 : grid-row ( grid-row: 1 / 2; ) 숫자를 지정하거나, 선 이름을 지정하거나 span 키워드를 사용한다. 그냥 span만 쓰면 기본값이 span1 grid-column-start : 그리드 아이템 열의 시작 위치를 지정한다. grid-column-end : 그리드 아이템 열의 .. [CSS] 그리드 - 부모속성 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. css 그리드 : 2차원의 행과 열로 된 레이아웃 시스템 그리드 속성 그리드는 컨테이너(Container)와 아이템(item)들로 나뉜다. 컨테이너는 부모요소이며 그 안에 자식요소인 아이템들을 배치 시밀 수 있다. 부모 속성 (Container) display : 그리드 컨테이너를 정의한다. :grid - block 특성의 그리드 :inline-grid - inline 특성의 그리드 grid-template-rows : 행의 크기를 정의한다. :1행크기 2행크기 .... ; :[선의 이름] 1행크기 [선의 이름] 2행크기 ... ; :1fr 100px - 1의비율만큼의 크기 100px만큼의 크기 :repeat(4, 150px); - 150px 만.. 이전 1 다음