본투비곰손

브라우저마다 기본 css가 다른데 그기본값을 초기화 하는 reset.css를 사용한다. 1. 작성하는 페이지 꽉채우기 *{ margin: 0; padding: 0; box-sizing: border-box; } 2. 작성하는 페이지 글자크기 및 글높이 초기화 html{ font-size: 0.625em; line-height: 1.15; /*모든 브라우저에서 라인 높이를 수정합니다.*/ -webkit-text-size-adjust: 100%; /*iOS의 방향 변경 후 글꼴 크기 조정을 방지합니다.*/ } 3.작성 페이지 글꼴 초기화 body{ font-family: nbgR; /*폰트 종류는 변경가능*/ line-height: 1; } 4. 태그별 고유스타일 초기화 li{ list-style: none..

Front-end/CSS 2023. 6. 19. 22:10

반응형 layout에서 사진이나 박스의 화면 비율 유지하기 .box { width: 30%; height: 0; padding-bottom: 30%; } 크기가 다른 이미지 박스에크기 맞추고 가운데 정렬하기 .box img { position: absolute; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; }

Front-end/CSS 2023. 6. 15. 23:08

그리드 선언 display : grid grid-template-columns : 원하는 column의 숫자만큼 크기를 정해준다. 예) grid-template-columns : 150px 150px 150px 가로길이 150px 공간이 3개 만들어진다. 동일하게 반복 될경우 repeat(3 , 150px)와 같이 작성하면 된다. 자식이 4개 이상이면 4번 개체는 아랫줄 맨왼쪽부터 정렬된다. grid-template-rows : 원하는 row의 숫자만큼 크기를 정해준다. 예) grid-template-rows : 150px 150px 150px 세로길이 150px인 공간이 3개 만들어진다. 동일하게 반복 될경우 repeat(3 , 150px)와 같이 작성하면 된다. gap: 원하는 크기의 여백을 정해 줄..

Front-end/CSS 2023. 6. 15. 23:07

플렉스박스선언 display : flex // display: inline-flex; 부모 태그에 wkrtjd ​ flex-direction : row 가로 flex-direction : column 세로 ​ flex-wrap : nowrap 자식태그의 크기를 줄여서 한줄로 정렬해버린다. flex-wrap : wrap 자식태그의 크기를 보호하며 부모태그의 가로길이를 넘어서 정렬하게되면 강제로 한줄 아래로 정렬한다. ​ axis 축 main axis : row 는 가로가 메인 축이 , column은 세로가 메인 축이 된다. cross axis: row 는 세로가 크로스 축이 , column은 가로가 크로스 축이 된다. ​ justify-content main axis 방향으로 정렬하는 방식 justify-..

Front-end/CSS 2023. 6. 14. 22:49

position : sticky 위속성을 적용한 박스는 원래 위치에 있다가 정해진 위치가 되면 position:fiixed 되어진것 처럼 표현된다. fixed absolute sticky static position의 모든 속성을 볼 수 있는데 static 은 그자리에 있고(다른요소를 방해한다.) fixed는 항상 그자리에 위치하며 absolute는 따로 떨어져 다른 요소에 방해되지 않고 고정 되어 있다. sticky는 일반적으로 자기위치에 있는 absolute와 같다고 할 수 있지만 정해놓은 값에 따라 fixed 처럼 나타난다. 위의 파란색 박스 (class="box2")는 스크롤하여 화면에서 봤을때 top:200px가 되면 fixed처럼 고정되어 움직인다. 하지만 이는 검은색 박스 (class="bo..

Front-end/CSS 2023. 6. 14. 22:46

pointer-event 그래픽 (텍스트 )요소가 포인터 이벤트의 대상이 될 수 있는지 지정 하는 속성 일반적으로 auto , none 를 사용한다. 선택사항1 선택사항2 선택사항3 선택사항4 선택사항5 선택사항1 선택사항2 선택사항3 선택사항4 선택사항5 123 123 주로 appearance : none 로 브라우저의 폼 기본요소를 지우고 디자인한 요소를 넣어 사용 할때 해당 요소가 클릭에 지장을 주지 않게 하기 위해서 사용한다. 선택사항1 선택사항2 선택사항3 선택사항4 선택사항5 ** 선택사항1 선택사항2 선택사항3 선택사항4 선택사항5 **

Front-end/CSS 2023. 6. 14. 00:42

한줄 일때 .txt_line { width:70px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 한줄 이상일때 line-clamp .line-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

Front-end/CSS 2023. 6. 12. 22:01

appearance 브라우저가 가지고 있는 고유의 button또는 select의 arrow 모양을 없애거나 변형 할 때 사용한다. 여러가지 속성이 있지만 모든 브라우저에 동일한 화면을 구현하기 위해 appearance : none 속성을 사용한다. 선택사항1 선택사항2 선택사항3 선택사항4 선택사항5 선택사항1 선택사항2 선택사항3 선택사항4 선택사항5 123 123 appearance : none 속성을 이용하여 화살표를 이미지나 아이콘으로 변경하여 꾸며준다.

Front-end/CSS 2023. 6. 12. 21:59