grid layout 1 2 3 4 5 6 display에 grid 옵션을 주면 요소들을 그리드처럼 배치를 할 수 있다. grid-template-rows : 100px auto 100px; = 그리드 템플릿의 열 부분(세로)의 크기를 지정해 주는것 = 첫번째는 100px고 두번째는 자동 세번째도 100px = width를 600px를 줬으니까 이 600에 맞춰서 auto가 나머지를 지정 한다. grid-template-columns:100px auto; : 마찬가지로 첫번째만 100px고 나머지는 알아서 조정하라는 뜻. grid layout grid layout 1 2 3 4 5 6 grid-template:repeat(3, auto) / repeat(2, auto); 이 방식은 반복의 개념이다. 이건..

flex 플렉스 레이아웃을 적용하지 않은 경우 A B C display:flex, 수직으로 쌓는다. A B C A B C display:inline-flex, 수평으로 쌓는다. A B C A B C flex는 요소나 내용의 위치를 조절 할 수 있게 해준다. inline 방식으로도 지정이 가능해서 한줄에 표현도 가능하다. flex-direction : 아이템 주측 방향 설정 기본값 A B C flex-direction:row A B C flex-direction:row-reverse A B C flex-direction:column A B C flex-direction:column-reverse A B C 그리고 방향의 설정도 가능하다. flex-direction 명령어를 통해서 row 방향 column방..

.box{ width: 150px; height: 150px; margin: 30px; border: 3px dotted gray; background: orange; } .default-box{ background: #333; color: #eee; font-weight: bold; text-align: center; line-height: 150px; } .static-box{ position: static; background: #333; color: #eee; font-weight: bold; text-align: center; line-height: 150px; } default static default - static의 옵션은 그냥 안준 기본이랑 똑같다고 보면 된다. position:rela..

A B A B C clear: both는 가장 가까운 앞 요소에 설정된 float:left, float:right 속성 해제 A B C - float: left 옵션을 줘서 ABC를 왼쪽으로 정렬 시켰는데 그 다음에 노랑 박스를 주면 밑으로 가야하는데 얘도 똑같이 왼쪽으로 붙어 버렸다 float 옵션은 다 쓰고나면 반드시 clear: both 옵션으로 청소를 해줘야 한다. 안그러면 계속 이상하게 나온다. - clear: both는 가장 가까운 앞 요소에 설정된 float:left, float:right 속성을 해제함 float 속성 해제하는 여러 방법들 float 해제 A B C D 부모에 강제로 height 속성을 주면 float가 해제 됨 A B C D clear:both는 margin이 적용되지 않..

마진 겹침 현상-block 에서는 top와 bottom 마진이 겹칠 수 있다. A A A A A의 경우 마진 옵션이 전부 20px 씩 들어갔지만 상하는 모두 동일한걸 보면 좌우는 20px 전부 들어갔지만 상하는 한번만 들어간 모습을 확인 할 수있다. 이 문제를 해결하기 위해서 padding 옵션을 주면 된다. 각 모든 내부 요소에 패딩을 주면 된다. 오렌지 노랑 초록 색상 전부에 패딩을 준 모습. border로도 해결이 가능하다. 역시 모든 내부 요소에 다 보더를 줘야한다. margin이 위아래로 겹칠 때 해결 방법 - 단순하게 margin-bottom이나 top 옵션을 줘서 떨어뜨리면 된다.

요소의 박스에 컨텐츠가 넘칠때 이 넘친걸 어떻게 처리할지 지정. overflow : 요소의 박스에 콘텐츠가 넘칠 때 표현방법을 지정 default html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis visible html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis hidden html css javascript jquery node.js react vue.js java oracle mysql bigdata maven..

width, height 자바 스프링 오라클/p> 서블릿 CSS 자바 스프링 오라클/p> 서블릿 CSS - width와 height 개념은 매우 중요하다. 완전 기초 - box 라는 클래스를 미리 만들어서 전체 틀로 사용 선 경계는 3px 두께에 선 패턴 모양은 dotted 색깔은 회색 내부 간격 30px 텍스트 중앙에 오게 하기 - box1 클래스 너비 200px 높이 30px 외부 간격 위아래20px 좌우10px - box2 클래스 너비 400px 높이는 최소 높이를 30px로 설정 외부 간격 20px 하고 위치는 가운데로 오게하기. box box1 클래스의 결과 이렇게 잘려서 나오는 이유는 box랑 box1 의 높이가 30px로 설정이 되어 있기 때문이다. box box2의 결과 화면 상에는 표시 ..

white-space = 요소의 공백 처리 방법 선택 white-space : 해당 요소의 공백 처리 방법을 결정한다. normal javascript html css java spring oracle mysql nowrap javascript html css java spring oracle mysql pre javascript html css java spring oracle mysql pre-wrap javascript html css java spring oracle mysql pre-line javascript html css java spring oracle mysql - white-space: normal; = 영역을 넘어가면 알아서 라인을 넘김 / 태그로라인넘김 - white-space: ..