HTML/CSS pt2
(강의 댓글을 기반으로 작성되었습니다.)
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);
}
Author And Source
이 문제에 관하여(HTML/CSS pt2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@daheejo/HTMLCSS-pt2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)