CSS#1#2024-12-17

Hello

3)외부 스타일(external style)

-html 파일 외부에 .css 형식의 파일작성해서 스타일 설정하는 방법. 필요한 html에서 참조해서 사용(<link rel=”stylesheet” href=”.css”>)

-같은 .css 파일을 사용하는 여러 html 페이지는 맨 처음 요청한 페이지에서 다운로드 받아서 웹 브라우저 캐시 메모리에 저장된 .css 파일을 재사용해서 참조한다.

예>

// test.css

선택자{

css속성명(property): css속성값(value) ;

}

// html

4)우선순위

인라인 스타일 > 내부 스타일 > 외부스타일

3.CSS 선수 내용

1)캐스케이딩 (Cascading)

html

|

head body

     |

   div

     |

    p

개념: DOM 트리의 상위에서 정의한 스타일이 하위 요소로 전달되는 개념이다. 하나의 요소에 여러 스타일이 지정될 수 있다. 이러한 규칙은 충돌이 발생될 수 있다. 하위에서 재정의도 가능.

2)명시도(Specificity)

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

개념: 선택자(selector)마다 우선순위가 있음.

같은 명시도를 가지면 나중에 정의한 선택자가 적용됨.

명시도만 고려하면 나중에 설정했다고 해서 덮어쓰는 것이 아니다.

우선순위☆

인라인 > id > class, 속성명(예> href)> 태그

!important

⇒권장안함

⇒기본적인 명시도의 가중치값을 무시하고 가장 최우선 순위를 갖는다.

예>

a{
color: blueviolet !important;
}

선택자를 결합해서 구체적으로 지정할 수록 명시도가 올라간다. 이유는 지정된 선택자를 모두 사용하기 때문이다.

4.CSS 선택자 (selector)

1)개념

html

|

head body

        |            |

    div           div

       |              |

      p           div

                           |

                        span

DOM 트리에서 특정 태그를 선택하는 방법.

2)문법

가.전체 선택자

-* 표현

-DOM 트리에 있는 모든 태그가 선택됨.

예>

나.태그 선택자

-태그명으로 표현

만약에 여러개 표현할 때는 ,(쉼표) 지정하고 나열.

-명시도(0,0,1)

예>

다.id 선택자

-#id 표현

-유일한값 지정.

-명시도(1,0,0)

예>

hello

라.class 선택자☆

-.class값 표현

-중복값 가능

-한번에 여러값을 지정 가능 예> class=”값 값1 값2”

예>

hello1

hello2

hello1

hello1

마. 계층구조1- 자식

  - 부모태그  >  자식태그
     예>
    <style>
        .xxx > p{
          color:red;
    }
    </style>

마. 계층구조2- 자손 (공백)

  - 부모태그    자손태그
  - 자식포함

     예>
    <style>
        .xxx  p{
          color:red;
    }
    </style>

마.계층구조3-형제(sibling)

-선택자 + 형제 태그

-인접한 바로 뒤 형제만 참조(바로 뒤에 없으면 참조 불가)

예>

마.계층구조4-형제들(siblings)

-선택자 ~ 형제 태그

-인접한 바로 뒤의 모든 형제 참조

예>

바.속성으로 찾기

a.속성명으로 찾기

-[속성명] 표현, 태그[속성명] <= and 조거

예> [href]{

}

b.속성값으로 찾기(속성값은 정확하게 일치해야 됨)

-[속성명=”속성값”] 표현, 태그[속성명=”속성값”] <= and 조거

예> [class=”xxx”]{

}

c.특정 속성값으로 시작하는 요소 찾기

-[속성명^=”속성값”] 표현, 태그[속성명^=”속성값”] <= and 조거

예> a[href^=”https”]{

}

d.특정 속성값으로 끝나는 요소 찾기

-[속성명$=”속성값”] 표현, 태그[속성명$=”속성값”] <= and 조거

예> a[href$=”com”]{

}

e.특정값을 포함하는 요소 찾기

-[속성명*=”속성값”] 표현, 태그[속성명*=”속성값”] <= and 조거

예> a[href*=”www”]{

}

