position
<style>
div {
position: static; // position의 기본값, 박스를 처음 위치한 곳에 두는 것
position: fixed; // 처음에 위치한 자리에서 화면의 스크롤에 상관없이 고정되는 것
position: relative; //박스가 처음 위치한 곳을 기준으로 이동
position: absolute;
top: 속성값; //포지션에 관한 4가지 속성값
left: 속성값;
right: 속성값;
bottom: 속성값;
}
</style>1. position:static; 요소를 처음 위치한곳에 두는것이다. 화면의 스크롤시에도 고정되지않는다. position:static이라고 따로 명시해주지않아도 기본적으로 요소는 position:static 상태이다.
2. position:fixed; 요소의 위치를 고정시킨다. 고정된 위치는 초기에 위치한 자리이다.
하지만 top:5px; 과 같이 top, left, right, bottom과 같은 속성으로 초기에 위치할 자리를 고정할수있다. 그래서 예를들면 특정 box의 위치를 고정시켜서 스크롤시에도 고정된 위치에 있게 할수있는것이다. 주로 웹페이지의 메뉴를 position: fixed해서 화면 스크롤시에도 상단에 고정되어 있는것을 볼수있다.
3. position:relative; 요소가 처음 위치한곳을 기준으로 이동할수있다. 이동은 top, left, right, bottom 속성을 이용해서 이동한다.
4. position:absolute; 가장 가까운 부모 요소에 position:relative가 있다면, 그 부모 요소를 기준으로 top, bottom, left, right 속성을 사용해서 위치를 조정할수있다.
그러나, 만약 가장 가까운 부모 요소에 "position: relative;"가 지정되어 있지 않다면,
부모의 부모 요소 중에서 "position: relative;"가 지정된 요소를 찾아 기준으로 삼을 수 있습니다.
이런식으로 계속 올라가며 상위 요소 중에서 "position: relative;"가 지정된 부모를 찾을 때까지 탐색합니다.
계속 올라가면서 position:relative가 지정된 부모를 찾으면 그 부모 요소를 기준으로 삼는다.
만약 body 요소까지 올라가도 "position: relative;"가 지정된 부모를 찾지 못한다면, body 요소를 기준으로 위치를 설정하게 됩니다.
#inner{
position:absolute
}
<body>
<div>
<div id="inner"></div>
</div>
</body>👆위 코드에서는 가장 가까운 부모요소인
<div>의 position:relative 여부를 보고 어느 요소를 기준으로 위치를 이동할지 정하는것이다.
Pseudo selectors (가상 선택자)
- 좀 더 세부적으로 요소를 선택해주는것
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>👆위 코드에서 마지막 div에만 무언가를 하려고 할때,
div:last-child{ }처럼 사용하거나 첫번째 div에만 무언가를 하려고할때div:first-child{ }처럼해서 사용할수있다.' : '을 이용해서 좀 더 세부적으로 요소를 선택해줄수있는것이다. 수많은 Pseudo selector가 있다.
nth-child(2) , nth-child(4), nth-child(even) 등등
<body>
<span>hello</span>
<p> hello man
<span> inside </span>
</p>
</body>👆위 코드에서
<p>안에 있는<span>에만 css를 적용하려고할때는
p span{color:teal; }이런식으로 하면된다.
여기서 p가 parent selector이고 span이 children selector이기 때문이다.
<head>
<style>
span:first-child 첫 번째 요소 선택 (span이면서 형제들 중 첫 번째 요소)
span:last-child 마지막 요소 선택
span:nth-child(2) 두 번째 요소 선택
span:nth-child(4) 네 번째 요소 선택
span:nth-child(even) 짝수로 선택
span:nth-child(odd) 홀수로 선택
span:nth-child(2n) 짝수랑 똑같이 선택
span:nth-child(2n+1) 홀수랑 똑같이 선택
span:nth-child(3n+1) 3개씩 마다 선택
</style>
</head>
<body>
// 이렇게 하나하나 id나 class를 지정하지 말고 가상 선택자를 활용할 수 있다.
<span id="span1">hello</span>
<span id="span2">hello</span>
<span class="span">hello</span>
<span class="span">hello</span>
<span class="span">hello</span>
<span>hello</hello>
<span>hello</hello>
<span>hello</hello>
<span>hello</hello>
<span>hello</hello>
</body>Combinators (결합자)
- 가상 선택자와 마찬가지로, 특정 요소를 세부적으로 선택할 수 있다.
예를들면 p + span { } 에서, + 를 사용하면 p안에 있는 자식 요소도 아닌, 부모요소도 아닌 다음으로 오는 형제에게 영향을 끼친다. 코드상으로 <p> 이전에 <span>이 있으면 적용이 안되고 <p> 다음에 바로 <span>이 있어야 적용된다. 또, <p> 다음에 다른 요소가 있고 그 다음에 이 있어도 적용이 안된다.
span이 p의 형제인데 바로 다음에 오지않을때 사용하는것은 ~ 이다.
즉,
p span{ }은 부모,자식 관계이다.p > span{ }은 부모와 바로 밑 자식의 관계이다.p + span{ }은 바로 다음에 오는 형제의 관계이다.p ~ span{ }은 형제의 관계인데 바로 다음에 올 필요는없다.
div span {
text-decoration : underline;
}
/* div 부모 밑에 있는 모든 후손 span이 효과를 가짐
직접적인 부모가 아니어도 밑에있는 것들을 모두 css가 찾는다. */
div > span {
text-decoration : underline;
}
/* 이렇게하면 바로 밑을 찾게 되므로 바로 밑의 자식만(자식의 자식은X) 건들일 수 있게된다. */
p + span {
color: black;
}
/* + 를 사용하면 p안에 있는 자식 요소도, 부모 요소도 아닌,
다음으로 오는 span 형제에게 영향을 끼칠 수 있다.
'바로 옆'에 위치해야함. 옆의 옆은 적용 안됨!! */
p ~ span {
}
/* ~ 는 span이 p의 형제인데, 바로 뒤에 오지 않을 때 쓸 수 있다. */
attribute selectors (속성 선택자)
- 태그에 사용된 속성 값을 찾아서 적용시킴.
<style>
input:required{
/* input중 required속성이 있는 태그만 선택 */
}
input[placeholder="password"]{
/* input중 placeholder="password"인 태그만 선택 */
}
input[placeholder ~="name"]{
/* input중 placeholder에 "name"이라는 단어를 포함한 모든 input을 적용
ex) placeholder ="First name"
placeholder ="Last name" */
}
a[href$=".org"] {
/* "$="는 ".org"로 끝나는 모든 <a>를 선택 */
}
</style>
<body>
<form>
<input type="password" required placeholder="First name" />
</form>
</body>States
- 가상 선택자에서 4가지(active, hover, focus, visited) 는 states 라고 부름.
<style>
input:active {
/* 클릭한 순간에만 반응 */
}
input:hover {
/* 마우스 커서를 올려놨을 때만 반응 */
}
input:focus {
/* 키보드로 입력가능하게 선택되었을때 반응 */
}
a:visited {
/* 링크에만 적용된다. 링크된 주소를 방문한 후에 나타나는 반응 */
}
form:focus-within {
/* 이 요소(ex. form) 안에 어떤 것이든 focus 되면 ~게 만들어줘라는 내용이다.
하지만 이 요소(ex. form)안에 어떤것이든 focus되지않으면 적용되지않는다. */
}
form:hover input:focus {
/* form에 hover가 된 상태에서 input에 focused되어있을때 input에 적용되는 반응 */
}
</style>Custom property
1. 변수(variable)
- CSS 전반에 걸쳐 자주 쓰는 속성들을 전 영역 공통으로 변수 설정
=> css에서 변수를 사용해서 값을 저장할수있다. 그래서 나중에 쓸수있다. 즉 프로그래밍 언어처럼 보이게 만들어준다.
=> 원래는 custom property라고 하지만 변수(variable)이라고 하는게 좋음 - 변수를 선언할땐 :root라고 불리는 요소에 변수를 추가하면된다. :root는 기본적으로 모든 웹페이지의 뿌리이다. 즉 출발점이다. 여기에 변수를 지정하고 사용하면된다. 변수를 선언할땐 ' --변수이름: 값 ' 형식으로 주면된다. 그리고 변수이름 사이에는 공백이 있으면 안되므로 ' - ' 를 사용한다.
- 변수를 사용할때는 사용하려는 곳에서 var(--main-color) 이렇게 사용하면된다.
<style>
:root {
//메인컬러와, 기본보더를 변수로 설정
--main-color: #489ee3;
--default-border: 1px solid var(--main-color);
}
p {
background-color: var(--main-color);
}
a {
color: var(--main-color);
border: var(--default-border);
}
</style>2. css에서 컬러를 지정하는 방법
<style>
p {
/* 컬러명을 직접 작성 */
background-color: blue;
/* hex코드로 지정 */
background-color: #FCCE00
/* RGB색상으로 지정(a는 alpha로, 투명도(opacity))를 나타낸다. 0.5로 하면 50%의 opacity를 가짐 */
background-color: rgba(252,206,0, 0.5);
}
</style>