분류 전체보기105 Box Model | border... | Box-Sizing 모든 HTML 요소는 웹페이지에서 일정 공간을 차지한다. 이러한 공간을 css에서는 박스 모델 (Box Model)로 정의한다. 구성요소 Content : 텍스트나 이미지가 들어가는 HTML 요소의 실질적인 내용 Padding : Content와 Border 사이의 영역으로, 안쪽 여백을 말한다. Border : Content를 감싸는 테두리 Margin : 테두리와 이웃하는 요소 사이의 간격. 바깥 여백 모든 HTML 요소의 Box Model의 구성은 동일하며, 웹 브라우저 > 개발자 도구 > Computed 탭에서 박스모델을 확인할 수 있다. Box Model Css 속성 Content width : 가로 너비를 지정할 수 있다. height : 세로 너비를 지정할 수 있다. width : 200px.. 2024. 1. 23. Table (표) 관련 속성 태그에 border 속성을 활용해서 테두리를 그린다. table { border : 1px solid #222; border-collapse : collapse ; } 📌 border-collapse : collapse ; 속성을 사용해서 중복된 테두리를 하나로 만든다. DOCTYPE html> Table Tag #movies { border-collapse: collapse; width: 100%; } #movies td, #movies th { border: 1px solid #181818; padding: 8px; } #movies th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: green; color.. 2024. 1. 23. CSS 폰트 글꼴 관련 속성 | 웹폰트 | 단위 | 색상키워드 표기법 | 그 외 속성 글꼴 관련 속성 font-family : 글꼴 종류를 지정한다. 기본적으로 웹브라우저 기본값 font-size : 글자 크기를 지정한다. font-style : 글자를 이텔릭체로 표시 여부를 정한다. font-weight : 글자 굵기를 정한다. font-variant : 소문자를 대문자로 바꾸는 속성 웹폰트 사용자의 컴퓨터에 설치된 폰트와 관계없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드 하여 화면에 표시해주는 웹 전용 폰트 구글 웹 폰트는 또는 @import 문을 사용해서 웹 폰트를 적용할 수 있다. 단위 px : 픽셀단위 rem : 루트 요소의 글꼴 크기 기준 n배 em : 자신 요소의 글꼴 크기 기준 n배 vw : viewport 너비의 n% vh : viewport 높이의 n% 색상 키.. 2024. 1. 23. Selector (선택자) | 기본 선택자 | 그룹 선택자 | 결합자 전체선택자 : 보통 브라우저가 가지고 있는 기본 스타일을 초기화할 때 주로 사용한다. * { margin: 0; padding: 0; } Type 선택자 /* Type 선택자 */ h2 { color: green; } p { color: gray; font-weight: 400; tex Calss 선택자 온점 (.) 입력 후 Class 이름을 입력한다. 이름이 겹쳐도 상관없다. /* Class 선택자 */ .red--text { color: red; } .blue--text { color: blue; } ID 선택자 (#) 입력후 id 이름을 입력한다. 고유해야 한다. /* ID 선택자 >> 고유해야 한다. class 처럼 겹치면 안된다. */ #title { font-size: 40; color: da.. 2024. 1. 23. 이전 1 2 3 4 5 6 ··· 27 다음
