[카테캠 3주차] CSS 개요

기본 문법, 주석

선택자: CSS 를 적용할 대상
속성 : CSS의 종류
값

선언 방식

내장 방식

인라인 방식

css 적용 우선순위중 가장 높은 순위를 가지게 된다.

CSS 유지보수를 하는 경우에 !important 와 더불어 문제가 될 가능성이 높기 때문에 지양하는 것이 좋다.

링크 방식

@import 방식

처음본거같은데.. 반성합니다. 자주 쓰는 방식은 아니라고한다.

직렬으로 연결하는 방식

why 직렬?

main.css 가 HTML 문서에 링크되어있지 않으면 box.css 도 사용되지 않기 때문이다.

CSS 선택자

기본 선택자

1. 전체 선택자

모든 요소를 선택합니다.

2.태그 선택자

3. 클래스 선택자

4. 아이디 선택자

복합 선택자

1. 일치 선택자

아래 예시에서는 태그 선택자와 클래스 선택자가 함께 사용된 것을 볼 수 있다.

복합적으로 사용할때에는 태그 선택자가 클래스, 아이디 선택자보다 앞에 있어야한다.

2. 자식 선택자

3. 하위 선택자

자식 선택자와 하위 선택자 차이가 뭘까?

공부를 하다가 궁금해졌다. 궁금하면 500원 아니고, 더보기 클릭

자식 선택자와 하위 선택자의 차이 : 하위(후손) 선택자는 자식 선택자에 비해 더 넓은 범위를 포함한다.

말로만 설명하는건 이해가 안돼욥..

1) 자식 선택자 예시

아래의 CSS 를 HTML 에 적용하면 어떤 결과가 나타날까?

/*main.css*/
ul > li {
    color: red;
}

<!--main.html -->
<div>
    <ul>
        <li>리스트1</li>
        <li>리스트2</li>
        <ol>
            <li>ul안 ol리스트</li>
        </ol>
    </ul>
</div>

딱 ul 태그의 자식 li 만 CSS 가 적용이 된다.

https://velog.io/@navyjeongs/CSS%EA%B8%B0%EC%B4%88

2) 하위 선택자

이 HTML CSS 하위 선택자에선 어떨까?

/*main.css*/
ul li {
    color: red;
}

<!--main.html -->
<div>
    <ul>
        <li>리스트1</li>
        <li>리스트2</li>
        <ol>
            <li>ul안 ol리스트</li>
        </ol>
    </ul>
</div>

ul 태그의 하위에 있는 모든 li 에 CSS 가 적용이 된다.

따라서 하위 선택자는 말 그대로 하위에 포함되는 모든 요소에 CSS 를 적용하고, 자식 선택자는 자식까지만 적용을 한다.

4. 인접 형제 선택자

인접 형제 선택자는 +로 나타낸다.

다음 예시에서는 .orange 의 다음 형제 li 인 망고가 선택된다.

5. 일반 형제 선택자

형제 선택자는 다음 형제 요소의 모두에 CSS 가 적용된다.

다음 예시에서는 .orange 의 모든 다음 형제 li 인 망고, 사과 가 선택된다.

가상 클래스

hover

마우스 커서가 올라가 있는 동안의 상태가 변화합니다.

active

마우스를 클릭하는 동안에 실행되는 가상 선택자

Focus

Focus 가 될 수 있는 요소는 HTML 대화형 콘텐츠가 있습니다. 해당되는 엘리먼트에는 INPUT, A , BUTTON, LABEL, SELECT, TextArea 가 있습니다. 대화형 콘텐츠 요소가 아니더라도 tabindex 속성을 사용한 요소도 Focus가 될 수 있습니다.

강의를 보면 div 에 tabindex='-1' 을 주어 클릭시에 focus 가 되도록 만들었다. 이는 focus 할 수 없는 요소에 사용하면 해당 요소를 클릭했을 때 focus 가 되는 좋은 트릭인 것 같다.

또한 tabIndex를 잘 사용하면 스크린리더 사용자를 위해 키보드 접근성을 높일 수 있다 로 이전에 공부하고 정리 한 바 있다. 기본적으로는 tabindex='0' 을 주어 요소를 논리적흐름에 맞게 배치함으로써 키보드 접근성을 높일 수 있고, 위에 기록한 가벼운 트릭을 사용하면 focus가 없는 요소에도 클릭시에 focus가 되도록 할 수 있을 것 같다! (매니저님 감사합니다!)

first-child

last-child

nth-child(n)

nth-child(2n)

