IT 개발 지식

Grid란? CSS의 레이아웃 시스템이며 2차원 레이아웃으로 아이템들을 배치한다. 사용방법으로는 Flex박스와 비슷하게 사용된다. Item 1 Item 2 Item 3 /* Grid 열 만들기 */ grid-template-columns: 300px 300px 300px; .grid { /* Grid rows */ display: grid; grid-template-rows: 1fr 2fr 3fr; } .grid { display: grid; grid-template-columns: repeat(4, 1fr); } .item:first-child { grid-column: 1/4; grid-row: 1/3; }

Position 속성 fixed relative absolute static 기본 ※ absolute 속성을 쓰기 위해서는 부모의 Position이 static 여서는 안된다. 화면의 정가운데 박스의 내용도 가운데에 넣기 박스의 꼭짓점 기준으로 가운데정렬이 되어 margin을 박스 절반만큼 줄여주거나 가로정렬, 세로정렬을 해준다. 정중앙으로 # Form CSS 실습 Sign Up It's free and only takes a minute First Name Last Name Email Password Confirm Password Sign Up By clicking the Sign Up button, you agree to our Terms & Conditions and Privacy Policy Al..

content : 내용물 padding : content(내용물)와 border의 간격 border : 경계선 margin : 여백 블럭 vs 인라인 차이점은? 블럭 인라인 한줄에 하나씩 쌓인다. 한줄에 여러 요소가 나온다. 가로와 세로 길이를 가진다. 가로 세로 길이 X, 내용물의 크기 만큼 차지한다. 화면 배치를 위해 주로 사용된다. 텍스트를 꾸밀 때, 주로 사용이 된다. font-family 속성 웹문서에서 사용할 글꼴을 지정 텍스트를 사용하는 요소들에 사용됨 지정한 글꼴이 없을 경우 2~3가지 글꼴을 지정할 수 있음 둘 이상의 글꼴을 지정할때에는 ,로 구분함 body { font-family:"맑은 고딕",돋움,굴림; /* 글꼴 */ } 1. Font Style, 폰트 글꼴 p.normal { f..

스타일(style) : HTML 문서에서 자주 사용하는 글꼴 및 색상, 정렬 각 요소의 배치 방법 등 문서의 겉모습을 표현 하는 내용이다. 스타일 시트(style sheet) : 스타일을 관리하기 쉽게 하나로 모은것이다. CSS를 사용하는 이유는? 많은 웹페이지를 동시에 관리가 가능하다 (많은 일을 절약 가능) 웹 사이트의 스타일을 일관성 있게 유지할 수 있다. (유지 보수가 쉽다) 다양한 기기에 맞추어 반응하는 문서를 만들수 있다. HTML에 CSS 적용방법은? 인라인 스타일 방법 (lnine Style Sheet) => 권장하지는 않는다. 내부 스타일 시트 (lnternal Style Sheet) 외부 스타일 시트 (Linking Style Sheet) 인라인 스타일 방법 h1 { font-size:..