web/html & css
[CSS] 미디어 쿼리, 뷰포트
1. 미디어 쿼리 [ 기본 문법 ] @media [only 또는 not][미디어 유형][and 또는 ,] (조건문){실행문} 👉 and 구문 뒤 공백 필수! [ 적용 방법 ] [ min/max ] 해상도별로 웹사이트를 다양하게 표현 가능 min : 크기가 작은 순서대로 작성 max : 크기가 큰 순서대로 작성 미디어 쿼리로 크기 감지할 때는 뷰포트 기준으로 감지 2. 뷰포트 화면에서 실제 내용이 표시되는 영역 Desktop : 설정한 해상도 Device : 기본으로 설정되어 있는 값 [ 속성 ] width device-width, 양수 뷰포트의 너비 height device-height, 양수 뷰포트의 높이 initial-scale 양수 뷰포트의 초기 배율, 기본값=1 user-scalable yes, ..
→2021.07.22
web/html & css
[CSS] 가변 그리드, 마진, 패딩, 폰트
[ 공식 ] (가변 크기로 만들 박스의 가로 너비 / 가변 크기로 만들 박스를 감싸고 있는 박스의 가로 너비) * 100 = 가변 크기의 % 값 👉 가변 그리드, 마진, 패딩에 동일하게 적용 (단, 패딩은 조건에 따라 다르게 적용) px값 기준으로 계산한다 [ id = "wrap / wrapper" ] 모든 태그를 감싸는 박스 웹 문서 내용 전체의 크기나 배경색 등 한꺼번에 조절 브라우저 화면 크기에 상관없이 웹 문서의 내용 중앙에 배치 반응형 웹에서 자식 박스들이 가변 크기로 설정되었을 때 무제한으로 늘어나는 것 방지 자식 박스들 가변 크기로 만들 때 기준 크기로 사용 가장 상위의 박스 -> 가변 그리드 계산 시 기준이 될 박스 없음 [ 가변 패딩 적용 방법 ] 방법 1. 기본 방법 (가변 패딩을 적용..
→2021.07.22
web/html & css
[CSS] 반응형 미디어 쿼리
/* Large desktop */ @media (min-width: 1500px) { ... } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { ... } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { ... } /* Landscape phones and down */ @media (max-width: 480px) { ... }
→2021.07.13
web/html & css
[CSS] em, rem 그리고 css의 단위들
.selector { property: value; } Absolute length units : px Relative length units : em, rem, vw, vh, % 1. em - typography에서 현재 지정된 point size 나타내는 단위 / 현재 폰트 size 나타냄 - 선택된 폰트에 상관없이 항상 고정된 폰트 사이즈 가진다 - 부모의 폰트사이즈에 상대적으로 크기가 계산된다 - 브라우저의 기본 폰트 : 16px - ex) 8em = 16 * 8 = 128px = 800% 2. rem - root em - root에 지정된 폰트사이즈에 따라 크기 결정 3. vw, vh, wmin, wmax - 부모 요소와는 상관 없다, 브라우저의 크기에 의존 - 100vw : viewport 너..
→2021.07.09
web/html & css
[CSS] position
.container { position: static; position: relative; position: absolute; position: fixed; position: sticky; } top-left, top-right, bottom-left, bottom-right 값으로 position 변경 가능 static : default value / html에 정의된 순서대로 브라우저상에 출력 relative : left, right 값 적용 가능 / 원래 자리에서 상대적으로 값만큼 이동 absolute : item이 담긴 가장 가까운 box 내에서 위치 변동 fixed : window 내에서 변동 / 웹 페이지 내에서 변동 / box와는 무관 sticky : 원래 있던 자리에 있되, scrollin..
→2021.07.09
web/html & css
[Bootstrap] checkbox와 radio
👉 인라인 체크박스, 라디오 - 체크박스나 라디오 컨트롤을 같은 줄에 출력 - 줄마다 띄울때는 단순 class="checkbox" 작성 1 2 3 1 2 3
→2021.06.25
web/html & css
[CSS] Flexbox
float 목적 : 이미지와 텍스트 어떻게 배치할 것인지 정의 - left, center, right : 텍스트가 이미지 감싸는 형태로 나타남 flexbox 1. container에 적용 : display, flex-direction, flex-wrap, justifu-content, align-iems, ... 2. item에 적용 : order, flex-grow, flex, align-self, flex-shrink 중심축(main axis)과 반대축(cross axis)이 있다 실습 준비 div.container>div.item.item${$}*10 입력 후 tab키 누르기 Tip height: 100% → 아이템에 맞게 높이가 지정됨, 아이템이 들어있는 부모의 높이에 100% 채우겠다 예를 들면..
→2021.05.17
web/html & css
[CSS] Flex Container
display: flex; 주축 방향 정렬(가로축) justify-content: center; justify-content: flex-end; 교차축 방향 정렬(세로축) align-items: center; align-items: flex-end;
→2021.05.16

• 이전
• 1
• 다음