n은 0부터 시작한다. 2n 은 짝수를 의미한다.

nth-child(2n+1)

위에서 말했듯이 n은 0부터 시작한다. 따라서 2n+1은 홀수를 의미한다.

nth-child(n+2)

n은 0부터 시작한다! (앵무새 아님) 고로 2번째 요소부터 css 적용!

not

오 생소하다...

아래 예제로 설명해보겠습니다. .fruits *:not(span) 은 .fruits 의 하위 태그전부중 span 이 아닌 모두를 의미한다!

가상 요소 선택자

before

before 는 쓸때 마다 생소하다. 이해가 제대로 되지 않았나 보다.

before 를 통해 만들어지는 가상 요소는 인라인이다.

한번 코드로 알아보자

HTML
<body>
    <div class="box">
      <span>우지</span>
    </div>
</body>

CSS
.box span::before {
  content: "Hello";
}

와 개발자도구의 ::before 가 가상요소를 가르키는것 이였구나.. 이제야 알았다 ㅋㅋ 대박

after

after 는 뒤에 인라인으로 삽입되는 요소이다.

그럼 after 에 대한 실습도 해보자.

HTML
<body>
    <div class="box">
      <span>우지</span>
    </div>
</body>

CSS
.box span::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: red;
}

아하 ~ 이제야 이해가 됐다. before 와 after 는 인라인 요소이기 때문에 width 와 height 를 가질 수 없고 이를 가지게 하기 위해서는 display: inline-block 또는 block 을 선언해주어야한다.

속성 선택자

와 처음 배운거 같다.

disabled 라는 속성을 사용한 요소에 CSS 를 적용할 수 있게된다.

이렇게 type 속성을 사용하는 요소를 선택할 수 도 있는데 , 이는 조금 범위가 넓다.

따라서 값을 넣어줄 수가 있는데 다음 예시를 보자.

스타일 상속

아래 예시를 보면 .animal 에만 color 가 적용되어있는데 하위 요소까지 모두 글자의 색상이 변경된 것을 확인할 수 있다.

이를 스타일 상속이라고 말한다.

오.. 이건 못외우겠다.. 글자/문자와 관련된 속성이 상속된다~ 로 정리하자.

강제 상속

HTML 코드는 다음과 같다.

아까 위에서 상속은 대게 글자/문자와 관련된 속성이라고 했다. 하지만 이러한 속성이 아니더라도 강제로 상속을 하게하는 키워드가 존재한다!

바로바로 inherit 이다.

아래 예제를 보면 .child 의 높이를 inherit 로 지정함으로써 부모의 높이가 상속된 것을 확인할 수 있다.

따라서 .child 의 높이는 200px 이다.

이는 높이 뿐만 아니라 배경색도 가능하다.

선택자 우선 순위

어떠한 CSS 속성이 우선적으로 적용될까?

점수가 높은 선언이 우선
점수가 같으면 가장 마지막에 해석된 선언이 우선

오.. 인라인이 가장 순위가 높은 줄 알았는데 아니였다. 현장실습때 css 가 죄다 인라인으로 박혀있어서 !important 쓴 기억이 다시 떠오른다..

!important > 인라인 > ID > Class > 태그 > 전체 > 상속

아래와 같은 점수가 왜 나오는지 알아보자.

.list(10점) + li(1점) + .item(10점) = 21 점
.list(10점) + li(1점) + :hover(10점)(hover 는 가상 클래스) = 21 점
.box(10점) ::before(1점)(before는 가상 요소) = 11 점
#submit(100점) span(1점) = 101 점
header(1점) .menu(10점) li (1점) :nth-child(2)(10점)(nth-child는 가상 클래스) = 22 점
h1 (1점) = 1 점
:not(.box) (not은 가상클래스이지만 예외로 0점) = 10 점

근데 이렇게 쓸 일이 있나? 싶다.. 혹시 몰라 알아두면 나중에 쓸모가 있을지. 우선 알아두자. 아 이거였지~ 기억만 나면 다시와서 공부하면 되니까.

저작자표시

'카카오 테크 캠퍼스 > HTML CSS JS' 카테고리의 다른 글

[카테캠 4주차] CSS 속성 (0)	2023.05.06
[카테캠 3주차] CSS 속성 (0)	2023.04.28
[카테캠 1주차] 웹에서 시작하기 / HTML 개요 / HTML 핵심 정리 (0)	2023.04.14
[카테캠 1주차] VSC 단축키 / 무작정 시작하기 (0)	2023.04.14
[카테캠 1주차] 개요 (0)	2023.04.12