스크롤을 주고 싶은 해당 영역에 class를 부여. table에 스크롤을 주고 싶은 경우는 table을 div영역으로 감싸서 클래스를 부여하면 됨. table자체에는 스크롤 태그 적용 불가 어떤 영역에 스크롤바를 추가하고 싶은 경우 보통 아래 3가지 속성 기본! @charset "UTF-8"; /* 스크롤바 사용 시 영역 지정을 꼭 해줘야 함. */ .my-scroll{ height: 100px; /*max-height: 14.7rem;*/ overflow: scroll; width: 200px; /*overflow-y: auto; y축에만 스크롤 생김, 범위를 벗어나면 스크롤 적용 */ } max-height 사용하면 아래 오른쪽 그림처럼 각 주문상태 영역에 데이터가 없어도 지정한 height만큼 크기..

방법1. float 속성 사용 div1 div2 div3 div4 div 태그 (block 태그) 블록 태그의 성질 때문에 한 줄 영역 차지 한다. > 세로로 정렬됨. 가로로 배치하기 위해서는 우선 가로 영역을 줄여야 됨. float 속성 사용. float: left; : 왼쪽에서부터 차곡차곡 쌓아주는 개념 가로로 배치할 때 공백 없이 붙어서 나옴. 그러나 감싸고 있는(배경) div 기준으로 입체적으로 배경 앞으로 튀어 나온다. 배경 div 태그 (부모 div 태그)에 오버플로우 속성 추가하면 다시 부모 div 영역으로 들어옴. overflow: auto; 방법2. display 속성 사용. div1div1div1 div2 div3 div4 display 속성의 inline-block 사용 display..

폰트 무료 상업 사이트 : 눈누 폰트 골라서 웹 폰트로 사용의 소스 복사 복사한 소스를 스타일 밑에 붙여넣기 body 태그 안에 넣으면 다 적용 됨. 스타일 적용을 body 태그로 지정해서 복사해 온 소스에서 font-family : ~ 전체 복사해서 붙여 넣으면 적용 됨.

로그인창 DOCTYPE html> Insert title here .container{ background-color: #f2f2f2; /* div의 너비 줄이기 */ /* 크기 변경 가능하나 한 줄 차지 성질은 그대로 유지!!! */ width : 400px; /* 세로 길이는 내용만큼 자동 넓어짐 */ /* padding : div 기준으로 안 쪽 여백 지정 */ /* padding-left: 30px; */ /* magin : div 기준으로 바깥쪽 여백 지정 */ /* margin-top: 50px; */ /* 그냥 margin 양쪽 방향 모두 조정 가능(가로) */ margin: 0 auto; /* margin : 상하여백 스페이스 좌우여백(오토는 같은 값? 줌) > 가운데 정렬 */ margi..

만들 때 div로 영역 주고 그 안에 내용 만드는 게 쉬움!! 영역을 모를 때 > backgroound-color 속성 주면 보기 쉬움 색 넣을 때 컬러팝 사용해서 RGB 가지고 와서 복사해서 쓰기 가능 background-color: #f2f2f2; 영역에서 여백 주기 /* padding-여백 줄 방향 : 여백 지정 */ div를 기준으로 안쪽 여백을 조정함 padding-left:30px; /* magin : div 기준으로 바깥쪽 여백 지정 */ /* margin-top: 50px; */ /* 그냥 margin 양쪽 방향 모두 조정 가능(가로) */ **div를 기준으로 바깥쪽 여백 조정 : margin margin: 0 auto; /* margin : 상하여백 스페이스 좌우여백(오토는 같은 값? ..

html에 작성하지만 CSS 문법임을 인지할 것. CSS 태그 작성 위치는 태그 안 태그 바로 아래 작성 CSS 내용은 style 태그 안에 작성 (이 안에 작성되는 내용들은 CSS 문법임!!!!!!) CSS 주석 : /* */ ctrl + shift + / 디자인을 변경하려면 우선적으로 디자인을 변경할 태그를 선택해야 한다. 즉, 디자인을 변경할 때는 먼저 디자인을 적용할 태그를 선택할 수 있어야 함. 이러한 태그를 선택하는 방법을 선택자라고 한다. (선택을 당하는 태그가 선택자임) ex) h1 태그 글자의 색을 바꿔줄 때 h1이 선택자가 됨. h1{ color: red; } ↑ h1태그를 선택한 것. h1이 선택자임. 선택자는 하나일 수도 있고 여러개일 수도 있다. 태그 자체를 선택하는 것 >> 태그..