5.의사코드(pseudo code)

-html의 시멘티 태그처럼 이름안에 기능이 내포되어 있는 선택자 의미.

1)의사 클래스(pseudo class)

-:클래스명

예> :first-child

:last-child

:only-child

:checked

…

가.a 태그의 link 관련 의사 클래스(순서 중요)

방문전(기본:blue): a:link {color:red;}

방문후(기본:purple): a:visited {color:red;}

마우스오버: a:hover {color:yellow;}

누르고 있을때(기본:red): a:actvie{color:blue;}

나.자식 선택하는 의사 클래스(지정된 선택자의 부모기준☆)

a.선택자: first-child

예> p:first-child () <= p 태그를 찾고 찾은 p태그의 첫 번째 자식을 참조(X) p태그의 부모를 찾고 그 부모의 첫번째 자식인 p태그 참조(O)

b.선택자: last-child

예> p:last-child () <= p 태그를 찾고 찾은 p태그의 마지막 자식을 참조(X) p태그의 부모를 찾고 그 부모의 마지막 자식인 p태그 참조(O)

c.선택자: only-child

예> p:only-child () <= p태그의 부모를 찾고 그 부모의 유일한 자식인 p태그 참조(O)

d.n번째 자식: nth-child()

선택자: nth-child(n) <= n 번째 자식 참조, 1부터 시작

선택자: nth-child(2n) <= n에 1부터 값을 설정해서 2,4,6, 짝수번째

선택자:nth-child(even)

선택자: nth-child(2n+1) <= 홀수번째

선택자:nth-child(odd)

다. 사용자 입력 태그에서 사용하는 의사 클래스

  a.   :focus  <== 포커스를 받았을 때

예> input:focus{ } // blur 는 focus를 잃어버렸을 때

  b.  :checked <== checkbox 및 select 태그에서 값을 선택했을 때

    예> input:checked{ }

  c.  :enabled  <== 활성화
  :disabled <== 비활성화

예>input:enabled{ }
      input:disabled{ }

2)의사 요소 ( pseudo elements )

• ::요소
• 의사 클래스는 태그 전체(whole)가 스타일이 적용되고
  의사 요소는 부분(part)적으로 스타일이 적용됨.

예> ::first-line
::before
::after

가. ::first-line

• 문단의 첫줄

  예> p::first-line{}

    <p>
       AAA1 <br>
       AAA2 <br>
       AAA3 <br>

  나. ::first-letter

• 텍스트의 첫글자

  예> p::first-letter{}

  다. 특정요소에 컨텐츠(문자열,image등) 삽입

  ::after{
      content: 값|url('이미지경로')

  }

  ::before{
  content: 값|url('이미지경로')
  }

6.BOX 모델

1)개요

CSS(html)에서 모든 요소(tag)는 box로 관리한다

2)구성요소

가.내용(content)

나.패딩(padding, 안쪽여백)

다.보더(border, 테두리)

라.마진(margin바깥쪽 여백)

⇒body 태그에 기본적으로 margin: 8px로 되어 있음.

3)블럭레벨 vs 인라인 레벨

가.블럭레벨

-기본적으로 웹 브라우저의 전체 너비(width)를 차지한다.

따라서 다음 요소는 새로운 라인(new line)에 추가가 된다.(가로 배치)

-크롬 브라우저의 개발자도구(F12)에서 Box Model 그림을 보면 명시적인 width와 height 값이 보인다. 예> 248 X 21

-width와 height 지정하면 적용이 된다.

나.인라인레벨

-기본적으로 자신의 content 크기만큼만 너비(width)를 차지한다.

따라서 다음 요소는 같은 라인에 추가가 된다.(세로 배치)

-크롬 브라우저의 개발자도구(F12)에서 Box Model 그림을 보면 width와 height 값이 auto로 보인다. 예> auto X auto

-width와 height 지정하면 적용이 안된다.☆

4)width와 height

-Box 모델에서의 content(내용)의 너비와 높이를 의미한다. 지정하지 않으면 블럭레벨인 경우에는 웹브라우저의 전체 너비(width)를 차지하고 인라인 레벨인 경우에는 자신의 content 크기만큼만 너비(width)를 차지한다.

