하...자바가 훨씬 재밌다..
CSS
- 마크업 언어가 실제 화면에 표시되는 방법(모양,색상,크기,스타일)를 기술하는 언어
- W3C(웹 표준 지정 기관에서 CSS를 표준으로 지정함.
1 ) < Style > 형식으로 열고 닫아 사용 할 수 있다.
2 ) Link 태그를 이용해 외부 CSS 파일과 연결 시킬 수 있다.
<link rel="stylesheet" href="css/select2.css" type="text/css">
relation => rel (링크 태그에 달리는 링크가 현재 링크와 어떤 관계인지.) CSS Selector (선택자)
- seletor : 현재 html 문서 내부에서 특정한 요소를 선택하는 문자
- 스타일를 적용하기 위한 요소 타겟팅을 위해 사용
태그 선택자
- 같은 태그를 선택하는 선택자
[작성법]
태그명 { CSS 코드; }아이디 값 선택자
- html 문서 내에서 id 속성 값이 일치하는 요소를 선택하는 선택자
- (중요) id 속성 값은 페이지 내에서 '유일'해야 한다.
[작성법]
# id속성값{ CSS 코드 };Class 선택자
- 문서 내에서 같은 Class 속성 값을 가지는 태그를 '모두'선택
[작성법]
.class속성값 {CSS코드}모든 요소 선택자
- 단독 혹은 다른 선택자와 함께 사용한 선택자로 모든 요소를 선택하는 선택자.
[작성법]
* {CSS코드}기본 속성 선택자
- 태그에 작성된 특정 속성을 선택
(id , class 도 선택은 가능하지만 보통은 # , . 을 사용함)
[작성법]
선택자[속성명="속성값"]{ CSS코드; }
-
1 ) 선택자는 생략 할 수 있다.
-
2 ) "속성값" 양쪽의 쌍따옴표("")는 홀따옴표('')으로 변경하거나 생략 가능
/* 기본 속성 선택자 경우의 수 */
1) div[name='name-1']{background-color: orangered;}
2) [name="name-2"]{background-color:lightblue;}
3) p[name="name-1"]{background-color: green;}자식 선택자 ( > )
- 지정된 요소 바로 하위에 존재하는 요소를 선택하는 선택자
[작성법]
선택자1 > 선택자2 {CSS 코드;}
-선택자 1: 부모요소
-선택자 2: 자식요소후손 선택자 ( ) 띄어쓰기
- 지정된 요소의 하위에 존재하는 '모든'요소를 선택하는 선택자.
[작성법]
선택자1 선택자2 {CSS 코드;}
-선택자 1: 조상요소
-선택자 2: 후손요소반응 선택자
-
사용자의 움직임에 반응해서 스타일이 달라지는 선택자
-
마우스 오버 / 클릭 유지 상태
요소를 클릭하고 있는 경우
:active요소에 마우스가 올라가 있는 경우
:hover
상태 선택자
-
입력 양식(input , input 관련 태그)의 상태에 따라 선택되는 선택자
:focus : 요소에 초점이 맞쳐졌을 때.
:checked : 요소가 체크 된 상태일 때(radio , checkbox)
:enabled / disabled
:enabled - 사용 가능한 상태 일 때.
:disabled - 사용 불가능한 상태 일 때.
동위선택자
- 동등한 관계(형제 관계)에서 바로 뒤에 위치한 요소를 선택
- 1) A 바로 뒤(다음)에 있는 B 요소 하나를 선택(+)
A선택자 + B선택자{CSS코드;}
- 2) A 바로 뒤에 있는 모든 B 요소를 선택(~틸드(titld))
A선택자 ~ B선택자{CSS코드;}checkbox의 모양 바꾸기.
1.check1 바로 뒤에 있는 label을 모양을 설정한다
- 1.1 : 사이즈를 지정한다 (가로 세로 30px)
- 1.2 : 테두리를 만들어 준다 (1px 사이즈의 검은 실선)
- 1.3 : 한 줄을 다 차지하지 않게 위해 수평분할과 크기조절이 가능하게 한 속성을 쓴다 (display : inline-block)
- 1.4 : 마우스가 올라가면 마이스 아이콘이 손가락 모양으로 바뀌게 하면서 테두리 곡률을 높힌다
2.Check가 된 상태의 라벨 태그
- 체크가 된 상태에서의 label 상태를 지정한다 url 로 불러온 이미지를 설정한다
이때 사이즈를 확장해 꽉 채우고 이미지를 반복하지 않는대(non-repeat)
3.모오옷 생긴 checkbox는 숨긴다
/* ********************check box 모양 바꾸기*********************** */
/* label 태그 스타일 지정 */
#check1 + label{
width: 30px;
height: 30px;
border: 1px solid black;
/* 수평 분할 + 크기조절 */
display: inline-block;
cursor : pointer; /* 마우스 손가락 모양으로 변경. */
/* 모서리 라운딩 처리 */
border-radius:12%;
}
/* 체크가 된 #check 뒤에 있는 라벨 태그*/
#check1:checked + label{
background-image:url(../../images/check.png) ;
background-repeat: no-repeat;
background-size: cover;
}
/* #check1을 존재는 하지만 화면에 보이지 않게 하기 */
#check1{
display : none;
}