DAY_023[국비] 자바 웹프로그래밍 과정

Bona의 블로그 입니다.·2022년 10월 31일
0

국비과정

목록 보기
24/99
post-thumbnail

 🌞 Day 022 



 🌌 AttributeSelector 

  • 태그명[속성=속성값] { css작성 }

       input[type=password]{background-color: yellow;}


 🌌 Descendant(후손 선택자) 

  • 후손 선택자
    : 특정 태그 아래에 있는 후손을 선택할 때 사용하는 선택자.

  • id의 사용을 남용하지 않고 상대적 위치로 Selector를 사용한다.

  • 빈칸(공백)으로 선택자가 이어지면, 아래에 포함되어 있는 child 선택자들 모두 지목하게 된다.

    #header h1 {color: red;}
     #header h1, #header h3 { background-color: yellow;}
  • #header h1, #header h3
    => header안의 h1과 header 안의 h3를 선택하고자 할 때 ','로 구분하면 두 개의 후손 선택자를 동시에 선택이 가능하다.

  • [주의!!]
    => #header h1, h3 - > header안의 h1과 내부 & 외부 포함한 모~든 h3에 적용

  • 후손 선택자 사용시 ' '공백을 사용하면 지목된 선택자 안의 모든 후손 선택자가 선택되지만, '>'를 사용하면 바로 아래 후손 선택자만 선택된다.

        #header>h2 { background-color: orange; color: red;}
        #section>h1 { background:yellow; color:green}
        #nav>h2 {background: yellowgreen; color:blue}
        #header>#nav>h1 {background: pink; color:red;}

        table>tbody>tr>td { color: blue;}
        table>tbody>tr>th {color: red}

 🌌 Adjacent(인접 선택자) 

  • 인접(adjacent) 선택자
  • h1 태그의 바로 뒤에 h2태그의 color 속성에 red 키워드를 적용
    ➡️ h1 + h2 {color:red}
    후손선택이 아닌 같은 수준의 바로 다음에 위치한 태그 선택

  • h1~h3 {background-color: green;}
    => h1 뒤에 있는 h3들!!


 🌌 Hover 

  • 선택자 :hover
    선택자로 지목한 태그에 마우스를 올리면 변경할 CSS를 지정한다.

  • transition-duration
    : hover 등의 적용시 transition-duration이 설정되어 있다면 설정된 시간동안 변화가 일어나도록 시간 지연 현상을 일으킨다.

  • 선택자1에 hover를 적용하되, css변경을 다른 태그에 적용하고 싶다면, "자신의 형제나 후손 선택자에게만" 가능하다.

  • 자신의 부모나 부모의 형제 또는 부모의 형제의 자손 선택자, 그리고 자신의 형제 중 앞서서 먼저 출현한 형제 선택자에게는 적용할 수 없다.
    그들에게 적용하려면 자바스크립트 또는 제이쿼리를 사용해야 한다.

 🪐 Hover 연습 

  • 각 메뉴에 마우스를 올리면 부메뉴가 100px만큼 펼쳐지고, 각 메뉴의 글자 색은 오렌지색으로 변경 각 동작은 1초간 진행되게 코딩 하기

  • id대신 class에 css 적용하고 수정 ⬇


 🌌 StateSelector 

  • 반응, 상태 선택자
    : 입력 양식의 상태, 태그에 일어난 이벤트를 선택할 때 사용하는 선택자.

  • 종류

    •  :enabled    ➡   활성화 상태
    •  :disabled    ➡   비활성화 상태 - 입력X 클릭X 상태
    •  :focus        ➡   깜빡이는 커서가 태그 안에 잡히거나 클릭되어 포커스를                     얻은 상태
    •  :checked 
    •  :hover        ➡   마우스가 위로 올라온 상태
    •  :active        ➡   마우스로 클릭(누르고 떼지 않은) 상태

 🌌 Border 

border(테두리) 속성

  •  border-width 속성 

    • 테두리의 너비를 지정하는 스타일 속성.

    • 크기 단위 : border-left[ top / right / bottom ]-width

    • 키워드 : medium / thick / thin ...

  •  border-style 속성 

    • 테두리의 형태를 지정하는 스타일 속성

    • border-left[ top / right / bottom ]-style

  •  border-color 속성 

    • border-left[ top / right / bottom ]-color

  •  border-radius 속성 

    • CSS3에서 추가된 속성.

    • 테두리가 둥근 사각형 또는 원을 만들 수 있다.

    • border-radius 값을 4개로 넣었을 때 적용 순서
      : 왼쪽위 -> 오른쪽위 -> 오른쪽아래 -> 왼쪽아래

  • border에 의한 선 굵기는 div 또는 박스모델의 전체 크기에 합산되어 관여한다. (width:400px, height:150px)인 .box2는 양쪽 5px의 선굵기가 포함되어서 너비 410px, 높이 160px이 된다.


 🌌 BoxModel 