-문법:

width: 절대값(px)|상대값(%,rem) <=상대값은 부모 기준, 만약에 부모가 100px이고 자식이 50%라고 하면 자식 너비는 50px 됨

height: 절대값(px)|상대값(%,rem) <=생대값은 부모 기준, 만약에 부모가 100px이고 자식이 50%라고 하면 자식 너비는 50px 됨

1. box-sizing 속성
2. 개념

요소의 너비(width)와 높이(height)를 계산하는 방식이다.

1. 종류

가. content-box

• 기본
• 지정된 width 와 height 값이 아닌
  padding 과 border 값이 추가되어 최종적으로 box의 실제 크기가 정해지는 방식이다.
  따라서 실제 너비와 높이는 더 커지게 된다.

    최종 width = 지정 width + ( 2*padding) + (2*border)
최종 height = 지정 height + ( 2*padding) + (2*border)

나. border-box (****)

  - context-box와 다르게 padding과 border값을 포함하여
    명시적으로 지정된 width와 height값으로 맞춰준다.

최종 width = 지정 width
최종 height = 지정 height

  - 실제로는 다음과 같이 설정하고 사용한다.
*{
       box-sizing: border-box;
}

1. margin ( 바깥쪽 여백 )
2. 기능

• box와 box 사이의 여백(바깥쪽 여백) 제어.
• px 와 % 지정 가능
• 기본적으로 body 태그에 margin:8px 로 설정되어 있음.
  따라서 다음과 같이 요소가 페이지에 바로 배치되도록 수정해서 사용한다.
  *{
  margin:0px
  }

3. 문법

가. 개별적으로 위치 지정

   margin-top: 10px
   margin-right: 10px
   margin-bottom: 10px
   margin-left: 10px

나. 축약 표현

  a. 개별위치 4개 모두 지정

     margin:  top  right  bottom  left

   예> margin: 10px   10px   10px   10px;

 b. 개별위치 3개만 지정

     margin:  top  right|left   bottom

예> margin: 10px   10px   10px;

 c. 개별위치 2개만 지정

     margin:  top|bottom  right|left

예> margin: 10px  10px;

  d. 개별위치 1개만 지정 (**********)

     margin:  top|bottom|right|left

예> margin: 10px;

1. margin의 상쇄

 - 인접한 box의 margin 는 서로 겹쳐질수 있는데
   이때 하나로 합쳐서 margin이 만들어지는 것이 아니고
   큰 크기의 margin으로 적용된다.
   이유는 요소간 거리가 너무 멀어지는 것을 방지한다.

1. 중앙정렬 ( 수평으로 가운데 정렬 )

   margin: auto;

   반드시 블럭 레벨이면서 width 값을 가져야 적용이 된다.

2. padding ( 안쪽 여백 )

   1. 기능
   • content와 border 사이의 여백(안쪽 여백) 제어.
   • px 와 % 지정 가능
   1. 문법

   가. 개별적으로 위치 지정

   padding-top: 10px
   padding-right: 10px
   padding-bottom: 10px
   padding-left: 10px
   

   나. 축약 표현

   a. 개별위치 4개 모두 지정

     padding:  top  right  bottom  left
   
   예> padding: 10px   10px   10px   10px;
   

   b. 개별위치 3개만 지정

     padding:  top  right|left   bottom
   

   예> padding: 10px 10px 10px;

   c. 개별위치 2개만 지정

     padding:  top|bottom  right|left
   

   예> padding: 10px 10px;

   d. 개별위치 1개만 지정 (**)

     padding:  top|bottom|right|left
   

   예> padding: 10px;

3. border ( 테두리 )

4. 기능

• margin과 padding 사이의 테두리 의미.
• 3가지 속성을 이용해서 스타일 지정이 가능하다. 가. width: border 두께
  나. style: border 스타일 ( 실선, 점선 ,... )
  다. color: border 색상
  

