국비/Client(HTML&CSS&JavaScrpit)

2023.01.30 3일차 CSS

춘핑이 2023. 1. 30. 16:58

CSS

9. id

특정 element만 css를 부여하고 싶다면 id를 부여하고 선택자
<h1 id="head1">Lorem, ipsum dolor.</h1>

#head1 {
    text-decoration: underline;
}

#head2 {
    background-color: yellow;
}

문제 id 속성이 head3인 요소의 텍스트 정렬을 오른쪽으로

#head3 {
    text-align: right;
}

10. id속성 작성 규칙

1.숫자로 시작하면 안됨
2.빈칸넣을 수 없음
3.특수문자는 - 혹은 _만 사용
4.대소문자 구분함
5.한페이지에 같은 id를 여러번 사용할 수 없음

아래코드는 숫자로 시작하는 id를 가지고 있어서 안됨
<h1 id="3head">Lorem, ipsum dolor.</h1>

id속성에 빈칸 안됨
<h1 id="my head">Lorem, ipsum dolor.</h1>

- 와 _ 사용가능
<h1 id="my_head">Lorem, ipsum dolor.</h1>
<h1 id="my-head">Lorem, ipsum dolor.</h1>

아래 두 요소는 다른 아이디를 가지고 있음
<h1 id="yourhead">Lorem, ipsum dolor.</h1>
<h1 id="yourHead">Similique, blanditiis quisquam.</h1>

중복 아이디 작성금지
<h1 id="hisHead">Lorem, ipsum dolor.</h1>
<h1 id="hisHead">Sequi, rerum quae?</h1>

중복으로 작성해도 브라우저가 알아서 처리해주긴 하지만 브라우저가 처리해줫다고 해서 가능하다고 판단하면 안된다.
결론적으로 중복되지 않게 영문,숫자,-,_ 만 사용하자.

11. id 쉽게작성 emmet

emmet : #이 id 속성임
h1
<h1></h1>

h1#hisHead
<h1 id="hisHead"></h1>

h1#your-head
<h1 id="your-head"></h1>

h1#herHead>loream
<h1 id="herHead">Lorem, ipsum dolor.</h1>

h1#jackHead$*3>lorem3
<h1 id="jackHead1">Lorem, ipsum dolor.</h1>
<h1 id="jackHead2">Ab, enim mollitia./h1>
<h1 id="jackHead3">Recusandae, ut ratione.</h1>

12. class selector

여러 element를 그룹으로 묶고 싶다. 원래 배운대로라면 head1, head2{}이런식으로 작성했다.
<p class="mypara">Lorem ipsum dolor sit </p>
<p class="mypara">Neque quaerat, blanditiis eaque dolore mollitia non porrois</p>
class는 같은 값을 가져도된다. 그루핑하고싶기때문임.

13. class-attribute

1.class 속성은 영문, 숫자, - , _ 조합으로 작성 / id와 유사
2.중복가능 그룹으로 묶기 위한 것이기 때문임
3.하나의 요소는 빈칸으로 구분해서 여러 클래스를 가질 수 있음.
연습문제 note클래스인 요소들의 배경색이 노랑

.note{
    background-color: yellow;
}

여러 클래스 가지기
<h1 class="note delete">Enim, necessitatibus?</h1>
note클래스와 delete클래스에 둘 다 소속되있는 것임.
하나의 class에 여러 element가 들어갈 수 있는데 하나의 element에 여러 class가 소속될 수도 있다.

14.class-emmet

emmet : .이 클래스 속성임

1.h1.note*2
<h1 class="note"></h1>
<h1 class="note"></h1>

2.h1.note*2>lorem3
<h1 class="note">Lorem, ipsum dolor.</h1>
<h1 class="note">Magni, provident impedit?</h1>

3.h1.note.error
<h1 class="note error"></h1>

4.p#para1.error.special id와 조합하기
<p id="para1" class="error special"></p>

emmet이 css selector를 기반으로 작성하는 것이다. 코드를 알면 더 빠르게 작성할 수잇다.

15. selector 조합하기 combination

15.1 선택자를 띄어쓰기 없이 연속 작성

-> 모든 조건을 만족하는 요소 선택

p.note{
    background-color: yellow;
}

element가 p이고 클래스가 note인 것

p.error.note element가 p이고 클래스가 error와 note인것

p.error.note{
    border: 5px solid;
}
.note.error{
    border: 10px dotted black;
}

16. specificity

구체적으로(자세하게) 선택할 수록 우선순위가 높다

h1{
    border: 5px solid;
}

h1.note{
    border: 5px dotted;
}

후자가 우선순위가 높아서 겹친다면 후자가 적용이 된다.
셀렉터에 마우스를 가져다 두면 Selector Specificity: (0, 0, 1)

h1{
    border: 5px solid;
}
Selector Specificity: (0, 0, 1)

h1.note{
    border: 5px dotted;
}
Selector Specificity: (0, 1, 1)

h1.note.error{
    border: 5px double;
}
Selector Specificity: (0, 2, 1)

각 id, class, element이다.
구분하기 쉽게 element selector : 1점 / class selector : 10점 / id selector : 100점으로 보자.
','를 빼고 보면 1점 / 11점 / 21점이라고 생각할 수 있다.
가장 높은 점수를 생각해서 우선순위가 높다고 생각하자. 실제 점수가 아니라 편하게 계산하려고 보는 것이다.