.box { width: 170px; height: 100px; border: 10px solid blue;
       margin-bottom: 30px; padding-left: 30px; padding-top: 30px;}
  • padding 값은 전체 크기에 합산 된다. 따라서 위 코드블럭에서 본 .box의 실제 크기는 너비(높이)+선+패팅을 모두 합해서
    => width: 220px(170+102+30), height: 150px(100+102+30) 로 봐야한다.

 🌌 ListMenu 

  •  list-style: none; 
    : 글머리기호 삭제
  •  padding: 0px; 
    : 글머리기호가 차지하고 있던 padding 삭제
  •  margin: 0px; 
    : 위쪽에 존재하던 margin 삭제

 🌌 PseudoClass 

일반구조 선택자

  • CSS3부터 지원하는 선택자

  • 일반적으로 자손선택자와 병행해서 많이 사용

  • 같은 이름의 태그들 또는 클래스 이름들을 대상으로 하는 선택자

  • 종류

     :first-child  ➡ 첫번째 위치하는 자손을 선택

     :last-child  ➡ 마지막에 위치하는 자손을 선택

     :nth-child  ➡ n번째 위치하는 자손을 선택

  • li>a:first-child { color: red;}
    list>a는 모든 리스트 안의 a태그를 가르킨다. 모든 li 안에는 a가 모두 존재하고, 하나 밖에 없으면 li>a:first-child는 모든 li안의 첫번째 a태그들을 가르키므로 모두 빨간 색 표시
  • li:first-child>a { color: blue;}
    li 중에서 첫번째, 그리고 그 안의 a태그 이므로 첫번째 li안의 a태그만 파란색으로 표시된다.
  • body > *first-of-type{color:red}
    body 태그 안의 모든 태그들 중 같은 유형의 첫번째 태그들

 🌌 CSS Size 

  • font-size 단위 : px, %, em

 🌌 Background 

배경속성

  • 특정 태그의 배경이미지 또는 색상을 지정하는 스타일 속성

  • 종류

    1)  background-image 속성 

    • 배경에 넣을 그림을 지정하는 스타일 속성
    • 속성에는 URL 단위 또는 그레이디언트를 입력
      { background-image: url( *images/BackgroundFront.png* ); }

    2)  background-size 속성 

    • 그림 크기를 조절할 때 사용하는 스타일 속성이며, CSS3에서 추가된 기능

    • 키워드 : contain/cover

      • contain : 너비를 100%로 지정한 것과 같은 효과

      • cover : 높이를 100%로 지정한 것과 같은 효과

    3)  background-repeat 속성 

    • repeat : 이미지가 패턴을 이룸

    • 키워드 : no-repeat / repeat / repeat-x / repeat-y

    • repeat-x : x축 방향으로 이미지가 반복

    • repeat-y : y축 방향으로 이미지가 반복

    4)  background-attachment 속성 

    • 배경 이미지를 어떠한 방식으로 화면에 붙일 것인지를 지정하는 스타일 속성

    • 속성의 기본 키워드 : scroll (키워드 : fixed / scroll)

    • fixed : 스크롤을 이동해서 배경 이미지 고정

    5)  background-position 속성 

    • background-position : x축 위치;

    • background-position : x축 위치, y축 위치;


 🌌 Font 

폰트 속성 : 글자와 관련된 스타일 속성

  1.  font-size 
    : 글자의 크기를 지정하는 스타일 속성.

  2.  font-family 속성 

    • 폰트를 지정하는 스타일 속성

    • 일반적으로 한 단어로 이루어진 폰트트 따옴표를 사용하지 않음. 하지만 두 단어 이상으로 이루어진 단어는 따옴표를 반드시 적용

  3.  font-style 속성 

    • 폰트의 기울기 지정하는 스타일 속성 - 키워드 : italic 등

  4.  font-weight 속성 

    • 폰트의 두께를 지정하는 스타일 속성

    • 키워드 : 700/800/900/bold ...

    • 일반 폰트 두께: 400, 두꺼운 폰트 두께:700

    • 두께를 지원하지 않는 폰트는 font-weight 속성을 사용해 두께를 조절할 수 없다.

  5.  line-height 속성 

    • 글자의 높이를 지정, 글자를 수직 중앙 정렬할 때 사용

  6.  text-align 속성 

    • 글자의 정렬과 관련된 스타일 속성

 🌌 Shadow 

속성값

  • 첫번째 : 좌(-)우(+) / 두번째 : 상(-)하(+) => 그림자 크기,
    양수는 오른쪽과 아래, 음수는 왼쪽과 위

  • 세번째 : 번짐 정도를 표시

  • 네번째 : 그림자 확장 정도를 표시

  • 다섯번째 : 그림자 색깔

  • 같은 방식으로 text-shadow도 있다. 다만 글자에 그림자를 넣는 동작이므로, 적용할 때 글자의 굵기가 굵은 font를 적용 후 사용하는 것이 자연스럽다.

text-decoration: none;
➡ 밑줄 등의 스타일을 없앤다. 주로 앵커태그 및줄 없앨 때 많이 사용



profile
제가 공부하고 공유하고 싶은 글을 올리고 있습니다.

0개의 댓글