CSS

div, section / a, span, img기본적인 body태그 아래의 div는 body 전체에 처리가 적용된다.block -> 크기 조절 가능inline -> 나란히 연결가능한 IFC 형태marginborderpadding1) box-sizing:content

자식태그에 적용하기 위해서 부모태그에서 style로 적용시킨다. 알아서 크기만큼 늘어난다. 부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고,자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부릅니다.“

Flex와 지금 공부할 Grid의 큰 차이점은Flex는 한 방향 레이아웃 시스템이고 (1차원)Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원)부모 요소인 div.container를 Grid Container(그리드 컨테이너)자식 요소인 div.item들을 Gr

style 속성에 스타일 시트 작성<style></style> (내부 스타일 시트)css.style (외부 스타일 시트)우선순위 또한 위와 같다.id 셀렉터class 셀렉터그룹 셀렉터 ( h3, li {color :brown;})이름 : div{ color

normal / italic / oblique 중 하나를 지정하나 실제 기울임 정도가 normal과 나머지 차이고 italic과 oblique는 거의 같다. 100~900사이로 숫자를 지정할 수 있으며 normal은 400, bold는 700이다.글자 크기를 지정 px

window.innerWidth window.innerHeightdocument.documentElement.clientWidthdocument.documentElement.clientHeight window 객체가 아닌 document.documentElement를

요소를 변형시키는 프로퍼티translate() => 이동scale() => 확대 축소rotate() => 회전skew() => 경사translate(x,y)translateX(x)translateY(y)ex) transform : translate(50px, 30px)

### 반응형 웹 > 디바이스 종류와 크기에 따라 웹페이지의 크기가 자동적으로 재조정 되는 것

사용할 사진 >배경으로 사용할 사진은 이 사진이다. 1. background url만 사용 >jpeg가 크기가 커서 사진의 왼쪽부분의 원본 크기만큼이 브라우저에 속해있다. 2. no-repeat center 추가 >해당 그림에서 분명 center를 했는데 왜

1) Flex container2) Flex itemsdisplayflex-direction 아이템이 정렬될 주축지정 (어디에서 어디로 위에서 아래로 좌에서 우로 )justify-content 주축 정렬flex-wrap 줄바꿈 처리 align-items flex li

displaygrid-template-rowsgrid-template-columnsgrid-auto-rowsgrid-auto-columnsgrid-auto-flowjustify-contentalign-contentjustify-itemsalign-itemsgridinl

repeatminmaxfit-contentminmax(A,B) : 최대는 B까지 만들어지고 최소너비는 A 범위까지 지정ex) grid-template-columns : minmax(100px,1fr) minmax(200px,1fr)둘다 1:1이나 계속줄어들면 오른쪽은

해당 레이아웃과 동작을 최대한 적용하고자 하였다. 전체를 grid로 처리하였고 컨텐츠 부분 또한 grid로 설정하였다. flex의 경우 가로로 배열하는 것을 위해서 구독 부분의 사진과 이름들, header의 각각의 거리 간격 , 컨텐츠 미니 그림과 내용간의 간격등에 이

모달을 클릭하면 사진마다 고유한 이미지 크기가 달라서 브라우저 크기가 달라질 경우 모달을 닫을 수 없는 상황도 나타난다. 이에따라 브라우저마다 일정한 확대 축소되는 사진크기를 설정 , 최대 최소를 설정한다. img자체의 크기가 Box를 벗어나지 못하게 width he

기본적인 border와 padding이 존재한다.click 이벤트typevaluenameplaceholdertext password button submit reset image checkbox radio file search 등 다양하고 그중 자주쓰이는 것은 내가 생

이미지를 어떤 부모 영역을 넘어가게 만든다. 부모영역은 200px이고 5개는 각각 200px을 가지고 있다. 즉, 부모 영역을 초과하고 있다. width를 직접주는 것이 아닌 100%로 줄 경우200px이라는 곳 안에서 5개가 처리된다. 쓸수 있는 만큼 써라는 의미이