MVC : CSS 개념

김다린·2024년 4월 5일

MVC

목록 보기
2/5
post-thumbnail

1. CSS 문법

정의 : HTML 문서 내에서 어떤 요소에 css의 스타일을 적용시킬 것인지 결정하기 위한 것

CSS 문법 : css파일은 선택자(Selector)와 { }로 둘러싸인 속성:속성값들로 이루어져 있다.

Untitled

주석 : / text /

2. CSS 사용 예

다음은 HTML 문서에서

요소로 정의된 부분의 글자색을 black으로 설정한 예이다

p {color: black}

만일 값이 공백을 포함한 여러 단어일 경우 다음과 같이 quote(")로 묶어준다.

p {font-family: "sans serif"}

하나의 선택자에 하나 이상의 속성을 정의하고 싶을 경우에는 ";"(semicolon)으로 분리해준다.
p {text-align:center;color:red}

3. CSS를 사용하는 방법

  1. 외부 스타일 시트(External Style Sheet)

    외부 스타일 시트는 여러 웹 페이지에 스타일을 적용시킬때 이상적이다. 외부 스타일 시트를 사용하면 하나의 CSS파일 만 수정하여 어려 웹 페이지(HTML문서)의 스타일을 변경시킬 수 있다. 그렇게 하기 위해서 각각 웹 페이지에는 태그를 사용하여 외부 스타일 시트 파일을 지정하는문장에 태그에 포함되어 있어야 한다.

    <head>
<title>문서의제목</title>
<link rel="stylesheet" type="text/css"
href="default.css"/>
</head>

  2. 내부 스타일 시트(Internal Style Sheet)

    내부 스타일 시트는 하나의 문서에서만 사용하는 스타일을 정의할 때 사용한다. 내부 스타일은 태그 안에 

 <head>
 <title>문서의제목</title>
 <style type="text/css">
 hr {
 color: sienna
 }
 p {
 margin-left: 20px
 }
 body {
 background-image: url("images/back.gif")
 }
 </style>
 </head>

  1. 인라인스타일(Inline Styles)

    : 인라인 스타일을 사용하면 내용과 표현이 섞이기 때문에 스타일을 사용하는 많은 장점을 잃을 수 있다. 잘 사용하지 않는다.

    !important 속성은 2중 선언된 스타일 시트에 대하여 선언순서와 상관 없이 우선순위가 적용되
    도록 한다.

    width:11px !important 
/*남발하지 않기*/
  • 스타일 우선순위 : 만약 같은 선택자의 스타일이 같은 속성에 값은 다르게 정의되었을 경우에는 더 구체적인 스타일을 따르게 된다. 또한 스타일 속성이 다르게 정의되었을 경우에는 더 구체적인 스타일로 스타일의 속성이 정의된다.
    • 예시
      예를 들어 외부 스타일 시트에 h3 선택자에 다음 3가지 속성이 지정되었고,
        ```html
  h3{ 외부스타일 시트
   color: red;
   text-align: left;
   font-size: 8pt;
   }
  
  h3{ 내부스타일 시트
   text-align: right; 
  font-size: 20pt;
   }
  ```
      내부 스타일이 정의된 파일에서 태그를 사용하였을 경우 다음처럼 color 속성은 외부 스타일의 정의를 따르게 된다. color 속성은 외부 스타일 시트로부터 상속받고, text-alignment와 font-size 속성은 내부 스타일 시트 정의를 따르게 된다
        - color: red;
  - text-align: right;
  - font-size: 20pt

4. 선택자의 종류

1. 전역 선택자

전체에 적용하기 위한 선택자이다, *을 이용함

2. 태그 선택자

태그 선택자는 일반적으로 스타일을 정의하고 싶은 html 태그 이름을 사용한다.

태그가 가지고 있는 기본 스타일이 지정되고, 스타일시트에 의한 스타일이 적용된다.

  • 다중(그룹) 선택자("selector1, selector2, selectorN") 선택자를 , 로 분리하여 선언하면 여러 개 선택자에 하나의 스타일을 적용시킬 수 있다.
  • 자식 선택자(”parent > child”) 선택자와 선택자 사이에 >를 입력하며 반드시 부모자식간의 관계에만 스타일이 적용되도록 한다. DOM을 두단계 이상 건너뛴 관계에서는 자식선택자가 작동하지 않는다.
<div><span><p> → 스타일 적용 x

<div><p>처럼 div태그 바로 아래 p태그가 있어야 스타일이 적용됨.

p.right →p중에서 right인것
p .right →p의 자식들 중에서 right인것

3. 내포 선택자(”ancestor descendant”)

요소가 내포 관계가 있을 때 적용시키기 위한 선택자.

선택자와 선택자 사이를 공백으로 띄우고 나열한다.

  • 예시
    다음은 p 태그 안에 strong 태그가 올 경우 파란색으로 지정하는 예이다. p태그 밖에 있 는 strong에는 스타일이 적용되지 않는다.
      css
  p strong{ color : red; }

4. 인접 선택자(”prev + next”)

선택자와 선택자 사이에 +를 표시한다.

앞의 선택자와 가장 가까이에 있는 뒤의 선택자에 스타일을 적용하는 선택자이다.

5. 형제 선택자(”prev ~siblings”)

선택자와 선택자 사이에 ~를 표시한다.

prev 요소 뒤에 나오는 부모가 같은 형제 요소를 모두 찾는다.

6. 클래스(class) 선택자 (”.class”)

클래스 선택자는 같은 HTML요소에 서로 다른 스타일을 정의할 때 사용한다.

클래스 선택자는 선택자 이름 앞에 “.”을 이용하여 선언한다.

HTML 문서에서 class속성의 값과 일치하는 요소를 선택한다.

  • 예시 1
        p.right {text-align: right}
        p.center {text-align: center}

HTML 문서에서 클래스 선택자를 사용하는 방법은 다음과 같다

        <p class="right"> 이 문단은 오른쪽 정렬된다. </p>
        <p class="center"> 이 문단은 가운데 정렬된다. </p>
  • 예시 2

클래스 선택자는 특정 태그에만 적용시키지 않아도 된다. 다음과 같이 클래스 선택자 앞에 태그이름을 빼고 선언하면 원하는 어떤 태그에서도 클래스 선택자를 사용할 수 있다.

        .center {text-align: center}
    위의 클래스 선택자는 다음 예에서 보는 바와 같이 <h1>태그에서도 사용할 수 있으면 <p> 태그에서도 사용할 수 있다. 
    
        <h1 class=”center”>
        
        <p class=”center”> → 두 구문 모두 가운데 정렬됨

7. 아이디(id) 선택자

id 선택자는 #으로 정의한다.
HTML 문서에서 id 속성의 값과 일치하는 요소를 선택한다.
HTML 문서 내에서 id속성은 유일한 값이어야 한다. 여러 요소에 공통 스타일을 지정해야 한다면 클래스 속성을 사용해야 한다.

  • 예시 1

id 속성의 값이 blue를 갖는 모든 HTML의 요소의 색을 파란색으로 한다. 

    #blue {color:blue}

8. 속성 선택자 [name=”value”]

가끔은 어떤 특정한 속성을 갖는 요소에만 스타일을 적용시킬 경우가 있다.

[ 와 ] 사이에 속성의 이름과 값을 지정한다.

input[type=”text” {background-color:blud}

  • 속성의 값이 정확히 일치하지 않을 경우에 ~,|,^,$,* 를 사용할 수 있다.

태그[속성~="값"]– 속성값 중 공백으로 분리된 단어가 포함되어 있는지 체크한다.
태그[속성|="값"]– 속성값 중 -로 연결된 단어가 포함되어 있는지 체크한다.
태그[속성^="값"]– 속성값 중 시작부분의 문자를 체크한다.
태그[속성$="값"]– 속성값 중 끝부분의 문자를 체크한다.
태그[속성*="값"]– 속성값 전체에서 어느 하나라도 매치되는 부분이 있는지 체크한다.

9. 의사 선택자

특별한 선택자에 스타일을 지정할 수 있는 선택자이다.

: 으로 시작하며 요소의 상태에 따라 다르게 적용되는 선택자이다.

  • 링크 관련 의사 선택자

:link : 방문하지 않는 사이트에 링크가 걸렸을 때의 스타일을 적용한다.

:visited : 방문했던 사이트에 링크가 걸렸을 때의 스타일을 적용한다.

:hover : 마우스가 요소 위에 위치할 때 스타일을 적용한다. a:hover 선택자는 뒤에 선언되어야 한다.

:active : 링크를 클릭하는 순간의 스타일을 적용한다. a:active 선택자는 a:hover 선택자 뒤에 선언되어야 한다.

  • 순서관련 의사선택자

:nth-of-type

특정 타입의 n번째 요소를 찾는다.

p:nth-of-type(2n+1) {color:red;}

테이블의 홀수번째 행을 선택할 때는
tr:nth-of-type(odd)

profile
김다린
한걸음씩 뚜벅뚜벅
이전 포스트

MVC : HTML 기초

다음 포스트

SpringFramework

0개의 댓글