HTML/CSS pt2

조다희·2021년 7월 6일
0

(강의 댓글을 기반으로 작성되었습니다.)

position

position fixed를 이용하면 스크롤해도 항상 제자리에 머무른다.
처음 만들어진 자리에 고정 되어있다. 하지만 top, left, right, bottom 중 하나만 수정해도 서로 다른 레이어에 위치하게되어 원래 위치가 무시된다.
positon fixed를 이용하면 가장 위에 위치하게 된다. (맨 앞)

1. positon: static (default)
2. position: fixed
- element가 처음 생성된 자리에 고정.
3. position: relative;
- element가 '처음 생성된 위치'를 기준점으로, top bottom left right으로 위치를 조금씩 수정할 수 있다.
4. position: absolute;
가장 가까운 relative 부모를 기준으로 이동
position:relative; 를 해주면 부모가 된다.
없으면 body.

pseudo selector

: 좀 더 세부적으로 엘리먼트를 선택해 주는 것!
(기존 방법 : 태그, id w/#, class w/.)

선택의 복잡한 과정을 pseudo selector로 가능함

div:first-child {
background-color: tomato;
}

/* pseudo selector */
div:last-child {
background-color: teal;
}

id나 class를 따로 만드는것보다 이렇게 지정하는게 훨씬 좋은 방법이다.
css에서만 선택을 하면 되니까! html코드를 고칠 필요가 없기 때문이다

n번째 태그 수정하기 nth-child(n)

span:nth-child(2) {
background-color: teal;
}
span:nth-child(even) { //or odd ( 홀수 )
background-color: teal;
}

span:nth-child(5n + 1) {
background-color: silver;
}

div의 바로 밑 자식에서 span을 찾아서 그것만 효과를 주는 방법

1)

div span {
text-decoration : underline;
}

이렇게하면 div밑에 있는 모든 span이 효과를 가진다
직접적인 부모가 아니어도 밑에있는 것들을 모두 css가 찾는다.

2)

div > span {
text-decoration : underline;
}

이렇게하면 바로 밑!!! 을 찾게 되므로 바로 밑의 자식만 건드릴 수 있게 된다.

형제에게 효과를 주는방법

p + span {
color: black;
}

+를 사용하면 형제에게 영향을 끼칠 수 있다.

'>' 사용하면 direct child를 찾고, '+' 를 사용하면 바로 코드상 밑에 있는 sibling을 찾게된다.

active
해당 요소를 마우스로 클릭했을 때 효과를 적용

hover
마우스가 해당 요소 위를 지나갈 때 효과를 적용

focus
키보드로 선택되었을 때 효과를 적용

focus-within
부모 요소에게 적용. 자신의 자식 요소 중 하나가 focused 되었을 때 효과를 적용

visited
방문한 사이트일 경우에 효과를 적용

조건을 나열해 여러 상황을 설정할 수 있음.

high-tag:hover low-tag:focus{
}

이 경우, 상위 요소 위에 마우스 커서가 있고, 하위 요소가 focused 되었을 때 효과를 적용하게 된다.

css에서 알아야할 color system

1) hexadecimal color (16진수 컬러)
#000000 
2)RGB 방식;rgb(252,206,0); 이런식
rgba (205,23,0, 0.5);

Variable (custom properties )

:root 라는 엘리먼트에 변수를 추가하는 것이다
:root은 기본적으로 모든 document의 뿌리가 되는 것이다
여기에 변수이름을 쓰고
--main-color라고 변수이름을 주고
이것을 document의 root에 저장하는것이다

--를 써주고 변수이름을 써줘야한다
변수는 -- 2개 그리고 변수이름
빈공간이 있다면 -로 채워야한다.
물론 컬러만 저장할 수 있는게 아니다!

--default-border: 1px solde var(--main-color);

그 다음 이 변수를 사용할 곳에

p {
background-color: var(--main-color);
}
a {
background-color: var(--main-color);
}
profile
블로그 옮김 https://daheejo.tistory.com/

0개의 댓글