SH's 개발일기

Flexbox 레이아웃 기존에 학습했던 레이아웃 방법들 1. display : block / inline / table 2. position : static, relative, absolute, fixed ... FlexibleBox 레이아웃 float 나 position 을 사용하지 않고도 반응형 레이아웃 을 손쉽게 작성할수 있다. FlexibleBox 사용하기 1. 우선 flex container 정의 2. container 안에 flex item 들 나열 Flex container 의 property 들 flex-direction : column, column-reverse, row, row-reverse flex-wrap : > nowrap(디폴트), wrap, wrap-reverse flex-f..

* image 가 확대축소 되게 하려면 .responsive1 { width: 100%; height: auto; /* 종횡비율 유지 */ } * 화면이 커져도 이미지 '원래 크기' 이상 늘어나지 않게 하기 .responsive2 { max-width: 100%; /* 이미지 원래의 크기 100% 만큼이 최대치 */ height: auto; } * image를 특정 maximum 사이즈 이내로 국한시킬 경우 .responsive3 { width: 100%; height: auto; max-width: 400px; background-image 또한 크기에 따른 resizing이 가능하다 div { width: 100%; height: 400px; border: 1px solid red; backgroun..

body { /* 기본 값 설정*/ background-color: lightgreen; font-size : 20px; } div.pop { background-color: yellow; padding: 20px; } /* 기본적으로 CSS는 적층형 (덮어쓰기) 으로 적용된다. */ body { background-color: cyan; } /* @media 에서 max-width: ~ : ~ 보다 같거나 작은 경우 min-width: ~ : ~ 보다 큰 경우 */ @media only screen and (max-width: 600px){ /* 600px 이하이면 적용 */ body {background-color: tomato;} p {color: white;} } @media only screen..

box-sizing: border-box ; -> width 안에 border 포함, 반응형에 필수 * { box-sizing: border-box; } 아래 두가지를 '모바일 이나 태블릿' 에서 확인해보자 1. viewport meta태그가 적용 안 된 페이지 https://www.w3schools.com/css/example_withoutviewport.htm 2. viewport meta태그가 적용된 페이지 https://www.w3schools.com/css/example_withviewport.htm 위 두 페이지의 효과를 보려면 꼭! 모바일에서 보기를 추천 (크롬의 device 에서도 체험하기 어렵다) 1.의 경우 필히 '확대' 및 '좌우 스크롤' 을 발생해야 할것이다. 사용자게게 있어 수직스..

* Box Model * https://www.w3schools.com/css/css_boxmodel.asp 모든 HTML elements 들은 사각형 상자 모양으로 구성된다. CSS에서 말하는 box model 이란 바로 이런것을 말한다. CSS box model 은 모든 HTML elements을 구성하는(감싸는) box Box model 은 border + padding + margin + content 로 구성됨 - Content : 텍스트나 이미지가 등장하는 영역 - Padding : content 주변을 둘러 싸는 영역. content - border 사이 간격, 투명이다 - Border: padding 을 감싸는 테두리 - Margin : border의 바깥 영역 (다른 element 와의 ..

CSS 2D transform - 이차원 좌표에서 요소를 변형시키는 속성 - 이동(translate), 확대/축소(scale), 회전(rotate), 경사(skew) 등을 만들 수 있음 벤더 프리픽스(vender prefix) - 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사를 의미 - 아직 CSS 권고안에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 앞에 붙여준다. linear-gradient(방향, 색상1, 색상2) background : linear-gradient(right, yellow, blue); - 벤더 프리픽스를 사용하는 방법은 해당 속성이 적용되지 않았을 경우..

align-items 플렉스 요소들의 수직방향 정렬 방식을 설정 stretch : 기본설정, 플렉스 요소의 높이가 컨테이너의 높이와 같게 변경된 뒤 연이어서 배치된다. flex-start : 플렉스 요소는 플렉스 컨테이너의 위쪽에 배치된다. (기준선은 위쪽) flex-end : 플렉스 요소는 플렉스 컨테이너의 가운데에 배치된다. baseline : 플렉스 요소는 플렉스 컨테이너의 기준선에 배치된다. align-self 플렉스 요소마다 서로 다른 align 속성값을 설정할 수 있다. order 플렉스 요소들의 순서를 설정 flex-grow 플렉스 아이템들이 차지할 너비들에 대한 증가형 숫자를 지정 flex-shrink 플렉스 아이템들이 차지할 너비들에 대한 감소형 숫자를 지정 flex-basis 플렉스 아..

CSS Position 요소의 위치를 결정하는 방식을 설정 1. 정적(static) 위치 지정방식 기본값 - HTML 요소의 위치를 결정하는 기본적인 방식 - top, left, right, bottom 속성값을 사용할 수 없음 - 단순히 웹 페이지의 흐름에 따라 차례대로 요소들의 위치를 결정하는 방식 2. 상대(relative) 위치 지정방식 - HTML 요소의 기본 위치를 기준으로 위치를 재설정하는 방식 - 기본 위치는 정적위치 지정방식일 때 결정되는 위치를 의미 3. 고정(fixed) 위치 지정방식 - 뷰포트를 기준으로 위치를 설정하는 방식 - 웹 페이지가 스크롤되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치 *뷰포트 가상의 화면 - 화면 디스플레이 상의 표시 영역을 뜻한다. - 모바일 뷰포트..

CSS의 배경 * background-position - 반복되지 않는 배경 이미지의 상대 위치를 설정 - %나 px을 사용해서 상대위치를 직접 설정할 수 있음 - 상대 위치를 결정하는 기준은 해당 요소의 왼쪽 상단 left top center top right top left center center right center left bottom center bottom right bottom 가로위치값 세로위치값; 10% 100px ---> 가로로 10% 이동, 세로로 100px 이동 background-attachment - 위치가 설정된 배경 이미지를 원하는 위치에 고정시킬 수 있음 - 고정된 배경 이미지는 스크롤과 무관하게 화면의 위치에서 이동되지 않음 fixed background-size - ..

10. 속성 선택자 [속성명 ~= "속성값"] : 속성값이 완벽히 일치하는 문자를 가지고 있는 요소를 선택 ="apple" - 값이 "apple"인 것 ~="apple" - 값이 "apple banana"인 것도 선택 [속성명 *= "속성값"] : 속성 값이 포함된 문자를 가지고 있는 요소를 선택 [속성명 $= "속성값"] : 속성값이 접미사로 끝나는 문자를 가지고 있는 요소를 선택 [속성명 |= "속성값"] : 속성값이 접두사로 시작되는 문자를 가지고 있는 요소를 선택 |="apple" - "applemango", "apple-mango" ("apple mango" X) [속성명 ^= "속성값"] : 속성값이 접두사로 시작되는 문자를 가지고 있는 요소를 선택 ^="apple" - "applemango"..