★2가지 style 속성을 동시에 적용하려면, class name을 2개를 입력해주면 됨! 이건 여러 요소에 공통된 값을 적용해 줄 필요가 있을 때 사용하면 유용함.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn{
border-radius:6px;
}
.pink{
background:pink;
}
.blue{
background:blue;
color:white;
}
</style>
</head>
<body>
<span class='btn pink'>hello world</span>
<span class='btn blue'>hello world</span>
<span class='btn pink'>hello world</span>
</body>
</html>★ position
포지션의 위치를 한방향이라도 수정하면 완전 다른 레이어로 분리되어진다.
2개의 레이어가 있으면 상위 레이어를 기준으로 이동했지만, 위치를 바꿔주면 서로 관련없는 각각의 레이어가 된다.
★ position:relative
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height:1000vh;
margin:100px;
}
div {
width: 300px;
height: 300px;
background:pink;
position:relative; </*이런식으로 포지션값 주기*/>
</style>
</head>
<body>
<div class='first'>
<div class='twice'></div>
</div>
</body>
</html>body tag 내부를 보면, .twice의 부모요소가 .first이다. 하지만 서로 relative한 관계가 아니고 개별적 요소이기 때문에 relative한 body tag가 부모요소가 될수 있다. 만약body tag를 부모요소로 하고 싶지 않을 경우에는 상위요소의 position 값에 relative값을 입력해주면 적용된다.
★ input 속성
1) placeholder: input값 내부에 쓰여지는 문자
<input type="text" placeholder="username">
<input type="text" placeholder="password">출력값: 
2) require: input값에 사용자가 데이터를 입력하지 않았을때 경고창이 띄워지게 할 수 있는 기능
<input type="text" placeholder="username">
<input type="text" required placeholder="password">
3) input값에 스타일 속성을 적용하는 여러가지 방법
<style>
input{
border:1px solid #8d47ff;
}
input:required{
border-color:tomato;
}
input[type="password"] {
background-color: pink;
}
input[placeholder="username"] {
background-color: pink;
}
input[placeholder~="love"] {
background-color: rgb(93, 41, 175);
}
<!--\\끝에 오는 경우는 $ 처음에 오는 경우는 ^-->
</style>
<form>
<input type="text" placeholder="username">
<input type="password" required placeholder="password" />
<input type="text" placeholder="first love" />
<input type="text" placeholder="twice love" />
<input type="submit" />
</form>input[placeholder*="love"] love를 포함한 모든 input을 선택할 수 있음
input[placeholder~="love"] 앞뒤에 공백이 있는 상태에서 love인 경우만 선택됨
★ hover, focus, visited
hover는 마우스 커서를 올리면 스타일 속성이 변하는 경우
focus는 tab키를 사용, 마우스커서로 클릭하고 커서를 움직여도 스타일 속성이 적용된
상태 그대로 있음
visited는 사용자가 방문한 적이 있는 링크를 나타냄.
★ block & inline
block: 한 라인에 하나의 태그
inline: 동일라인에 여러개 태그가 올 수 있다.
(인라인요소 -> 블럭요소)
display속성에서 block으로 바꿔주면 됨
인라인 요소 사용시 알아야할 특징!!!
: 인라인 요소는 높이와 너비를 가질 수 없다.
: 마진은 위아래로는 못가지고 좌우로는 가질 수 있음.
: 패딩은 사방에 가능함
★ class & id
클래스와 아이디를 구분해서 사용
클래스는 동일 이름을 여러번 반복해서 사용해도 되지만
아이디는 딱 한 가지 요소에 한 아이디 이름을 사용할 수 있다.
각각의 요소를 가지지만, CSS에서 속성값을 가질때 같이 수정되었으면 좋겠는 범주에 있는 것들을 묶어서 쓸때 class를 사용하는 것이 유용하다.
인라인 블록을 사용 하면 알수없는 공백이 생긴다. 우리가 설정하지 않았지만 생기는 공백 !
이런점이 조금 불편함. 인라인블록은 창크기의 영향을 받음 반응형이 아님
★ flex box
이러한 단점을 해결하려고 flex box가 나옴
3가지 규칙
1) 자식 엘리먼트에는 어떤 것도 적지 말아야함
부모 엘리먼트에만 명시해야함
2) main axis , cross axis
주축은 main axis 으로 디폴트 되어있고
교차축은 cross axis으로 움직인다.
이게 기본 설정이지만, 바꿀 수 있다.
justify-content는 주축
align-items는 교차축 이지만 언제든지 변경해서 쓸 수 있다.
변경하려면 flex-direction 사용하면 됨
주축은 기본으로 row!
align-items : stretch는 div를 늘어나게 하는데 지정된 높이 값이 있다면 작용하지 않는다.
바디가 height을 가지고 있지 않고
바디의 크기만큼 안에있는 요소들이 크기가 크다면
그럴땐 바디에height을 추가해줘야함. vh은 아이폰, 갤럭시, 피씨 등 화면에 따라 달라짐!@
position:fixed
는 설정된 자리에 고정
position:static
position:relative 요소가 처음 지정한 위치를 기준으로 조금씩 움직이는 것
position:absolute 가장 가까운 relative부모를 기준으로 이동시켜줌
(관계있는 부모)
★ 순서 선택
div:last-child
div:first-child
---> div마지막, 첫번쨰 요소를 선택할 수 있다
nth-child(번호)
일정 규칙이 반복 될 때는
even! (짝수만)
또는 2n
odd(홀수)
홀수 다른 표현 2n+1
일정 순서에서 시작한거처럼 보이려면?
2n+1 응용해서 앞에 2를 바꿔주면 n번째 마다 변경되는 형식으로 바꿔짐
★
div > span 이렇게 하면 바로 밑 자식에게만 속성을 적용할 수 있다
p + span 이렇게 하면 다음으로 오는 형제 속성을 선택가능
~ 는 형제 관계
★ css color 표현방법
css color: hex, rgb rgba(색의 투명도 나타내는것 a )
★ CSS 변수 설정
:root{
--main-color: 색상값
사용할때 var(--main-color)
이름정할때 dash2개 다음 dash1개
css custom property \검색해서 mdn 보기
