[CSS] css를 이용한 텍스트 꾸미기, 사진 정렬, class와 id 선택자

CSS: 디자인에 최적화된, html과는 완전히 다른 새로운 언어

<font color=red>글자</font> 로 글자 색을 변경할 수 있지만,(HTML) 디자인 자체는 정보라고 할 수 없으므로 CSS 문법 사용

<style> 태그는 HTML의 문법이면서, 동시에 <STYLE> 태그의 안쪽에 있는 내용은 css

 

* 주석 코드 만들기

<!-- 내용 --> 두 기호 사이 콘텐츠는 없는 셈

 

 

1. 태그를 이용하는 방법

<style>

    a{            <--- 모든 a 태그(링크)에 대해서. h1 등으로 변경 가능.

        color: red;

    }

</style>

 

- 모든 a 태그(링크)에 대해 밑줄을 없앨 때

<style>

    a{            <--- 모든 a 태그(링크)에 대해서. h1 등으로 변경 가능.

        color: red;

        text-decoration: none;

    }

</style>

 

 

2. 속성을 이용하는 방법

<li><a href="주소" style="color:red">문자</a></li>

 

현재 선택된 링크에만 밑줄을 긋고 싶다면

<li><a href="주소" style="color:red; text-decoration:underline;">문자</a></li>

하나의 선택자에 대해 여러 개의 효과를 지정할 수 있는데 그 경우에는 세미콜론(;) 으로 구분하여야 함.

 

 

 

- font-size 속성을 이용해 글자 크기 변경

h1

    {

        font-size: 45px;

    }

 

- text-align 속성을 이용해 텍스트를 가운데 정렬

h1

    {

        font-size: 45px;

        text-align: center;

    }

 

 

 

 

https://www.w3schools.com/css/css3_images.asp CSS를 이용한 이미지 정렬 및 효과

 

 

 

 

 

- 태그에 class 속성 지정 하여 링크의 글자 색 변경

 

1. 태그에 class 속성 지정

    <ol>

      <li><a href="https://namu.wiki/w/벵갈(고양이)" class="saw" target="_blank" title="나무위키">벵갈</a></li>

      <li><a href="https://namu.wiki/w/아비시니안%20고양이" class="saw" target="_blank" title="무나위키">아비시니안</a></li>

      <li><a href="1.html" class="saw" title="빵우리"><strong>김방울</strong></li>

    </ol>

 

2. saw라는 class 값을 가진 태그의 글자색 변경

  <style>

      h1{color:purple;}

      a{text-decoration:none;}

      saw{color:gray;}

  </style>

 

단순히 saw라고 쓰면 이 웹 페이지에서 'saw'라는 이름의 태그를 선택하는 선택자이기 때문에, class 값이 'saw'인 태그를 가르키는 선택자로 바꿔주어야 한다.

따라서 saw를 .saw로 바꾼다.

 

  <style>

      h1{color:purple;}

      a{text-decoration:none;}

      .saw{color:gray;}

  </style>

 

3. 현재 머물고 있는 페이지의 링크를 빨간색으로 변경

 

  <style>

      h1{color:purple;}

      a{text-decoration:none;}

      .saw{color:gray;}

      .active{color:black}

  </style>

.. 생략

<li><a href="1.html" class="saw active" title="빵우리"><strong>김방울</strong></li>

 

class라고 하는 속성의 값은 여러 개의 값이 올 수 있고, 띄어쓰기로 구분함. 하나의 태그에는 여러 가지 속성이 들어갈 수 있고, 여러 개의 선택자를 통해 하나의 태그를 공동으로 제어함.

하지만 <a> 태그는 두 개의 클래스에 영향을 받고 있기 때문에 좋은 방법은 아님. .active가 .saw보다 나중에 등장하면 영향력이 없어짐. 즉, 태그에 좀 더 가까이 있는 명령(가장 최근에 명령)이 더 큰 영향력을 갖는다.

그러므로 좀 더 우선순위가 높은 것을 사용해야 함. (id 선택자) 즉, 앞의 css코드에서 active를 id 선택자로 옮기면 됨.

 

4. active를 id 선택자로 옮기기

  <ol>

      <li><a href="https://namu.wiki/w/벵갈(고양이)" class="saw" target="_blank" title="나무위키">벵갈</a></li>

      <li><a href="https://namu.wiki/w/아비시니안%20고양이" class="saw" target="_blank" title="무나위키">아비시니안</a></li>

      <li><a href="1.html" class="saw" id="active" title="빵우리"><strong>김방울</strong></li>

    </ol>

 

5. id 값이 "active"인 값을 선택하기

  <style>

      h1{color:purple;}

      a{text-decoration:none;}

      #active{color:black;}

      .saw{color:gray;}

  </style>

.. 생략

 

앞에 #을 붙이면 .saw가 #active보다 뒤에 등장했음에도 페이지를 새로고침할 경우 active 속성 적용.

즉, ID 선택자와 class 선택자가 붙으면 id 선택자의 효과가, class 선택자와 태그 선택자가 붙으면 id 선택자의 효과가 적용

 

 

www.evernote.com/l/AlfC0gCkCR1AM5F9-dSidWXAGKrrxlaqNGk/  Evernote 에서 옮김.

css룰 이용한 텍스트 꾸미기, 사진 정렬, class와 id 선택자