5. 문법 - 개별적으로 지정

   가. width

   border-top-width: 5px
   border-right-width: 5px
   border-bottom-width: 5px
   border-left-width: 5px

   나. style

   border-top-style: solid|dotted|dashed;
   

   border-right-style: solid|dotted|dashed;
   border-bottom-style: solid|dotted|dashed;
   border-left-style: solid|dotted|dashed;

   다. color

   border-top-color: red;
   border-right-color: red;
   border-bottom-color: red;
   border-left-color: red;
   

6. 문법2 - 개별적으로 축약 지정

가. width

  border-width: top  right bottom left    // 4개 지정
  border-width: top  right|left  bottom   // 3개 지정
      border-width: top|bottom  right|left    // 2개 지정
  border-width: top|bottom|right|left     // 1개 지정

  나. style

      border-style: top  right bottom left    // 4개 지정
  border-style: top  right|left  bottom   // 3개 지정
  border-style: top|bottom  right|left    // 2개 지정
  border-style: top|bottom|right|left     // 1개 지정

  다. color

      border-color: red;

1. 문법3 - width 와 style 과 color 한꺼번에 축약 표현 (***)

   border: width style color;

 예> border: 5px  solid  yellow;

1. border-radius 속성

 - box의 border(테두리)를 둥글게 설정할 때 사용.
 - 값이 클수로 더 많이 동글해짐.

  예>   border-radius: 30px
       border-radius:  50%;  // 원

1. 요소 배치

2. display 속성

   • 블럭레벨로 배치 / 인라인 레벨로 배치 / 랜더링 방지 / 인라인레벨 + width와 height 적용
   • 문법:
     display: block; // 블럭레벨로 배치
     display: inline; // 인라인 레벨로 배치
     display: none; // 화면 랜더링 방지. 영역유지 안됨
     display: inline-block; // 인라인레벨 + width와 height 적용

3. position 속성

   • display 속성만 이용해서는 블럭레벨(세로배치) 및 인라인레벨(가로배치) 정도만 지정 가능함.
   • position 속성 + top,right,bottom,left 속성을 이용해서 요소의 실제 위치를 바꿀 수 있다.
   • 종류 5가지

   가. position: static

   • 기본

   • 기본적인 배치방법( document flow: 문서 대열 )를 따른다.
     블럭레벨은 세로 배치, 인라인 레벨은 가로 배치, left와 top이 8px 마진값이 적용되어 보여진다.

   • top,right,bottom,left 속성을 지정해도 적용이 안됨.
     역으로 top,right,bottom,left 속성을 적용할려면 static이 아닌 다른 값(relative,absolute,fixed)을
     반드시 지정해야 된다.

   나. position: relative

   • 기준은 기본적인 문서 대열이다.

   • top,right,bottom,left 속성을 지정하면 적용이 됨

   다. position: absolute

   • 기준은 부모 요소

   • top,right,bottom,left 속성을 지정하면 적용이 됨

     • 부모 요소와 같이 사용됨
       예>

       <== 부모에 position 존재여부에 따라서 자식요소의 기준이 달라짐.

       <== position:absolute a. 부모 요소에 position:relative 가 있는 경우 (*************)

       <== position:relative

       <== position:absolute

        ==> 자식 요소 기준은 부모 요소가 된다.
       
       b. 부모 요소에 position이 없는 경우
       

       <== position:static

       <== position:absolute

       ==> 자식 요소 기준은 웹브라우저 화면 ( 뷰포트: viewport)가 된다.
       

   라. position: fixed

   • 기준은 웹브라우저 화면 ( 뷰포트: viewport)이다.

   • top,right,bottom,left 속성을 지정하면 적용이 됨

   • 스크롤 해도 고정됨.

   마. position:sticky

   - 최근에 추가된 기능. 따라서 지원 여부를 확인해야 됨. (  caniuse.com )
   

   • 평시에는 static 으로 동작되고 특정 임계값을 만나면 fixed 로 동작됨.

   예>
   postition:sticky;
   top: 40px // top이 40px이 되면 fixed 됨.

