2022-09-22 CSS우선순위, 속성

 [선택자]  특정한 것을 독립적으로 표현하고자 할 때 사용.

 

3. id선택자 (자바스크립트, 제이쿼리)
- 웹문서를 구성하는 다양한 컨텐츠 중에서 하나의 컨텐츠만 식별해서 사용하고 싶은 경우 사용하는 선택자
- class속성을 정의해서 사용하는 경우는 여러 번 적용해서 사용할 수 있으나 id속성은 하나의 문서에서 한 번만 적용하여 사용할 수 있다.

   (유일한 컨텐츠를 정의할 목적으로 사용, 하나의 문서에서 하나의 id만 정의한다.)
- css에서 id속성은 레이아웃을 설정하는 용도로 많이 사용

첫 번째, 정의
id속성으로 정의
< div id = "id명" > 내용 < /div >
두 번째, 선택자
#id명 { 속성1 : 속성값; 속성2 : 속성값2 ...}

 

4. 스타일시트의 우선순위

!important              h1{ color: pink !important; }

인라인스타일        < h1 style = "color :  olive;" > 내용 < /h1 >

id스타일                #test3{ color: gray; }

클래스스타일        .test2{ color: yellow; }

태그스타일            p{ color: maroon; }

 

 

4) 텍스트관련기본속성

1. opacity : 투명도

  -> { opcity : 0.2; }

- border-collapse : collapse

  -> border의 선을 하나로 만들어줌

2. text-shadow

  -> 그림자 효과주기

3. pseudo선택자

  -> 실체가 없어도 효과를 주고 싶은 상황이나 선택자로 표현해 놓은 것을 의미
  -> <a>태그나 텍스트와 관련된 작업을 할 때 주로 사용
  -> id나 class, 태그로 선택자를 정의하고 사용하는 것이 아니라 미리 정의되어 있는 상태나 상황을 표현

4. transition

  -> css프로퍼티의 값들이 변화될 때 변화하는 시간을 조절할 수 있는 방법

      태그 { transition-property : width, background-color;
      transition - duration : 2s, 2s;     }             ->뒤에는 바뀌는데 걸리는 시간s

5. border-radius

  -> 퍼센티지만큼 둥글어짐

  -> 예를 들어 50%라면 네모나 사진에서 원으로 변함

 

 

5) 하이퍼링크

<style type="text/css">

<a href = " 연결할 링크주소 "> 내용 </a>

</style>

 

1. a : link {  color: black; text-decoration: none; }       

  -> 방문 전 나타나는 색

2. a : visited { color: yellow; }                                     

  -> 방문 후 바뀐 색

3. a : hover { color: red; text-decoration: underline; }

  ->  마우스 포인터를 올려 놓는 상황(a태그가 아니라도 사용 가능)

  -> a태그의 다른 pseudo태그와 사용하는 경우 반드시 a:link, a:visited 다음에 위치해야 한다.

4. a : active { color: olive; }

  -> 마우스 클릭하는 시점

 

 

6) 테이블

<table>  테이블  </table>

- tr : 한 행, th : 제목 행, td : 한 칸

- tr:hover { background-color: skyblue; }      => 마우스 올려놨을 때 색(스카이블루)이 바뀜

- tr th { 내용 } = tr > th { 내용 }         => 제목 행만 바꿈

- text - align : left, right, center...      => 글자의 정렬, 왼쪽, 오른쪽, 가운데, 양쪽정렬 등

 

 

7) 포지셔닝

ㅜㅜ이건 좀 어려움

- 위치를 결정하는 것

1. position : static

  -> 포지션값을 주지 않았을 때 원래 기본 흐름대로 출력
      위 -> 아래 
      왼 -> 오
       좌표 프로퍼티를 사용할 수 없다.
       상위 엘리먼트를 기준으로 움직임 

2. position : absolute (절대위치 잡기)

  -> 원래 있던 위치에서 좌표 프로퍼티에 지정한 값의 위치로 이동함

  -> 부모의 위치를 기준으로 이동,도큐먼트 기준으로 윈도우의 해상도와 상관없이 무조건 이동

  -> 기준위치(top:0, left:0)에서 윈도우 기준으로 이동

3. position : relative

  -> 컨텐츠가 정의된 원래 위치(시작점)를 기준으로 상대적으로 움직임
      자기가 원래 있던 위치에서 움직임

4. position : fixed

  -> absolute처럼 기준위치에서 좌표 프로퍼티에 지정한 값의 위치로 이동
      상위엘리먼트의 영향을 받지 않고 이동
      스크롤 이동해도 고정돼있음

 

 

8) 플로팅

- 문서의 흐름을 제어

- float : left, right, none, inherit

 * clear : left, right, both

   플로팅이 웹 문서에 부분적으로 적용이 된 경우에는 다른 엘리먼트 영향을 미칠 수 있으므로 플로팅을 해제

   (남는 공간 margin 없이 딱 붙어있음)

float, margin 이용

 

 

9) 박스모델

- 웹 문서를 구성하는 구성요소들은 박스의 형태를 구성하고 원하는 컨텐츠를 박스의 형태로 관리할 수 있다. 이를 박스모델이라고 함

- 박스모델에서 컨텐츠, 패딩, 선, 마진, 테두리의 개념과 이를 제어할 수 있는 속성 , 박스의 크기를 정의하는 속성을 알고 있어야 한다.

1. <div></div> 로 묶고 효과 적용하기!!!

2. z-index : n   

  -> 그려지는 순서 (1번이면 제일 밑에 깔림)

 

 

10) 레이아웃

- width, float, margin 등을 이용하여 포지션잡기

 

height의 크기를 넣으면 안 됨....