
두 개의 파일을 다운받아야 한다!eclipse 다운https://www.eclipse.org/downloads/다운받기!Tomcat 다운https://tomcat.apache.org/download-90.cgi아파치 알집 풀기 -> jee 이클립스 알

HTML이 웹 페이지의 "뼈대"라고 한다면, CSS는 "살" 이라고 할 수 있음즉, HTML이 웹 페이지의 정보를 나타낸다면, CSS는 HTML을 좀 더 보기 좋게 디자인하는 역할이라고 생각하면 됨=============================코드=========

`` : 현재 문서의 외부 리소스(.css) 파일 과의 관계를 명시하는 선언 rel = "stylesheet" : `` 태그로 연결하는 파일이 외부에 있는 스타일시트 파일이라는 뜻을 가지고 있음 href : 이 속성은 링크된 리소스의 url 경로를 참조함 외부 스타일시

문서 전체 배경 색상 : background-color: lightgray; 배경에 이미지를 지정하는 속성 : background-image: url("images/img.jpg"); 배경 이미지를 한 번만 표시하는 속성 : background-repeat: no-
맨 위의 ``태그와 ` 안에 있는 `태그의 텍스트 요소에 각기 다른 색상을 선언해줄 수 있음! 코드============================= 실행============================= ul li { } : 자식을 포함한 자손 ul >
그룹선택자 코드============================= 실행============================= 순서선택자 : nth-of-type() 코드============================= 실행===================

아이디, 비밀번호를 입력할 수 있는 칸을 만들어보자!=============================코드=============================비밀번호는 \* 로 표시됨!hover 를 사용하게 되면 마우스에 올렸을 때 선언해준 색깔에 맞추어 색이 들어옴

: 특정 태그를 사용한 요소에 스타일 적용특정 요소에 스타일 적용웹 문서에서 고유한 식별자를 정의할 때 사용함대체적으로 큰 골격의 이름에 사용하는 것이 좋음같은 id 이름을 중복해서 사용하지 못함 하나의 요소에 여러 개의 id를 동시에 사용하지 못함대체적으로 상단의 헤

주요 태그 : hn, p, div사용 가능한 최대 가로 너비로 사용함width: 100%, height: 0%로 시작 ==> default 값크기를 지정할 수 있음수직으로 쌓임margin, padding의 속성에 상단, 하단, 왼쪽, 오른쪽 사용이 가능함주로 레이아웃을

em은 사용하는 글꼴의 대문자 M을 기준으로 함부모요소에서 지정한 폰트의 대문자 M을 1em 이라는 기준으로 설정해놓고, 상대적 값을 계산하여 다른 요소들의 글자 크기를 지정함만약 지정한 글자 크기가 없다면 <body> 태그의 기본 글자 크기인 16px이 1em의

CSS의 여백 1. margin(요소의 바깥쪽 여백) 요소의 바깥쪽 여백을 지정하는 속성 바깥쪽 여백은 요소와 요소 사이의 간격(거리, 공간)을 생성할 때 사용함 속성에는 상단, 오른쪽, 하단, 왼쪽 모두 다르게 지정할 수 있음 사용법 margin: 10px 20p

요소의 테두리 선을 지정할 때 사용하는 속성형식) border: 선의두께 선의종류 선의색상;border-width : 테두리 선의 두께border-style : 테두리 선의 종류border-color : 테두리 선의 색상none : 테두리 선 없음hidden : 테두리
text-shadow 속성 텍스트에 그림자를 지정하는 속성 형식) text-shadow: 가로거리 텍스트로부터 그림자까지의 가로거리 양수 값은 글자 오른쪽으로 그림자를 만들어 주고, 음수 값은 글자 왼쪽으로 그림자를 만들어 줌 필수적으로 들어가야 하는 값 세로거리
float 속성 웹 문서의 요소를 떠 있게 하는 속성 수직적인 요소를 수평적인 요소로 바꾸어 주는 속성 왼쪽 구석이나 오른쪽 구석에 배치한다는 의미 문서의 레이아웃을 구성하기 위해서 많이 사용되는 속성 float 속성의 값 right : 오른쪽부터 차례로 왼쪽 방향으
코드============================= 실행============================= 스타일 적용 전 스타일 적용 후 코드============================= 실행================
box-shadow 속성 그림자를 만드는 속성 형식) box-shadow: 수평거리 그림자의 수평거리(얼마나 떨어져 있는지) 양수값은 오른쪽, 음수값은 왼쪽으로 그림자를 만듦 수직거리 그림자의 수직거리(얼마나 떨어져 있는지) 양수값은 아랫쪽, 음수값은 윗쪽으로 그림
overflow 속성 : 요소의 크기 이상으로 내용(자식요소)이 넘쳤을 때 내용이 보여짐을 제어하는 속성을 말함 visible : 넘친 부분을 자르지 않고 그대로 보여줌 hidden : 넘친 부분을 잘라내고 보이지 않게 함 scroll : 넘친 부분을 잘라내고, 스크
코드============================= 실행============================= 세번째 단락에서 위로 눌렀을 때 맨 위로 올라감
display 속성 : 웹 페이지 상에서 요소들이 어떻게 보여지고 다른 요소와 어떻게 상호 배치되는지를 결정하는 속성임 inline : display 속성이 inline으로 지정된 요소는 전후 줄바꿈이 없이 한 줄에 다른 요소들과 나란히 배치가 됨 block : d

css 파일 내에 main.css 를 생성 코드============================= html 파일 코드============================= 실행============================= login