그럼 만약 같은 점수를 가지고 있다면? 밑에있는게 적용이 된다. 순서도 중요하다.

h1.note.error{
    border: 5px inset;
}

h1.note.error{
    border: 5px double;
}

-> border: 5px double 적용

17. child-selector 자식셀렉터

> : 자식선택자

ul > li {
    color:blue;
}

-> ul의 자식들 중 li들을 바꿈

.todo > li {
    background-color: yellow;
}

-> li를 바꾸는데 class가 todo인 것의 자식들을 바꿈

emmet으로 html>이런식으로 만들었는데 자식을 활용해서 만드는거였음.

18. div

div 컨텐츠를 나눌때 사용함. 책상안에 서랍 서랍안에 칸막이 같은 느낌 

<!-- div#head2 -->
<!-- #head2 -->
<div id="head2"></div>

<!-- div.error -->
<!-- .error -->
<div class="error"></div>

너무 자주사용해서 emmit에서는 태그명 생략하면 div로 만들어 준다.

19. descendant selector(space)

자손, 손자, 증손자 등 모두 적용

<div class="container">
    <div class="sub">
        <h1>Lorem.</h1>
    </div>
</div>

.container > h1 {
    border: 5px dotted;
}

자식이 아니라 손자라서 적용 안됨.

.container h1 {
    border: 5px dotted;
}

h1을 선택하는데 부모 조부모 이든 container의 h1을 선택한다.

20. adjacent-sibling-selector

html>head+body 에서 '+'가 이것을 활용한 것이엇다.

h1 + p {
    background-color: yellow;
    color: coral;
}

p요소인데 같은 부모에서 h1이 근처에 있어야함.

20.1 General Sibling Selector (~)

같은 부모를 두고 있는 것의 형제를 다 바꿔줌.

21. attribute selector - 1

<h1 title="hello">Lorem.</h1>
<h1 title="world ">Vel.</h1>
title 속성이 있는 요소들에 CSS부여

[title] {
    text-decoration: underline;
}

띄어쓰기잇음

h1 [title]{
    border: 5px dotted;
}

title attribute를 선택할건데 그 조상들에 h1이 있는 것
attribute selector는 class 점수로 포함된다.

확인문제
Set the background color to "red" for <a> elements that have a target attribute.

a[target]
{
    background-color: red;
}

22. attribute selector - 2

특정 attribute를 가지고 있으면서 특정값을 갖고 있는 것
title속성의 값이 hello인 요소들

[title=hello]{
    background-color: gold;
}

확인문제 title속성의 값이 world인 요소들의 배경을 초콜릿색으로
""해도되고 안해도된다.[title=world] == [title="world"]

[title=world]{
    background-color: chocolate;
}

Set a border for <img> elements that have a title attribute that contains the word blue.
중간에 값이 있는 경우 무언가로 시작하는 경우 무언가로 끝나는 경우
attr=value 이름이 일치하는것
attr~=value 이름이 일치하는데 속성에 여러개 넣을 수있고 스페이스로 구분 완전히 전체일치 할필요없이 하나라도 일치하면됨
attr|=value 또는 -을 가지고 비교
attr^=value prefix 앞에있는것
attr$=value suffix 뒤에있는것
attr=value value가 한번이상 반복되면 포함해라 앞 뒤 가운데이든 어디든 선택

선택자는 javascrpit할때 사용자주한다.

22.1

https://flukeout.github.io/
게임으로 연습해보자! 코드가 두군데로 나뉘어져잇음.


뭐를 고를지 알려준다.

배우지 않은 것들
15:first-child p:first-child의 첫번째 자식
16:only-child p:only-child p 중 자식이 하나만 있는애 바꾸기
17:last-child 마지막 자식
18:nth-child(A) 누군가의 A번째 자식
19:nth-last-child(A) 뒤에서 A번째자식
몇번째 자식들 중 규칙 넣기
20:first-of-type 자식들중 첫번째 타입
21:nth-of-type(A) a번째 타입
22:nth-of-type(An+B) an+b번째타입
a부터 시작해서 b번째마다 규칙을 찾아 넣으면된다.
23:only-of-type 단하나 있는 타입
24:last-of-type 마지막 타입
25:empty 빈거
26:not(X) x말고 다른거

23. inherit(상속)

div{
    border: 5px solid;
    color:blue;
}

<div>
    Lorem.
    <h1>Lorem.</h1>
</div>

div에 테두리가 들어감.
h1테두리는 안되는데 div에 적용한 색은 같이 적용됨
어떤 속성들이 조상이나 부모로부터 상속을 받을 수 있는 것이 있다.
그걸 외워야하느냐? 너무많아서 못외움 검사로 알아보면된다. 레퍼런스보면 나와있긴하다.

2023.01.30 후기

많은 설렉터들을 게임을 통해서 익혔다. 이해가 더 쉽게 되는 것 같다.
규칙을 찾는 설렉터 문제에서 헤맸다. 나중에 알고리즘 문제를 풀때도 이렇게 규칙을 찾는 것 일 것이다. 잘 생각해보도록 하자. 보고 규칙을 찾으니 풀렸다. 한번 더 생각해보자.
오늘부터 자습할 듯 하다. 집에가서 하는 것 보다 공부의 열의를 이끌어갈 수 있기를 바란다.