이동규

개발 잘하고 싶다

1. 전체 요소 선택자

CSS 의 작성 규칙은 선택자 뒤에 중괄호가 오고, 설정하려는 속성을 감싸는 구조이다.

전체 선택자는 ‘ * ‘ 이며, 이 외에도 페이지의 모든 HTML 요소를 선택하거나 여러개의 요소를 선택할 수 있는 선택자가 있다.

/* 전체 요소 선택자 */
* {
    color: pink;
    background-color: cyan;
}

/* HTML 요소 선택자 */
button {
    font-size: 30px;
}

/* HTML 요소 여러개 선택하는 법 */
h1,
h2 {
    color: magenta;
}

2. 유행하는 칼라 팔레트 모음 링크

  • 링크: https://coolors.co/palettes/trending

3. ID 선택자

HTML 의 ID 속성은 한 부분의 스타일을 바꿔주는데 사용될 수 있다. (물론, label 요소와 연결하는데도 사용됨.)

주의할점은 ID 를 너무 많이 사용하지 않는 것이 좋다. (CSS 우선순위 때문)

/* ID 속성으로 Sign Up 버튼만 스타일하기 */
#signup {
    background-color: #bde0fe;
    color: #a2d2ff;
}

/* # 과 ID 속성 사이에 띄어쓰기가 있어 오류발생 */
/* # signup {
    background-color: #bde0fe;
    color: #a2d2ff;
} */

4. 클래스 선택자

클래스는 ID 와 비슷한 개념으로 마크업에 뭔가를 추가해서 훅을 걸어 CSS 로 연결한다.

클래스는 여러요소에 적용할 수 있다. 클래스가 요소를 묶어주기 때문에 몇개의 그룹을 만들어 비슷한 스타일을 적용할 수 있다.

클래스 선택자를 ID 선택자보다 더 많이 사용한다.

/* 클래스 선택자 */
.tag {
    background-color: #ff006e;
    color: white;
    font-size: 16px;
}

5. 자손 선택자

요소와 그 아래 속한 자손 모두를 띄어쓰기 간격으로 지정할 수 있다.

/* 부모요소(section)와 자손요소(a)를 지정 */
section a {
    background-color: #cdb4db;
    color: #264653;
    font-weight: bold;
}

/* 부모요소(footer)와 자손클래스(.list)를 지정 */
footer .list {
    background-color: #e76f51;
    color: white;
    font-size: 20px;
}

6. 인접 선택자와 직계자손 선택자

ID, 클래스, 자손 선택자보다 자주 쓰이지는 않지만, 알아두도록 하자.

  • ’ + ‘ 인접 선택자: 형제 요소를 찾는데 사용
  • ’ > ‘ 직계자손 선택자: 부모 요소로부터 바로 한 단계 아래인 요소를 찾는데 사용
/* 부모요소(h2)와 형제요소(button)을 지정 */
h2+button {
    background-color: #e5989b;
    color: white;
}

/* 부모요소(section)와 형제요소(h2)를 지정 */
section>h2 {
    background-color: brown;
    color: aquamarine
}

7. 속성 선택자

HTML 요소 안에 있는 속성을 지정하는데 사용한다.

예를 들어, input 요소의 type=”text” 속성을 지정하는 경우를 들 수 있다.

/* 요소(input) 안에 있는 속성(type="password")을 지정 */
input[type="password"] {
    color: red;
}

/* 링크(a) 안에 있는 속성 (href="google.com")을 지정 */
a[href="google.com"] {
    color: #e9ff70;
}

8. 유사 클래스

선택자에 추가하는 키워드로 선택한 요소가 특별한 상태일 때에만 작동한다.

  • 대표적인 유사 클래스 링크: https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes

  • :hover 는 마우스 포인터에 의해 요소를 가리킬 때, 동작
  • :active 는 버튼과 같은 요소가 클릭되어 활성화되었을 때, 동작
/* 클래스(post)의 하위요소(button)를 마우스로 가리켰을 때, 배경색이 변경 */
.post button:hover {
    background-color: #ff006e;
}

/* 클래스(post)의 하위요소(a)를 마우스로 가리켰을 때, 윗줄이 그어짐 */
.post a:hover {
    text-decoration: overline;
}

