[포스코x코딩온] 웹개발자 풀스택 과정 2주차 회고록 - CSS

1️⃣오늘 배운 것은...

이번주는 css에 대해서 배웠다. 짧은 시간에 많은 내용을 배웠지만 수업시간에 실습을 많이 해보니 잘 이해가 됐다. 

특히 나는 css선택자에 대해 몰랐던 부분이 많았는데 이번 기회에 확실 하게 알게 된 것 같아 기뻤다.😊

지금까지 선택자에 대해 "한번 제대로 배우고 정리해 둬야지" 라고 생각을 계속하고 있었는데 시간을 따로 내면서

정리하기가 꽤나 귀찮았었다.

그래서 써먹을 때마다 인터넷에서 일일이 찾고 또 까먹고 했었는데 정리를 확실히 해야겠다.🔥 

 

2️⃣CSS

1. ">"는 바로 하위 자식 요소만 해당

div>ul>.orange {
        color: orange
    }

 

2. 공백은 하위 모든 자식들 해당

div .orange {
        background-color: red;
    }

 

3. 일치하는 요소만 해당

<li id="id" class="orange apple">사과</li>

#id.orange.apple {
        color: red
    }

 

4. "+"는 다음 형제 요소 하나만 선택할 때

ul+div {
        color: blueviolet
    }

 

5. "~"는 선택자 다음 형제 요소 모두를 선택할 때

.apple~li {
        font-weight: 900;
        font-size: 30px;
    }

 

6. ABC:first-child, ABC:last-child

// 옳은 예시
.fruits span:first-child {
      color: red;
        }
.fruits h3:last-child {
      color: red;
}
        
// 틀린 예시
.fruits div:first-child {
	color: red;
        }

릴리 리더님께서 뒤에서 부터 해석하라고 했다.

예를 들어 위의 내용은 "fruits이라는 클래스의 첫번째 자식 요소가 span이면 선택"이라는 뜻이다.

 

7. ABC:nth-child(n)

특정 요소의 위치를 선택할 때 쓰인다.

.fruits *:nth-child(2) {
            background-color: green;
        }
// fruits 클래스의 하위 요소 중 2번째 자식요소를 선택한다.

.fruits *:nth-child(2n+1) {
            background-color: green;
        }
// fruits 클래스의 하위 요소 중 홀수 번째 자식요소를 선택한다.
        
.fruits *:nth-child(2n) {
            background-color: green;
        }
// fruits 클래스의 하위 요소 중 짝수 번째 자식요소를 선택한다.

// n은 0부터 시작한다.

❗n은 0부터 시작한다.

 

8. ABC:not(XYZ)

.fruits *:not(span) {
	color: red;
}

// 선택자가 span태그가 아닌 fruits 클래스의 모든 하위 요소들을 선택

 

9. 가상 요소 만들기 -> after, before

content는 무조건 써줘야 한다.(빈값이라도 넣어줘야 함)

after는 선택된 요소의 맨 마지막에 before는 맨 처음에 생성된다.

<div class="example">
        바로가기
    </div>

.example::after {
    content: " 😮 ";
}

.example::before {
    content: " 😊 ";
}

결과화면

 

10. 속성값을 변수화 하기

여기서 :root 선택자는 HTML 선택 하는 것과 같은 범위이다.

변수화를 해주려면 앞에 -- 기호를 써줘야 한다. 

사용할 때는 var() 안에 변수화한 값을 넣어주면 된다.

	/* 속성값을 변수화 */
    /* 변수 : 특정값을 저장하는 공간 */
    
    	// 만들 때
        :root {
            --main-color: green;
            --main-bg-color: white;
            --sub-color: yellow;
            --main-font-size: 30px;
        }


	// 적용 할 때
	div [type=text] {
            background-color: var(--main-color)
        }

        *:not([value="1234"]) {
            color: var(--sub-color);
            font-size: var(--main-font-size)
        }

 

11. 인라인 요소와 블록 요소의 차이

인라인 요소는 width, height 값이 변하지 않는다. 반대로 블록 요소는 바꿀 수 있다. 

따라서 인라인 요소의 넓이나 높이를 바꾸고 싶을 때는 display값을 line-block으로 바꿔주면 해결할 수 있다.

 

12. 유용한 폰트 사이트

지금까지는 폰트를 구글 폰트에서만 사용했었는데, 사용할 때마다 한글 폰트가 많이 부족하다고 느꼈었다. 

 

눈누

눈누 폰트 사이트는 여러가지의 한글 폰트가 있었고 사용법도 이전의 구글 폰트와 같았다. 

다양한 한글 폰트를 원했던 나에게는 유용한 사이트가 될 것 같다고 생각했다.👍