2022-08-01 CSS_2 (Property, Selector)

2022. 8. 1. 23:54ㆍFE/CSS

CSS 속성을 스스로 알아내는 방법 - 생활코딩

강의 소스코드 변경사항

opentutorials.org

이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다.

1. Property

프로퍼티란 CSS에서 적용할 효과의 종류를 뜻하는 용어다.

모든 프로퍼티를 외워서 사용하기는 어렵고 비효율적이니깐 검색해서 사용하는 법을 배워야 한다.

검색창에 “css ??? property”라고 입력하면 대부분 적절한 프로퍼티를 추천해 줄 것이다.

가. 예시 : 글자 크기

구글에 “css text size property” 검색하면 해당 사이트를 추천받을 것이다.

CSS font-size property

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

여기를 보면

기본적인 예시와 구체적으로 사용 가능한 value를 소개해준다.

(24.03.10 추가)

나. 주요 Property 정리

1) font 속성

font property	설명
font-family	폰트 종류를 지정합니다.
font-size	폰트 크기를 지정합니다.
font-weight	폰트의 두께를 지정합니다.
font-style	폰트 스타일(이탤릭 등)을 지정합니다.
font-variant	소문자를 작은 대문자(small-caps)로 변형.
font	위의 속성들을 한 번에 지정합니다.

2) text 속성

text property	설명
text-align	텍스트의 정렬 방식을 지정합니다.
text-decoration	텍스트에 줄을 그어주는 속성입니다.
text-indent	첫 라인의 들여쓰기를 지정합니다.
text-overflow	넘치는 텍스트의 처리 방식을 지정합니다.
text-transform	텍스트의 대소문자 변환을 지정합니다.
text-shadow	텍스트에 그림자 효과를 추가합니다.
color	텍스트의 색상을 지정합니다.
white-space	공백 문자의 처리 방식을 지정합니다.
vertical-align	세로 정렬을 지정합니다.
letter-spacing	글자 간의 간격을 지정합니다.
word-spacing	단어 간의 간격을 지정합니다.
line-height	행 간의 간격을 지정합니다.

3) UI 속성

ui property	설명
cursor	마우스 커서의 모양을 지정합니다.
display	요소의 표시 유형 (인라인, 블록, 플렉스 등)을 지정합니다.
background-color	요소의 배경색을 지정합니다.
background-image	요소의 배경 이미지를 지정합니다.
background-attachment	배경 이미지의 스크롤 여부 (고정 또는 스크롤)를 지정합니다.
background-repeat	배경 이미지의 반복 여부를 지정합니다.
background-position	배경 이미지의 위치를 지정합니다.
background	위의 배경 속성들을 한 번에 지정합니다.

4) 테이블 속성

table property	설명
table-layout	테이블의 레이아웃 방식을 지정합니다.
border-collapse	테이블의 테두리선을 하나로 합치거나 분리합니다.
border-spacing	테이블 셀 사이의 간격을 지정합니다.
caption-side	테이블 캡션의 위치를 지정합니다.
empty-cells	빈 셀의 테두리 표시 여부를 지정합니다.

5) 테두리 속성

border property	설명
border-width	테두리의 두께를 지정합니다.
border-style	테두리의 스타일(실선, 점선 등)을 지정합니다.
border-color	테두리의 색상을 지정합니다.
border-radius	테두리의 모서리를 둥글게 만듭니다.
border	테두리 관련 속성을 한번에 지정합니다.

2. Selector

선택자(Selector)란 어디에 효과를 적용할 것인지 선택하는 것이다.

가. 예시 1

모든 링크의 글자를 검은색으로 변경
모든 링크의 밑줄을 제거

...
<style>
    a{
        color: black;
        text-decoration: none;
    }
    ...
</style>
...

모든 링크는 기본적으로 검은색이지만, 사용자가 홍차와 우롱차를 방문했다는 의미로 홍차, 우롱차를 회색으로 변경

<ul>
    <li><a href="1.html" style="color: gray">홍차</a></li>
    <li><a href="2.html" style="color: gray">우롱차</a></li>
    <li><a href="3.html" >녹차</a></li>
</ul>

하지만 이렇게 되면 코드의 중복이 발생한다.

중복의 제거하기 위해서 class라는 html 속성을 지정하면 된다.

...
<style>
    a{
        color: black;
        text-decoration: none;
    }

    .saw{
        color: gray;
    }
</style>

<h1><a href="index.html" >차</a></h1>
    <ul>
        <li><a href="1.html" class="saw">홍차</a></li>
        <li><a href="2.html" class="saw">우롱차</a></li>
        <li><a href="3.html" >녹차</a></li>
    </ul>

중복을 최소화해서 동일한 효과를 얻을 수 있다.

여기서 주의할 점은 .saw에서 .이 빠지면 의미가 달라져 문제가 생긴다.

.이 빠지면 이 웹 페이지에 “saw”라는 이름의 ‘태그’를 선택한다는 의미로 해석된다.

우리는 이 웹 페이지에 class 값이 “saw”인 태그를 선택하기 위해서 반드시 .을 붙여 사용한다.

현재 머물고 있는 우롱차 페이지의 링크를 빨간색으로 표시한다.

...
<style>
    ...
    .saw{
        color: gray;
    }
    .active{
        color: red;
    }
</style>

<h1><a href="index.html" >차</a></h1>
    <ul>
        <li><a href="1.html" class="saw">홍차</a></li>
        <li><a href="2.html" class="saw active">우롱차</a></li>
        <li><a href="3.html" >녹차</a></li>
    </ul>

<li><a href="2.html" class="saw active">우롱차</a></li>와 같이 class 속성의 값으로 (띄어쓰기로 구분되는) 복수의 속성값을 사용할 수 있다.

