본투비곰손

브라우저마다 기본 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

display:flex 레이아웃 구성시 수평/수직 구조를 쉽게 만들어 줄 수 있는 display 속성 container안에 items를 수직으로 쌓는 구조 flex-direction: row (세로형,기본값,좌측부터 정렬) flex-direction: column(가로형,위쪽부터 정렬) flex-direction: row-reverse(세로형,우측부터 정렬) flex-direction: column-reverse(가로형,아래쪽부터 정렬) 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 row , row-reverse column,column-reverse flex-wrap:nowrap items의 가로값의 합이 container의 가로 값 보다 크게 설정되어도 무시하고 가로값에 균일하게 채워진다..

Front-end/HTML 2023. 6. 17. 15:06

1. 기본 구조 과제 폴더 ┌ css ├ image └ js 과제폴더에는 html파일을 저장하고 css 과 그림 ,js 는 별도의 폴더를 만들어 관리한다. ​ 2. ​ html에 meta가 추가 되는데 의미는 (meta태그란 웹페이지의 정보를 제공하는 태그이다.) ​ content="width=device-width : meta name은 "viewport" 인 meta 로 선언 content="width=device-width : 가로길이는 각각의 기기의 가로 길이 initial-scale=1.0 : 초기 화면 비율은 1.0 maximum-scale=2.0 : 최대 비율 2배까지 확대가 가능 minimum-scale=1.0 : 최소 비율은 1.0 user-scalable=yes : 사용자가 비율을 변경..

Front-end/HTML 2023. 6. 16. 22:21

반응형 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