자주쓰는 css모음 23.10.30

복습할겸 자주사용하는걸 정리해봤다 

 

1.hrml 박스 안에있는 내용물 정렬

.클래스명 {
		display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
           }

div안에 가운데 정렬을 위해 자주 활용한다 보통 바꿔쓸건  felx-direction : colum(세로정렬) ,row (가로정렬) 

2. 클래스명 부여 안하고 스타일 적용

 .클래스명 > 해당 button,input 등등  (> 꺾쇠) 를 사용한다면 해당 클래스안에 특정 태그만 집어서 설정가능

 

3.부트스트랩 활용

https://getbootstrap.com/docs/5.3/migration/#jumbotron 

Migrating to v5

https://getbootstrap.com/docs/5.3/examples/

Examples

만들고자 웹페이지 양식을 부트스트랩에서 개발자 도구를 통해 필요한 예시들을 찾아서 가져올수있다 (개발자도구 활용)

{F12 누르거나,마우스 우클릭후 검사 누르기}

 

4.html 이미지를 배경으로 넣을때 기본으로 쓰는 코드

.클래스명 {
	background-image: url('');
            background-position: center;
            background-size: cover;
            }

꽤나 자주 활용하게되는 css 배경으로들어간 이미지와 위치 그리고 사이즈를 지정해준다