여러 개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다.

(비슷한 효과를 동시에 사용하는 것은 추천하지 않는다. 복잡해진다.)

나. 서열

이들 간에도 서열이 있다.

실제로 위의 코드를 실행하면 아래와 같이 보인다.

반대로 아래와 같이 코드를 수정하면 다른 결과가 나타난다.

    <style>
     a{
        color: black;
        text-decoration: none;
      }
      .active{
        color: red;
      }
      .saw{
        color: gray;
      }
    </style>

그렇다 head의 style 태그에 나중에 위치할수록 서열이 높아져 최종적으로 반영될 가능성이 커진다.

이렇게 코드를 작성하면 style 태그의 변화가 결과물에 큰 영향을 준다.

그렇기에 선택자 간의 서열을 명시적으로 나눌 수 있는 방법을 사용하자.

        ...
        <style>
      a{
        color: black;
        text-decoration: none;
      }
      #active{
        color: red;
      }
      .saw{
        color: gray;
      }
    </style>
  </head>

  <body>
    <h1><a href="index.html" >차</a></h1>
    <ul>
      <li><a href="1.html" class="saw">홍차</a></li>
      <li><a href="2.html" class="saw" id="active">우롱차</a></li>
      <li><a href="3.html" >녹차</a></li>
    </ul>
    ...

#active{
    color: red;
}

...

    <li><a href="2.html" class="saw" id="active">우롱차</a></li>

우리가 class 값이 “saw”인 태그를 선택하기 위해서 반드시 .을 붙인 것처럼 id 값이 “active”인 태그를 선택하기 위해서 #을 붙인다.

서열과 적용 범위가 반비례하도록 설계되었다.

최소한의 코드로 최대의 효과를 얻기 위해서다.

그런 의미로 id 값은 엄청 높은 서열을 가지므로 최소한의 태그(한 번만 사용하도록 권고)에만 사용되도록 하자.

(24.03.10 추가)

p b {font-size : 300% !important;} // 우선
p b {font-size : 200%;}

!important를 작성하면 우선적으로 스타일. (사용을 지양)
inline 즉 html tag의 style 속성으로 정의한 스타일.
id > class > tag 순서로 우선 순위가 높음.
나중에 실행되면 우선 순위가 높음.

지금까지 서열을 설명을 정리해 보자면…

!important > inline > id > class > 가장 아래에 위치한 태그 > … > 가장 상단에 위치한 태그

다. 자세한 CSS Selector의 문법

CSS Selectors Reference

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

그 외에도 많은데 필요할 때마다 찾아서 쓰자.

출처 : https://www.w3schools.com/cssref/css_selectors.asp

(24.03.10 추가)

3. Selector 보충

보다 다양한 선택자들에 대한 정리.

가. type Selector

<style>
    div{
        color:red;
    }
</style>
...
<div>div3</div>

나. Class Selector

<style>
    .ca{
        color:red;
    }
</style>
...
<div class="ca">div3</div>

다. ID Selector

<style>
    .ca{
        color:red;
    }
    #sa{
        color: aqua;
    }
</style>
...
<div id="sa">div4</div>

라. 가상 클래스 선택자

가상 클래스 선택자	설명
:link	사용자가 방문하지 않은 링크에 스타일을 적용합니다.
:visited	사용자가 방문한 링크에 스타일을 적용합니다.
:hover	요소에 마우스를 올렸을 때 스타일을 적용합니다.
:active	요소를 클릭하고 있을 때 스타일을 적용합니다.
:focus	요소가 포커스를 받았을 때 스타일을 적용합니다.
:first-child	첫 번째 자식 요소에 스타일을 적용합니다.
:last-child	마지막 자식 요소에 스타일을 적용합니다.
:nth-child(n)	n번째 자식 요소에 스타일을 적용합니다.
:enabled	활성화된 요소에 스타일을 적용합니다.
:disabled	비활성화된 요소에 스타일을 적용합니다.
:checked	선택된 요소에 스타일을 적용합니다.

마. 가상 엘리먼트 선택자

가상 엘리먼트 선택자	설명
::before	요소의 내용 앞에 콘텐츠를 삽입합니다.
::after	요소의 내용 뒤에 콘텐츠를 삽입합니다.
::first-letter	요소의 첫 번째 글자에 스타일을 적용합니다.
::first-line	요소의 첫 번째 줄에 스타일을 적용합니다.
::selection	사용자가 선택한 텍스트에 스타일을 적용합니다. (ex. 드래그)

바. 속성 선택자

속성 선택자	설명
[attribute]	해당 속성을 가진 요소에 스타일을 적용
[attribute=value]	해당 속성의 값이 정확히 "value"인 요소에 스타일을 적용
[attribute~=value]	해당 속성의 값이 "value"(단어)를 포함하는 요소에 스타일을 적용
[attribute*=value]	해당 속성의 값이 "value"(패턴)를 포함하는 요소에 스타일을 적용
[attribute^=value]	해당 속성의 값이 "value"로 시작하는 요소에 스타일을 적용
[attribute\|=value]	해당 속성의 값이 정확히 “value”이거나, “value-”로 시작하는 요소에 스타일 적용
[attribute$=value]	해당 속성의 값이 "value"로 끝나는 요소에 스타일을 적용

'FE > CSS' 카테고리의 다른 글

[CSS] Positioning, Flexbox (0)	2024.03.10
2022-08-10 CSS_5 (반응형 웹, 캐싱) (0)	2022.08.10
2022-08-03 CSS_4 (Grid) (0)	2022.08.04
2022-08-02 CSS_3 (Box model) (0)	2022.08.02
2022-07-30 CSS_1 (소개) (0)	2022.07.30

개발은 즐거워?