HTML/CSS
css 중요 문법
박스 콘텐츠 영역 : width, height 공간 padding 영역 : 안쪽 여백(콘텐츠와 테두리의 영역) -> 실제 크기에 변화를 줌 border 영역 : 테두리 영역 margin 영역 : 바깥쪽 여백 block , inline block 자동으로 줄바꿈이 되는 요소로 화면 전체를 사용 width 미지정 시 화면공간 100% block 안에 block요소와 inline 요소를 포함할 수 있다. inline 태그안 콘텐츠만큼 width가 자동으로 지정 width와 height를 변경할 수 없음 inline 안에 inline을 포함할 수 있지만 block은 포함할 수 없다. 선택자 BEM (.block__Element--Modifier) .header .nav { (X) } /* 이렇게 하면 nav가 ..
css 초기화
/* 웹폰트 추가 */ /* 웹폰트 CSS */ @import url('??'); /* CSS 초기화 */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figur..
플렉서블 박스
플렉서블 박스란? 가변적인 박스를 아주 손쉽게 만들수 있는 기술 플렉서블 박스의 기본 개념 플렉서블 박스는 부모 박스이다. 즉 부모 박스를 먼저 flex로 선언해야 자식 박스를 사용할 수 있다. 플렉서블 박스의 자식 박스는 플렉스 아이템이다. 플렉서블 박스의 축 과 주축은 중심이 되는 축으로 해당 축을 기준으로 플렉스 아이템이 배치된다. 교차축은 주축의 반대 ex) 주축: 가로 ,교차축: 세로 플렉서블 박스 문법 기본 설정 display : flex (박스를 블록 수준의 플렉서블 박스로 작동) inline-flex (박스를 인라인 수준의 플렉서블 박스로 작동) 플렉스 아이템의 배치 방향 설정 flex-direction : row (박스를 왼쪽에서 오른쪽으로 배치, 설정 시 주축은 가로) row-rever..
미디어 쿼리와 뷰포트
미디어 쿼리란 ? 회면 해상도, 기기의 방향 등 다양한 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 css의 속성 미디어 쿼리 기본문법 기본 문법 : @media [only or not] [미디어 유형] [and or ,] (조건문){실행문} 1. [only or not] *생략 가능 only는 미디어쿼리를 지원하는 브라우저에서만 미디어 쿼리를 해석하게 해주는 키워드 not은 not 다음에 따라오는 키워드를 부정하는 키워드 2. 미디어 유형 all : 모든 장치 print : 인쇄장치 screen : 컴퓨터 화면 장치 or 스마트 기기 기타.. 3. [and or ,] *생략가능 and는 앞 뒤 조건이 모두 true 일 때 해석하라는 의미 , (콤마)는 앞 뒤 조건 중 하나만 true 일 때 해..
가변 그리드
가변 그리드 : px를 %로 바꿔주는 형식 가변 그리드 공식 (가변 크기로 만들 박스의 가로 너비 / 앞의 박스를 감싸고 있는 박스의 가로 너비) *100 가변 마진 & 가변 패딩 * 가변 그리드 공식을 똑같이 적용하면 된다. 가변 폰트 가변 폰트를 적용할 글자 크기 / 적용할 요소를 감싸고 있는 요소의 글자 크기 - 폰트 단위 em : 대문자 M의 너비를 표현한 것, 16px rem : 최상위 태그 기준 , 상속문제 발생 X vw : 웹 브라우저의 너비를 100으로 기준하여 크기를 결정 vh : 웹 브라우저의 높이를 100으로 기준하여 크기를 결정 vw/vh를 px로 변환 = (vw 단위를 적용할 글자 크기 * 브라우저의 너빗값) /100 vmin : 웹 브라우저의 너비와 높이중 짧은 쪽을 기준으로 크..