4. z-index 속성

   • position: fixed 또는 abso수ute 같은 경우에는 겹쳐서 보여질 수 있다.
   • 요소 배치하는 방식 3가지

 x 배치: 인라인
 y 배치: 블럭
 z 배치: 깊이

   - 문법:

      z-index: auto|값   // 기본은 auto 이고 0 과 동일
                        // 값이 작을수로 밑에 배치된다.

        양수
         0 (auto)
    음수

1. 배경(background) 관련
2. 배경색

문법:
   background-color: 색상;

1. 배경 이미지

문법:
   background-image: url("경로")

   background-image: url("경로1"), url("경로2")  // 경로1이 가장 위에 보임

특징
   - x축 및 y 축으로 반복적으로 이미지가 출력됨
   - 배경색과 같이 사용가능.

1. 배경 이미지 반복 제어

   문법:
   background-repeat: repeat-x|repeat-y|repeat(기본값)|no-repeat

2. 배경 이미지 크기

 문법:

      background-size:auto(기본값)|px|contain|cover

    예>
      backgroudn-size: 너비값  높이값;
  예> backgroudn-size: 30px  50px;  // width:30px  height:50px

  backgroudn-size: contain

  ==> 처음부터 이미지를 보여주는 컨테이너(div)에 최대한 맞춰서 보여진다.
     화면을 작게하면 이미지도 같이 작아지고 화면을 크게하면 이미지도 같이 커진다. 단 일정 크기만 커진다.
     결국 이미지를 모두 볼 수 있음.

  backgroudn-size: cover

  ==> 이미지의 비율을 관리하기 때문에 처음부터 이미지 전체가 안 나올수 있음.
      화면을 작게하면 일정부분까지만 작아지기 때문에 화면이 잘려 보임.
      화면을 크게하면 비례해서 커지기 때문에 화면이 잘려 보임.

1. 배경 이미지 위치

 문법:

      // 값 하나 지정 ( top/right/bottom/left 모두 적용 )
      background-position: x축|y축(px|%);

  // 값 두개 지정
  background-position: x축(px|%)  y축(px|%);
  background-position: bottom 10px right 20px;;

1. 배경 이미지 scroll 여부

문법:

    background-attachment: scroll(기본)|fixed

13.크기 단위 ( unit )

1)단위 종류

• px ( cm, inch )
• %
• rem ( em )
• vw, vh

2) 적용 css 속성

• width/height : %, vw. vh
• font-size : rem
• margin/padding/border : %, rem

border : px

• position( top/right/bottom/left ) : %

  3) 단위 종류 2가지

  가. 절대 단위
  - px 만 사용하자.

  나. 상대 단위

  a. %

  • 기본적으로 부모 기준

  • position에 따라서 기준이 달라진다.

    position:static : 지정된 top,right,bottom,left 적용안됨.
    position:relative : 지정된 top,right,bottom,left 적용됨.
    기준은 static으로 지정했을 때의 기본 문서대열(document flow)이다.

    	position:fixed   :  지정된 top,right,bottom,left 적용됨.
    	                    기준은 웹 브라우저(뷰포트)이다.
    
     	position:absolute   :  지정된 top,right,bottom,left 적용됨.
    	                       부모에 position:relative로 지정되었으면 기준은 부모요소이고
    			       부모에 position 지정 안되 있으면 기준은 웹 브라우저(뷰포트)이다.
    
     -max-width 속성
    
     	=⇒ %를 사용하면 화면크기가 커지면 이미지가 계속 커질 수 있음. 이때 이미지의 부모 크기를 제한하면 더 이상 커지지 않을 수 있다. 문법→ max-width: 값

  b. vw, vh ( vw: viewport width, vh: viewport height )
  - 기준은 뷰포트 이다.

  예> vw, vh 사용하지 않는 경우

     <div>
  	  <h1> <== position:fixed;  width:50%
  
         vw, vh 사용하는 경우
  
     <div>
  	  <h1> <== width:50vw;

c. rem(em)

-글꼴에서 주로 사용됨.

-1rem(1em) = 16px(16px는 웹 브라우저에서 설정된기본글꼴크기)

가.em

-부모요소의 em값을 상속해서 글꼴크기가 정해짐

예>