초보 개발자의 일기

Place Items item들을 배치하는 방법 justify-item , align-item, place-item이 있다. justify-item .grid { display: grid; gap: 5px; height: 50vh; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); justify-items: stretch; } justify-item의 기본형은 stretch이다. justify-items: start; justify-items: end; align-item align-item은 가로로 쭉 늘어진 형태를 보인다. align-items: start; align-items: end; place-item plac..

Grid Template Areas -grid-template-columns: 열 방향으로 길이를 설정 -grid-template-row: 행 방향으로 길이를 설정 -repeat:(4,200px): 4번 200px를 반복 ex) -grid-template-columns: repeat(4,200px); /*grid-template-columns: 200px 200px 200px 200px;*/ -grid-template-row:repeat(4,300px); /*grid-template-row: 300px 300px 300px 300px;*/ index.html style.css .header { background-color: black; grid-area: header; } .content { backg..

수업을 듣다 저 톱니바퀴 아이콘위에 빨간 점을 만들라는 숙제가 생겨서 빨간점을 만들어보았다. 1. point.css 만들어서 빨간 점 만들기 .point { background-color: tomato; width: 5px; height: 5px; border-radius: 2.5px; position: absolute; right: -6px; top: -7px; } 2. style.css 에 방금 만든 point.css 추가하기 @import "components/point.css"; 3. 톱니 바퀴 아이콘 오른쪽 위에 위치 시키기 위해 class="point" 입력 Find 4. position: relative로 위치 설정 .screen-header__icons span { margin-left: ..

css box padding의 디폴트 원리 200픽셀의 박스에 50픽셀의 패딩을 주면, css는 기존 박스의 가로를 유지하기 위해 50만큼 박스를 늘림. 이를 막기 위해 box-sizing:border-box를 쓰면 box의 크기를 유지한 채 padding을 줄 수 있다.

Media Queries - Media query는 오직 CSS만을 이용해서 스크린의 사이즈를 알 수 있는 방법이다.(웹사이트를 보고 있는 사용자의 스크린 사이즈) - @media screen and (max-width: 00px) {}을 이용하여 몇 픽셀부터는 달라 보이도록 만들 수 있다. 이를 통해 스크린의 사이즈를 알 수 있다. - min 사이즈와 max사이즈를 조절하여 단계별로 만들면, 스크린 사이즈의 범위를 알 수 있다. - 브라우저에서 inspect의 device toolbar를 이용하여 핸드폰 기종 별 사이즈로 브라우저를 볼 수 있다. - media screen에 (orientation: landscape)를 이용하면, 세로모드인지 가로모드 인지도 구별할 수 있다. 1200px보다 클때 tu..

Trasition transition 어떤 상태에서 다른 상태로의 변화를 보내주는 애니메이션이다 a { color: white; background-color: tomato; text-decoration: none; padding: 3px 5px; border-radius: 5px; font-size: 55px; transition: background-color 10s ease-in-out, color 5s ease-in-out; } a:hover { color: tomato; background-color: wheat; } 쓰는 법 1: transtion은 state가 없는 요소에 붙어야 한다 처음 생긴 곳에 있어야 한다 state에 transition을 준다면 변화를 준 것(예를 들면 hover라면..

position 1. positon: static (default) 아무것도 설정하지 않으면 default 값으로 static이 저장되어 있다. 2.position: fixed fixed는 스크롤을 내려도 그 자리에서 움직이지 않는 것을 의미한다. 움직이지 않은 위치를 바꾸고 싶을 때는 top, bottom, left, right를 사용해서 움직일 수 있다. 3. position: relative 조금씩 위치를 바꾸고 싶을 때 유용 element가 '처음 생성된 위치'를 기준점으로, top bottom left right으로 위치를 조금씩 수정할 수 있다. 4. position: absolute 가장 가까운 relative 부모를 기준으로 이동 position:relative; 를 해주면 부모가 된다. ..