CSS 편 - 2일차

 

2일차

 

 

 

---

06. CSS 속성을 스스로 알아내기

• CSS에서 어떠한 효과를 의미하는 용어가 프로퍼티라는 것을 알았기 때문에 직접 문제를 해결할 수 있다.
• 기존 코드에 제목인 'WEB'의 글자크기를 크게 키우고 가운데로 정렬이 하고 싶다고 가정했을 때 먼저 'WEB' 글자에 CSS를 적용하기 위해서 선택자를 찾는다.
• 현재는 <h1>태그로 적용을 해보자.
• 먼저 검색 엔진에 'css text size property'로 검색하여 CSS 속성을 찾는다.
• 그리고 'css text center property'라고 검색하여 CSS 속성을 찾는다.
• 이렇게 찾은 속성을 기존 코드에 적용한다.

<style>
    a {
        color: black;
        text-decoration: none;
    }
    h1 {
        font-size: 45px;
        text-align: center;
    }
</style>

• 정보기술이 존재하지 않던 시절에는 우리 머릿속에 모든 지식을 갖고 있어야 했으나 이제는 모르는 것을 알아내는 데 1분밖에 걸리지 않기 때문에 알고 있는 것과 다름이 없다.
• 그리고 보통 에디터는 프로퍼티를 추천해준다.
• 이렇게 혼자서 스스로 프로퍼티를 알아내는 방법을 알게 되었다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=WcED6Ia1IY4

 

---

 

 

반응형

 

 

07. CSS 선택자의 기본

• CSS를 지배하는 두 가지 중요한 토대가 있다. 첫 번째는 효과이고 두 번째는 선택자이다.
• 먼저 기존에 있었던 예제에서 CSS 링크에 인라인으로 적용되어 있는 style 속성의 내용을 없앤다.

<h1><a href="index.html">WEB</a></h1>
<ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
</ol>

• 이제 웹 페이지에 다음과 같은 효과를 줄 것이다.
  • 모든 <a>태그를 기본적으로 검은색으로 바꿀 것이다.
  • 사용자가 방문한 적이 있었던 페이지인 'HTML'과 'CSS'는 회색으로 바꿀 것이다.
  • 현재 사용자가 머물고 있는 'CSS'라는 페이지의 링크는 현재 방문하고 있다는 뜻에서 빨간색으로 표시할 것이다.

 

• 1) 먼저 모든 <a>태그를 검은색으로 지정한다

a {
    color: black;
}

 

• 2) 두 번째로 방문한 적이 있었던 페이지를 회색으로 바꾸기 위해서 예전에는 각 <a>태그에 style속성을 인라인으로 추가해주었다. 하지만 이 방법으로는 중복이 발생하게 된다.
• 이 문제를 해결하기 위해서 class라는 HTML 속성을 지정한다. 그리고 속성의 값으로 '보았다'라는 뜻으로 'saw'라고 지정한다.

<h1><a href="index.html">WEB</a></h1>
<ol>
    <li><a href="1.html" class="saw">HTML</a></li>
    <li><a href="2.html" class="saw">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
</ol>

• 여기의 class=""는 HTML의 속성이며, "saw"라고 하는 부분도 HTML이다. 즉, "saw"라는 class 값을 가지고 있는 태그 2개를 만들었다.
• 웹 페이지의 모든 태그 중에서 "saw"라는 class 값을 갖고 있는 모든 태그에 대해 폰트 색상 'gray'로 다음과 같이 지정한다.

.saw {
    color: gray;
}

• saw 앞에 .을 붙이는 순간 이 선택자는 웹 페이지에서 class가 "saw"인 모든 태그를 가리키는 선택자가 된다.
• class라는 것은 학교에서 반을 클래스라고 한다. 즉 클래스란 말에는 "그루핑하다", "하나로 묶는다"란 뜻이 포함되어 있다.

 

• 3) 현재 머물고 있는 페이지의 링크를 빨간색으로 표시하기 위해 active 클래스를 추가하고 active 선택자에 폰트 색상을 빨간색으로 지정하면 된다.

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

...

<li><a href="2.html" class="saw active">CSS</a></li>

• 이를 통해 class라고 하는 속성의 값은 여러 개의 값이 올 수 있고, 띄어쓰기로 구분한다는 것과 하나의 태그에는 여러 가지 속성이 들어갈 수 있고, 여러 개의 선택자를 통해 하나의 태그를 공동으로 제어할 수 있다.
• 하지만 이 방법은 좋은 방법이 아니다. 왜냐하면 <a>태그는 두 개의 클래스에 영향을 받고 있기 때문이다.
• 그렇다면 왜 빨간색이 된 것일까? 이유는 순서 때문이다. CSS 코드 안에서 .active가 .saw보다 나중에 등장했기 때문에 적용이 된 것이다.
• 즉, 태그에 좀 더 가까이 있는 명령이 더 큰 영향력을 갖는다. 말하자면 권력이 같을 때 가장 최근에 명령한 사람의 말을 듣는 것처럼 말이다.
• 그래서 좀 더 우선순위가 높은 것을 사용할 필요가 있고, 그것은 ID 선택자이다.
• 즉, 앞의 CSS 코드에서 active를 ID 선택자로 변경하면 된다.

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

...

<li><a href="2.html" class="saw" id="active">CSS</a></li>

• .saw가 #active보다 뒤에 등장했음에도 페이지를 새로고침할 경우 "CSS"글자의 색이 빨간색이 되는 것을 볼 수 있다.
• 즉, ID 선택자가 class 선택자보다 우선순위가 높고, class 선택자가 태그 선택자보다 우선순위가 높다.

 

• id 선택자의 값인 active인 태그가 이 웹페이지에서는 단 한 번만 등장해야 한다. 여러 번 써도 동작은 하지만 쓰지 말라고 권장하고 있다. 즉, id 값은 단 한 번만 등장해야 하며, id의 뜻과 같이 중복되어서는 안 된다.
• 더 자세하게는 'css selector'로 검색을 해보면 여러 가지 형태의 선택자를 확인할 수 있다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=8-rCMmamtDE

 

 

 

---

해당 글은 [생활코딩! HTML + CSS + 자바스크립트] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.

 

---