CSS (1)

DeadWhale·2022년 4월 18일
0

CSS

목록 보기
5/9
post-thumbnail

하...자바가 훨씬 재밌다..

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;
}

0개의 댓글