1. html에서 DIV 태그를 사용하여 클래스 정의하기 html 2. 정의한 클래스의 CSS코드 입력 css .container { width: 100%; height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
CSS 박스 모델 height/ width(크기) width/height : HTML 요소의 너비/높이 설정 -기본값 auto max-width/height : HTML요소가 가질 수 있는 최대 너비/높이 설정 -기본값 none ㄴ줄어드는 웹브라우저의 크기에 맞춰 해당 HTML의 너비도 자동으로 줄어든다. min-width/height : HTML요소가 가질 수 있는 최대 너비/높이 설정 -기본값 0 ㄴ설정된 너비 이하로 줄어들면, HTML은 줄어들지 않고 수평 스크롤바를 생성한다. units(크기 단위) CSS에서 사용하는 크기 단위 : %, em, px, cm, mm, inch 등 1em = 100% box model content(내용) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 pa..
CSS 기본 속성 text color : 텍스트 색상 letter/word-spacing : 문자/단어 사이의 간격 설정 text-indent : 단락의 첫 줄을 들여쓰기 여부 설정 ex) :30px; text-align : 텍스트 정렬 설정 ex) :left/ right/ center; text-decoration : 텍스트에 여러가지 효과 설정 혹은 제거 ex) :overline/ line-through/ underline/ none; line-height : 텍스트의 줄 간격 설정 ex) :1.8; text-shadow : 그림자 효과 설정 ex) : 2px 1px #3399CC; font font-weight : 텍스트를 얼마나 두껍게 표현할지를 설정 font-size : 텍스트 크기 설정 lin..
CSS에 대한 기본내용 CSS(Cascading Style Sheets) : HTML을 보완하기 위해 만들어진 것으로 폰트, 색상, 공백 공간과 그 밖의 문서 표현 측면을 자유롭게 지정할 수 있는 기능을 제공하는 스타일 시트 언어. - HTML로 일일이 세부 스타일을 지정해주는 것에 대한 보안 - 완성 후 스타일 변경 및 유지보수의 간편화 - HTML의 표현 한계 보완 - 문서의 컨텐츠와 스타일을 분리함으로 작업의 효율성 향상 CSS의 문법 h1 { color: #FF0000; background: #00FF00 } h1 : 선택자 { } : 선언부 color, background, … : 속성명 #FF0000, #00FF00 : 속성값 : : 콜론 ; : 선언 구분자 CSS의 문법은 선택자와 선언부로 ..
