CSS
1.Web Eclipse 초기 설정
두 개의 파일을 다운받아야 한다!eclipse 다운https://www.eclipse.org/downloads/다운받기!Tomcat 다운https://tomcat.apache.org/download-90.cgi아파치 알집 풀기 -> jee 이클립스 알
2.CSS_1강_1_CSS특징
HTML이 웹 페이지의 "뼈대"라고 한다면, CSS는 "살" 이라고 할 수 있음즉, HTML이 웹 페이지의 정보를 나타낸다면, CSS는 HTML을 좀 더 보기 좋게 디자인하는 역할이라고 생각하면 됨=============================코드=========
3.CSS_1강_2_link
`` : 현재 문서의 외부 리소스(.css) 파일 과의 관계를 명시하는 선언 rel = "stylesheet" : `` 태그로 연결하는 파일이 외부에 있는 스타일시트 파일이라는 뜻을 가지고 있음 href : 이 속성은 링크된 리소스의 url 경로를 참조함 외부 스타일시
4.CSS_1강_3_배경(색상, 이미지, 배치)
문서 전체 배경 색상 : background-color: lightgray; 배경에 이미지를 지정하는 속성 : background-image: url("images/img.jpg"); 배경 이미지를 한 번만 표시하는 속성 : background-repeat: no-
5.CSS_1강_4_글자(색상 속성)
맨 위의 ``태그와 ` 안에 있는 `태그의 텍스트 요소에 각기 다른 색상을 선언해줄 수 있음! 코드============================= 실행============================= ul li { } : 자식을 포함한 자손 ul >
6.CSS_1강_5_그룹 선택자/순서 선택자, 짝수/홀수, 첫번째/마지막 스타일 적용
그룹선택자 코드============================= 실행============================= 순서선택자 : nth-of-type() 코드============================= 실행===================
7.CSS_1강_6_아이디, 비밀번호 창 / hover 효과
아이디, 비밀번호를 입력할 수 있는 칸을 만들어보자!=============================코드=============================비밀번호는 \* 로 표시됨!hover 를 사용하게 되면 마우스에 올렸을 때 선언해준 색깔에 맞추어 색이 들어옴
8.CSS_2강_1_선택자(태그, ★★★id, class★★★)
: 특정 태그를 사용한 요소에 스타일 적용특정 요소에 스타일 적용웹 문서에서 고유한 식별자를 정의할 때 사용함대체적으로 큰 골격의 이름에 사용하는 것이 좋음같은 id 이름을 중복해서 사용하지 못함 하나의 요소에 여러 개의 id를 동시에 사용하지 못함대체적으로 상단의 헤
9.CSS_2강_2_블록레벨, 인라인레벨 요소
주요 태그 : hn, p, div사용 가능한 최대 가로 너비로 사용함width: 100%, height: 0%로 시작 ==> default 값크기를 지정할 수 있음수직으로 쌓임margin, padding의 속성에 상단, 하단, 왼쪽, 오른쪽 사용이 가능함주로 레이아웃을
10.CSS_2강_3_em단위
em은 사용하는 글꼴의 대문자 M을 기준으로 함부모요소에서 지정한 폰트의 대문자 M을 1em 이라는 기준으로 설정해놓고, 상대적 값을 계산하여 다른 요소들의 글자 크기를 지정함만약 지정한 글자 크기가 없다면 <body> 태그의 기본 글자 크기인 16px이 1em의
11.CSS_3강_1_여백(margin, padding)
CSS의 여백 1. margin(요소의 바깥쪽 여백) 요소의 바깥쪽 여백을 지정하는 속성 바깥쪽 여백은 요소와 요소 사이의 간격(거리, 공간)을 생성할 때 사용함 속성에는 상단, 오른쪽, 하단, 왼쪽 모두 다르게 지정할 수 있음 사용법 margin: 10px 20p
12.CSS_3강_2_border 속성
요소의 테두리 선을 지정할 때 사용하는 속성형식) border: 선의두께 선의종류 선의색상;border-width : 테두리 선의 두께border-style : 테두리 선의 종류border-color : 테두리 선의 색상none : 테두리 선 없음hidden : 테두리
13.CSS_3강_3_text-shadow
text-shadow 속성 텍스트에 그림자를 지정하는 속성 형식) text-shadow: 가로거리 텍스트로부터 그림자까지의 가로거리 양수 값은 글자 오른쪽으로 그림자를 만들어 주고, 음수 값은 글자 왼쪽으로 그림자를 만들어 줌 필수적으로 들어가야 하는 값 세로거리
14.CSS_3강_4_float 속성
float 속성 웹 문서의 요소를 떠 있게 하는 속성 수직적인 요소를 수평적인 요소로 바꾸어 주는 속성 왼쪽 구석이나 오른쪽 구석에 배치한다는 의미 문서의 레이아웃을 구성하기 위해서 많이 사용되는 속성 float 속성의 값 right : 오른쪽부터 차례로 왼쪽 방향으
15.CSS_3강_5_종합
코드============================= 실행============================= 스타일 적용 전 스타일 적용 후 코드============================= 실행================
16.CSS_4강_1_box-shadow, opacity
box-shadow 속성 그림자를 만드는 속성 형식) box-shadow: 수평거리 그림자의 수평거리(얼마나 떨어져 있는지) 양수값은 오른쪽, 음수값은 왼쪽으로 그림자를 만듦 수직거리 그림자의 수직거리(얼마나 떨어져 있는지) 양수값은 아랫쪽, 음수값은 윗쪽으로 그림
17.CSS_4강_2_overflow 속성
overflow 속성 : 요소의 크기 이상으로 내용(자식요소)이 넘쳤을 때 내용이 보여짐을 제어하는 속성을 말함 visible : 넘친 부분을 자르지 않고 그대로 보여줌 hidden : 넘친 부분을 잘라내고 보이지 않게 함 scroll : 넘친 부분을 잘라내고, 스크
18.CSS_4강_3_맨 위로 올려주는 속성
코드============================= 실행============================= 세번째 단락에서 위로 눌렀을 때 맨 위로 올라감
19.CSS_4강_4_display 속성
display 속성 : 웹 페이지 상에서 요소들이 어떻게 보여지고 다른 요소와 어떻게 상호 배치되는지를 결정하는 속성임 inline : display 속성이 inline으로 지정된 요소는 전후 줄바꿈이 없이 한 줄에 다른 요소들과 나란히 배치가 됨 block : d
20.CSS_5강_데카르트 홈페이지를 만들어보자
css 파일 내에 main.css 를 생성 코드============================= html 파일 코드============================= 실행============================= login