html, 스타일시트(css, scss)41 [ios/safari] 아이폰 css 작성 시 주의사항 ** 아이폰을 쓰지말자..! 각 브라우저별로 기본 스타일을 가지고있다.따라서 iOS/Safari 에서도 일관된 스타일을 유지하기 위해 CSS 초기화가 필요하다.이외에도, iOS에서만 가지고 있는 여러 문제들을 함께 다뤄보겠다. CSS 스타일1) CSS 초기화 사이트를 이용하여 기본 스타일 제거브라우저별 스타일을 초기화 하기 위해서 리셋 스타일을 제공하는 사이트를 많이 이용한다.보통 Normalize나 Reset이 가장 많이 사용된다. Normalize CSS는 유용한 스타일들을 유지시키고, 버그 및 브라우저 간 차이점을 일치시켜준다.github를 통해 지속적인 업데이트를 하고있기 때문에 Reset CSS보다 안정성이 높다.하지만 스타일에 대한 가이드가 명확하게 없으며, 만들고자하는 스타일의 변화가 크다.. 2024. 12. 18. [html] 개발자도구에서 미디어쿼리가 안되는 이유 반응형 작업을 하기 위해 미디어쿼리를 사용했는데,브라우저를 바로 줄일 때는 반응형이 되는데 개발자 도구에서 해보려고하면 안되고,,,,개발자 도구에서 스타일을 확인하면 미디어 쿼리 코드가 아예 사라지는 이유를 찾았다.#크롬 기기툴반전환 안되는 이유..#엣지 장치 에뮬레이션토글 안되는 이유.. 이유는 바로 태그에 있었다.meta 태그란?메타 태그는 데이터를 설명하는 데이터로, 해당 문서에 대한 정보를 담고있다.검색엔진이나 문자인코딩 방식등을 지정하고 싶다면, 메타 태그에 내용을 명시해야한다.메타 태그에 있는 3가지(http-equiv, name, content) 속성을 통해 meta 정보의 이름과 내용을 지정한다. +) 참고 블로그1. 메타 태그 정리 2. 메타 태그 종류 모음 결론결과적으로 안됐던 이유.. 2024. 12. 17. [html / css ] 사용자 드래그(drag) 막는 방법 사용자 드레그 막는 방법사용자가 웹페이지에서 원하지 않는 구간에 드레그를 하는 것을 막고 싶을 경우 user-select라는 속성을 사용하면 된다.웹 페이지 전체에서 드레그를 막고 싶은 경우 body태그에 속성을 적용시키면 된다.body{-webkit-user-select : none;-moz-user-select : none;-ms-user-select : none;user-select : none;} 사용자 드레그 허용하는 방법사용자에게 드레그를 허용하고 싶은 경우 속성값을 none에서 all로 바꿔주면 된다.만약 일부분만 허용하고 싶은 거라면 body태그에는 none을 걸고 원하는 태그에만 all로 값을 입력하면 원하는 부분만 선택 가능하다.텍스트만 드레그를 허용하고싶은 경우 속성값을 all 대.. 2024. 8. 1. [html/css] Transition과 Animation의 차이 (수정중) Transition & Animation 기존에는 웹페이지 내에서 동적인 효과를 주려면 Flash나 Javascript의 도움이 있어야먄 했다.하지만, transition과 animation 속성이 새로 정의되면서 더 간단하고 빠르게 모션 효과를 구현 할 수 있게 되었다.먼저 transition은 css 속성을 변경할 때 과정의 속도를 조절하는 속성이다.단순히 과정을 조정하는 역할이기 때문에 조정할 수 있는 선택지도 적고, 종료 후에는 상태가 유지되지 않는다.반면 animation은 @keyframes와 같은 속성을 활용해 요소의 다양한 상태를 지정할 수 있고, 종료된 후에도 원하는 상태를 유지할 수 있다.Transitioncss 속성을 변경할 때 해당 요소의 움직임을 부드럽게 처리하는 역할의 속성이다... 2024. 7. 4. [html/css] transform 변형 속성으로 육면체 만들기 transform 변형 속성transform은 변형속성으로 요소에 회전값이나 크기변환, 기울기, 이동 효과 등을 부여할 수 있는 속성이다.이러한 속성을 사용하기 위해서는 속성값에 화면좌표와 변환함수가 쓰이는데, 이에 대해 먼저 알아보겠다. 먼저 화면좌표란 브라우저 내에 존재하는 가상의 공간을 수로 표현하는 방식을 말한다.가상의 공간에는 x, y, z 축이 존재하는데, 이를 활용해 태그의 모양이나 위치를 바꿀 수 있다.공간을 구분할 때는 '2차원 화면 좌표'나 '3차원 화면 좌표'방식으로 구분해 사용한다. x축과 y축을 사용하는 변형 속성을 '2차원 화면 좌표'라고 부르고, z까지 모두 사용하는 것을 3차원 화면 좌표라고 부른다. 보통 좌상단 꼭짓점을 말하는 원점(0, 0)을 기준으로 각 축의 양수와 음수.. 2024. 7. 4. [html/css] Vertical-align 속성으로 가로 정렬하기(수정중) Vertical-alignVertical-algin은 inline요소와 table 셀들을 가로로 정렬하는 방법을 정하는 속성이다.W3C 에서 vertical-align을 정의하는 것은 다음과 같다.+) Table-cell에 적용된 vertical-align의 경우 해당 요소가 속한 table-row 사이에서 수직 정렬을 가능하게 한다.다만 수직 정렬의 기준이 되는 기준선 등은 인라인 요소의 수직 정렬과는 조금 다르다고 하니 아래를 참고하자.+) 참고1 : vertical-align 정의 - w3c+) 참고2 : table-cell 높이의 알고리즘-w3c+) 참고블로그 : vertical-align 파헤치기 1부 자식박스에 적용시키는 스타일 속성으로 baseline, top, midde, bottom.. 2024. 6. 28. 이전 1 2 3 4 ··· 7 다음
