codeGray

반응형 웹 구현을 위해 필수로 알아야 할 media 쿼리 screen 사이즈별로 조건을 걸어 원하는 스타일을 지정 할 수 있다. @media 미디어타입 and 조건 { 조건에 부합 할 경우 결과 스타일 } 미디어타입 screen - 브라우저 화면 조건 속성 ( 자주 사용하는 것 ) min-width 이 최소 넓이 이상이면 max-width 이 최대 넓이 이하이면 min-height 이 최소 높이 이상이면 max-height 이 최소 높이 이하이면 orientation portrait , landscape 감지 color 기기의 색상당 비트 수 color-index 출력 기기의 색상 테이블 수 aspect-ratio 디스플레이 영역의 넓이와 높이의 비율 max-width: 1900px 와이드pc max-w..

calc 함수는 css에서 단순 사칙연산을 하여 속성에 값을 줄 때 사용된다. 오늘 공부한 내용에서는 화면에서 불필요한 공백을 제거 할 때 사용한다고 배웠다. 예를들면 텍스트 박스와 전송버튼이 있고 텍스트 박스는 전체 화면의 80퍼센트, 텍스트 박스는 100px이라고 했을 때 20%의 100px을 뺀 나머지 불필요한 여백이 생기게 된다. ( 화면을 늘렸을 때 ) 이 불필요한 여백을 제거하려면 100% - 100px 을 텍스트박스 크기로 주면 된다. 전송 calc() 부분을 80% 일때와 100% -100px 일 때 비교를 해보면 이해하기 쉽다.

CSS의 vw, vh, vmin, vmax 속성은 viewport를 기준으로 화면크기에 반응해서 텍스트 크기를 조정할 때 사용한다. font-size : 1vw; 뷰포트 너비의 1% font-size : 1vh; 뷰포트 높이 1% font-size : 1vmin; 뷰포트 높이와 넓이 중 작은 쪽의 1% font-size : 1vmax; 뷰포트 높이와 넓이 중 큰 쪽의 1% 위의 속성을 추가해서 직접 테스트 해보면 쉽게 이해할 수 있다.

em, rem은 박스 및 텍스트 크기를 조정할 때 사용한다. em은 부모 요소의 크기를 반영하고 em은 부모 요소의 크기를 반영하지만 내,외부의 여백을 정할 때에는 자기 자신의 글자 크기를 기준으로 한다. rem은 루트(html) 요소 크기를 반영한다. 이 때, 루트 요소의 기본 폰트 사이즈는 16px이다. * em, rem은 상위 요소들의 크기에 맞추어 변하는 것이지 주변 환경(기기별 화면 크기)에 따라 그 크기를 달리할 수 있는 가변성은 없음 (반응형이 아님) 강아지 위의 예시에서 outer(부모) 클래스 안에 inner(자식) 이 들어있는 것을 볼 수 있다. inner클래스를 보면 font-size 가 1rem 으로 되어있는데 이는 기본 html 의 16px의 크기를 가지게 된다. padding 과..

CSS - background, img 태그 차이 img 태그 1. 이미지를 불러왔을 때 경로가 어긋난 경우 엑스박스로 보여진다. 2. 사이즈를 조절하면 정비율로 줄어들고 늘어난다. background css속성 1. 이미지를 불러왔을 때 경로가 어긋나도 엑스박스로 표현하지 않는다. 2. 사이즈를 자유롭게 조절 가능하다. 보통 컨텐츠 UI 카드 등을 img로 하고 배경화면 같은 것을 background css속성으로 넣는다.

CSS - float float 는 객체를 띄우는 기능이다. 쉽게 설명하면 워드에서 이미지와 글자가 공존할 때, 이미지 위치에 따라 글자가 이미지를 피해서 위치하는 것이다. 아마 아래 예제를 보면 바로 이해가 될 것이다. See the Pen Untitled by code_gray (@code_gray) on CodePen. box의 위치에 따라 글자의 위치도 box를 가리지 않도록 변경된다. 마지막에 clear 속성을 하는 이유는 위에서 설정한 float 설정이 계속 살아있기 때문에 다음 아래에 생성되는 것들에게 영향이 있을 수 있어 초기화 시키는 것이다. ( clear를 해줘야 부모의 창에 맞게 float이 적용됨 )

CSS - z-index z-index는 객체의 보여주는 순서를 정할 때 사용한다. 값이 높을수록 우선순위이다. 다만 position 속성을 정의해야 z-index 속성이 반영된다. See the Pen Untitled by code_gray (@code_gray) on CodePen.

CSS 로 레이아웃을 짜다보면 내가 지금 잘 그리고 있는 건지 확인해 보고 싶을 때가 있다. 그럴때 아래의 코드를 추가하면 내가 지금 그리고 있는 box 영역들에 border가 표시되어 쉽게 확인 할 수 있다. !important 속성은 지금 내가 설정한 css값이 최우선적으로 반영 되는 것이다. * { border : 1px solid red!important; }

CSS - display 속성 비교 display - block 블럭 형식으로 아래로 쌓이는 속성 See the Pen Untitled by code_gray (@code_gray) on CodePen. display - inline 우측으로 쌓이지만 크기 속성은 반영되지 않음 ( 글자 크기에 자동으로 맞춰짐 ) See the Pen display-inline by code_gray (@code_gray) on CodePen. display - inline-block 우측으로 쌓인다. See the Pen display-inline-block by code_gray (@code_gray) on CodePen. display - none 개체를 완전히 제거 See the Pen Untitled by cod..

box-shadow x, y, color x, y, blur, color x, y, blur, spread, color x축이 커지면 왼쪽에서 오른쪽으로 y축이 커지면 위에서 아래로 그림자가 생성된다. blue는 색의 흐림정도이고 값이 커질수록 그림자의 범위가 커지고 색이 흐려짐 spread는 그림자의 크기 background-color: rgba(0, 79, 255, 0.9); red, green, blue, alpha 값을 넣는다. alpha 값은 투명도 이다. See the Pen Untitled by code_gray (@code_gray) on CodePen.