📢 공지합니다
이 게시글은 메인 페이지에 항상 고정되어 표시됩니다.
개요: 필자가 클론코딩을 공부하면서 정리한 게시물이다.
position
레이아웃보다는 위치를 아주 조금 위로 오른쪽으로 옮기고 싶을 때 사용
fixed
div {
color:blue;
width:300px;
height:300px;
background-color:teal;
}
#different {
position:fixed;
background-color:wheat;
width:350px;
}
</style>
</head>
<body>
<div></div>
<div id="different"></div>
이렇게 하면 스클롤을 내렸을시 화면상에 wheat박스는 그대로 고정되있는다.
#different {
top:5px;
position:fixed;
background-color:wheat;
width:350px;
}
이렇게 하면 wheat박스는 teal 박스 위로 가게 된다. 레이어가 구분되는 것을 쉽게 확인할 수 있다.
position: static(디폴트값임 그냥) : 레이아웃이 박스를 처음 위치하는 곳에 두는 것
position: relative: 처음 생성된 위치를 기준점으로 상하좌우의 위치를 조금씩 수정
.green {
background-color:teal;
height:100px;
position:relative;
top:-10px;
width:100px;
}
</style>
</head>
<body>
<div>
<div class="green"></div>
다음과 같이 relative 사용시 저렇게 된다.
position: absolute
.green {
background-color:teal;
height:100px;
position:absolute;
bottom:0px;
width:100px;
}
다음과 같이 사용시 화면 맨 끝부분쪽 기준으로 움직인다.
즉 이것는 가장 가까운 relative 부모를 기준으로 이동시켜준다.
저것의 부모는 div가 아닌 body이다.
div {
color:blue;
width:300px;
height:300px;
background-color:wheat;
position:relative;
}
.green {
background-color:teal;
height:100px;
position:absolute;
right:0px;
width:100px;
}
div를 relative 부모로 설정해서 다음과 같이 변환시켰다.
pseudo selector
다음과 같이하면 아래 div 색깔만 teal로 변경된다.
이렇게 하면 첫번째 색도 변경된다.
다음과 같이 변경된다.
span은 다음과 같다. 이렇게 하면 2번째 배경색 변경!
하면 짝수번째만 색이 변경된다. 홀수는 odd, 3개씩해서 바꾸고 싶으면 3n+1을 하면 된다.
<p> 안에 있는 span 색을 변경하고 싶으면 다음과 같이 p를 부모에 두고 작성하면 된다.
다음과 같이 div > span 을 했을시 div 바로 아래 span만 밑줄적용이 된다. 따라서 다음과 같이뜬다.
이렇게 하면 p의 다음 형제에다가 적용할 수 있다.
combinator
p뒤에 span이 오지 않을 우 적용하기 위해 쓰인다.
다음과 같이 수정을 할 수 있다.
이렇게 하면 password의 배경색이 바뀐다.
~를 써서 적용시킬 수 있다.
$: 처음
^: 끝
state
버튼을 누를 때 토마토 색으로 바뀐다.
마우스를 올릴 때 색이 바뀐다.
키보드를 선택했을때 색이 바뀐다.
링크를 방문하면 hfasdfi 색이 바뀐다.
입력창을 누르면 seagreen으로 색이 바뀐다. form은 그 자식들인 input이 focuse가 되면 form의 모습을
바꾼다는 것이다.. ?? 여기는 좀 이해부족... (3.17 6분이후 보기)
placeholder 부분이 노란색이 된다.
selection을 하면 <p> 부분을 드래그 하면 해당 색이 나온다.
이거 또는 first-line을 통해 첫번째 글자를 조정할 수 있다.
다음과 같이 rgb방식으로 색을 지정해 투명도 까지 변경할 수 있다.
root로 색을 지정하고 변수를 통해 설정할 수 있다. 즉 같은색일때 여러번 안쓰고 한곳에 지정하고 쓰기 가능하다!!
border도 지정가능!!
JS 기초편(1) (0) | 2023.06.25 |
---|---|
CSS 기초편(4) (0) | 2023.05.17 |
CSS 기초편(2) (0) | 2023.05.09 |
CSS 기초편(1) (3) | 2023.05.09 |
HTML 기초편(3) (0) | 2023.05.05 |