/* 클래스(post)의 하위요소(button)를 활성화시켰을 때, 배경색이 변경 */
.post button:active {
    background-color: #06d6a0;
}
  • :nth-of-type(변수) 는 요소의 변수번째를 지정할 수 있고, 변수에는 숫자 뿐만아니라 odd 와 even 을 입력하여 홀수, 짝수번째 요소를 지정할 수 있다.
/* nth-of-type 선택자로 동일한 요소(.square)의 변수 번째 요소를 지정   */
.square:nth-of-type(even) {
    background-color: black;
}

.square:nth-of-type(odd) {
    background-color: red;
}

<!doctype html>

<html>

<head>

    <title>Checkerboard</title>
    <link rel="stylesheet" href="5.Checkerboard.css">
    <link rel="stylesheet" href="5.Checkerboard Exercise.css">

</head>

<body>
    <div id="board">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>
</body>

</html>

.square {
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border: 1px solid black;
}

/* THIS CODE WILL MAKE SENSE ONCE WE COVER FLEXBOX!  */
#board {
    display: flex;
    margin: 0 auto;
    width: 500px;
    flex-wrap: wrap;
}

image-20220823205911721

9. 유사 요소

CSS 유사 요소는 선택한 요소의 특정 부분에 스타일을 지정할 수 있도록 해준다.

  • ::first-letter 는 요소의 첫번째 글자를 지정할 수 있음
  • ::first-line 은 요소의 첫번째 줄을 지정할 수 있음
  • ::selection 은 커서로 블록 영역을 지정하면 포함된 속성이 작동 함
/* 요소(h2)의 첫번째 글자(::first-lett)를 지정 */
h2::first-letter {
    font-size: 50px;
}

/* 요소(section[class="post"])의 첫번째 줄(::first_line)을 지정 */
section[class="post"] div::first-line {
    background-color: red;
}

/* 커서로 블록 영역을 지정하면 작동한다. */
*::selection {
    background-color: orange;
}

10. CSS: casecade(폭포) 작동방식

casecade(폭포) 작동방식에 의해 동일한 요소에 위 아래로 두개의 다른 스타일을 적용했을 때, 마지막 스타일이 최종 적용된다.

외부의 스타일시트를 불러올 때도 마찬가지로 마지막 링크의 스타일이 최종 적용된다.

/* casecade에 의해 가장 마지막 스타일(purple)이 적용됨 */
h1,
h2 {
    background-color: red;
}

h1,
h2 {
    background-color: purple;
}

11. CSS: 충돌 시, 우선순위

하나 이상의 스타일이 동일한 요소에 적용되거나 적용될 수 있는 경우에 충돌이 발생하게 되는데, 이렇게 충돌이 발생하는 경우 브라우저에서 규칙을 적용하는 방식을 특이도라고 한다.

충돌이 발생했을 때, 우선순위는 ‘조금더 구체적으로 지정된 스타일’부터 적용된다.

[우선순위 예시]

button {
	작동 안함
}

div button {
	작동 함
}

그리고, 가장 구체적인 지정자는 ID 이며, 어떤 클래스 선택자보다도 우선적으로 작동하게 된다.

ID > CLASS > 요소

/* CSS 스타일이 적용될 html 코드
button을 지정하려고 함

<section class="post_class">
    <section id="post_id">
        <button>+Vote</button>
    <hr>
    </section>
</section> */


/* id 1순위 적용 */
#post_id button {
    background-color: red;
}

/* 클래스 2순위 적용 */
.post_class button {
    background-color: green;
}

/* 요소 3순위 적용 */
section button {
    background-color: blue;
}

12. 팁: Chrome 개발자 탭

CSS 스타일에 다양한 컬러, 속성을 적용할 때, 일일히 코드를 고치며 테스트하기보다는 Chrome 개발자 탭을 활용하면 즉각적인 변화를 테스트해볼 수 있다.

image-20220823211458642

13. CSS 상속: inherit

CSS 상속이란, 구체적인 스타일을 지정하지 않은 하위 요소에 상위 항목 스타일을 적용되는 것을 말한다.

button, input 같은 요소는 상위 항목의 스타일이 상속되지 않는데, 속성 뒤에 ‘inherit’ 을 붙이면 상위 항목 스타일이 적용된다.

body {
    color: blue;
}

section {
    color: red;
}

/* button 과 input은 상위 요소(section, body)에 적용된 스타일을 상속받지 않는 요소이지만, inherit 으로 상위 요소의 스타일을 상속받을 수 있음 */
input,
button {
    color: inherit;
}

댓글남기기

참고