CSS5 CSS의 다양한 사이즈 단위 정리해드림 실습 코드를 확인하실 수 있습니다. https://codepen.io/mmvv11/pen/yLXRxzy CSS 사이즈 단위 ... codepen.io px 디바이스의 화면은 수많은 픽셀로 구성되어 있습니다. 화면의 최소 단위, 한칸 한칸이 바로 픽셀이라는 단위입니다. rem 문서의 최상위 요소(html 태그)에 정의되어 있는 font-size를 기준으로 크기를 정합니다. 일반적으로 브라우저엔 기본적으로 16px로 설정되어 있는데, 우리는 이를 10px로 변환하여 계산하기 쉽게 사용할 수 있습니다. em 부모요소의 글꼴 크기를 의미합니다. 중첩되어 있는 태그에 em 단위를 사용하면 중첩 단계가 깊어질 수록 계산이 어려워지는 단점이 있습니다. % 백분율 단위로 지정된 사이즈를 기반하여 상대적인 크기를 가지게.. 2022. 1. 31. 웹 개발을 쉽게 해주는 CSS 기본 설정 브라우저마다 기본 스타일이 지정되어 있습니다. 같은 태그라도 브라우저마다 조금씩 다르게 보일 수 있다는 점을 최소화 시키기 위해 기본적으로 아래와 같은 CSS 속성을 설정 하고 시작하면 좋습니다. * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: ??px; } 태그가 기본적으로 가지고 있는 마진, 패딩 값을 0으로 적용합니다. 요소의 너비와 높이를 설정할 때 기본적으로 border를 기준으로 설정하게끔 box-sizing 설정을 border-box로 해줍니다. 기본적으로 사이즈 단위 중 rem 단위는, html에 달려있는 폰트사이즈를 추종합니다. html에 font-size: 10px를 설정해주면 1rem = 10px이 되는 구.. 2022. 1. 31. HTML에 CSS를 적용하는 3가지 방법 CSS(Cascading Style Sheets)란, 한마디로 HTML을 꾸미는 기술입니다. CSS의 핵심은 HTML의 어떤 부분을 어떻게 꾸밀지 정하는 것입니다. HTML CSS 연결 대상 태그 내부 style 속성 사용 빨강 head 태그 내부 style 태그 선언 빨간맛 파일 분리 2022. 1. 31. 자주 사용하는 주요 HTML 태그 정리해드림 자주 사용하는 주요 HTML 태그를 알아보겠습니다. HTML 태그 종류는 정말 많지만, 자주 사용하는 것은 정해져 있는 것 같습니다. 아래 태그들만 숙지하셔도 꽤 유용하게 사용하실 수 있습니다. div 네모난 박스라고 생각하면 됩니다. 대부분의 레이아웃은 div태그로 구성합니다. css, js를 특정 부분을 제어할 때 유용합니다. class, id 속성을 함께 사용하는 것이 일반적입니다. h1~h6 안녕 제목이나 강조하고 싶은 부분을 나타내는 태그입니다. h1의 폰트 사이즈가 가장 크고 숫자가 커질수록 사이즈가 작아집니다. img : 이미지를 보여줄 수 있는 기능을 하는 태그입니다. 반응형 이미지 How To Create Responsive Images input 사용자의 입력을 받는 태그입니다. 자주 .. 2022. 1. 31. 이전 1 2 다음
