JUST GO
[CSS] 선택자 / 결합자 / 의사 클래스 본문
CSS
- CSS 속성(Property)은 다음과 같이 작성한다.
"속성 이름" : "속성 값";
- CSS 속성은 세미콜론(;)으로 구분하여 여러개 작성할 수 있다.
- 겹치는 속성은 아래와 같은 순서로 우선되어 적용된다.
- 속성 값 뒤에 !important 를 적은 경우.(나중에 CSS가 엄청 꼬이기 때문에 잘 사용하지 않음)
- 보다 명확하게(복잡하게) 해당 요소를 선택하는 경우.(ID 선택자 > 클래스 선택자 > 요소 선택자)
- 복잡도가 같다면 보다 아래에 적힌 경우.
- 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소의 상태나 특성에 따라 선택자를 분기하기 위해 사용한다. 콜론(:)을 활용하여 다음과 같이 작성한다.
"선택자":"의사 클래스" { ... }
클래스 선택자
- 클래스 선택자(Class Selector)는 CSS 속성(Property)을 적용하기 위해 사용하는 선택자 중 하나로, 태그가 가진 클래스의 이름을 활용하되, 그 이름 앞에 마침표(.)를 붙인다.
- 다음과 같이 작성한다. ("는 없는 것으로 한다.)
"클래스 이름" {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>클래스 선택자</title>
<style>
.apple {
color: red;
}
.apple.banana {
font-size: 24px;
color: blue;
}
.apple.banana.coconut {
font-size: 36px;
}
</style>
</head>
<body>
<div class="apple">애플</div>
<div class="apple banana">애플 & 바나나</div>
<div class="apple banana coconut">애플 & 바나나 & 코코넛</div>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>클래스 선택자</title>
<style>
lee.human.girl.short {
color: red;
}
.human.girl.short {
color: orange;
}
.human.girl.smart {
color: purple;
}
</style>
</head>
<body>
<kim class="human">김씨</kim>
<lee class="human girl short smart">이씨</lee>
<park class="human">박씨</park>
</body>
</html>ID 선택자
- ID 선택자(ID Selector)는 CSS 속성(Property)을 적용하기 위해 사용하는 선택자 중 하나로, 태그가 가진 아이디의 이름을 활용하되, 그 이름 앞에 샾(#)을 붙인다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"#아이디 이름" {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
- CSS 스타일을 주기 위해 ID를 부여하는 것은 추 후에 ID가 겹칠 가능성을 제공함으로 사용을 자제한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>ID 선택자</title>
<style>
div#someDiv.apple {
/* div 태그 이면서 someDiv 라는 id를 가지고 apple 이라는 클래스를 가지는... */
color: red;
}
</style>
</head>
<body>
<div class="apple" id="someDiv">DIVDIV</div>
</body>
</html>자식 결합자
- 자식 결합자(Child Combinator)는 어떠한 부모 선택자에 대한 자식을 선택하기 위해 사용하는 결합자이다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"어떠한 부모 선택자" > "자식 선택자" {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자식 결합자</title>
<style>
body > section {
color: red;
}
</style>
</head>
<body>
<div>
<section>Hi!</section>
</div>
<section>내가 빨간색임</section>
</body>
</html>자손 결합자
- 자손 결합자(Descendant Combinator)는 어떠한 부모 선택자에 대한 자손을 선택하기 위해 사용하는 결합자이다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"어떠한 부모 선택자" "자손 선택자" {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자손 결합자</title>
<style>
body section {
color: red;
}
</style>
</head>
<body>
<div>
<section>Hi!</section>
</div>
<section>내가 빨간색임</section>
</body>
</html>일반 형제 결합자
- 일반 형제 결합자(General Sibiling Combinator)는 어떠한 선택자에 대한 형제를 선택하기 위해 사용하는 결합자이다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"어떠한 선택자" ~ "형제 선택자" {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
- 아래 조건을 만족하는 경우 선택한다.
- 위 작성 예시에서 "어떠한 선택자"와 "형제 선택자"는 같은 부모를 가져야한다.
- 위 작성 예시에서 "어떠한 선택자"보다 "형제 선택자"는 뒤에 와야한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>일반 형제 결합자</title>
<style>
body > div > i ~ a {
color: red;
}
</style>
</head>
<body>
<div>
<b>주의 사항</b>
<br>
<a>1. 어쩌고</a>
<br>
<a>2. 저쩌고</a>
<br>
<a>3. 그렇고</a>
<br>
<br>
<i>참고 사항</i>
<br>
<a>- 어쩌고</a>
<br>
<a>- 저쩌고</a>
<br>
<a>- 그렇고</a>
</div>
</body>
</html>인접 형제 결합자
- 인접 형제 결합자(Adjacent Sibiling Combinator)는 어떠한 선택자에 대한 인접한 형제를 선택하기 위해 사용하는 결합자이다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"어떠한 선택자" + "형제 선택자" {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
- 아래 조건을 만족하는 경우 선택한다.
- 위 작성 예시에서 "어떠한 선택자"와 "형제 선택자"는 같은 부모를 가져야한다.
- 위 작성 예시에서 "어떠한 선택자"보다 "형제 선택자"는 뒤에 와야한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>인접 형제 결합자</title>
<style>
body > div > i + br + a {
color: red;
}
body > div > b + br + a + br + a {
color: red;
}
</style>
</head>
<body>
<div>
<b>주의 사항</b>
<br>
<a>1. 어쩌고</a>
<br>
<a>2. 저쩌고</a>
<br>
<a>3. 그렇고</a>
<br>
<br>
<i>참고 사항</i>
<br>
<a>- 어쩌고</a>
<br>
<a>- 저쩌고</a>
<br>
<a>- 그렇고</a>
</div>
</body>
</html>전체 선택자
- 전체 선택자(Universal Selector)는 주로 모든 요소를 선택할 때 사용한다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
* {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>전체 선택자</title>
<style>
div > * {
color: red;
}
</style>
</head>
<body>
<a>나는 노터치</a>
<div>
<a class="red">a도 바뀌고</a>
<b class="red">b도 바뀌고</b>
<i>i도 바뀌고</i>
<strong>strong도 바뀌고</strong>
<u>u도 바뀌고</u>
</div>
</body>
</html>그룹 선택자
- 그룹 선택자(Group Selector)는 동일한 한 개 이상의 CSS 속성들을 여러 선택자에 적용하고자 할 때 사용한다.
- 다음과 같이 작성한다. 콤마(,)로 구분하여 여러개 나열 가능.("는 없는 것으로 한다.)
"선택자 1", "선택자 2", "선택자 3" {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>그룹 선택자</title>
<style>
div > a,
div > b,
div > u {
color: red;
}
</style>
</head>
<body>
<a>나는 노터치</a>
<div>
<a class="red">a도 바뀌고</a>
<b class="red">b도 바뀌고</b>
<i>i는 안 바뀌고</i>
<strong>strong은 안 바뀌고</strong>
<u>u도 바뀌고</u>
</div>
</body>
</html>
Active 의사 클래스
- Active 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소가 마우스를 누르고 있는 상태(Mouse Down)일 때에 대한 선택자이다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":active {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
Hover 의사 클래스
- Hover 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소에 마우스가 올라가 있는 상태 (Mouse Hover)일 때에 대한 선택자이다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":hover {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Active 및 Hover 의사 클래스</title>
<style>
.button {
background-color: red;
color: white;
cursor: pointer;
display: inline-block;
padding: 0.625rem 1rem;
}
.button:hover {
background-color: blue;
}
.button:active {
background-color: black;
}
</style>
</head>
<body>
<div class="button">어떤 버튼</div>
</body>
</html>
Checked 의사 클래스
- Checked 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소가 체크 되어 있는 상태에 대한 선택자이다.
- 주로 type이 checkbox인 input을 위해 사용한다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":checked {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>checked 의사 클래스</title>
<style>
.checkbox:checked {
transform: rotate(45deg);
}
</style>
</head>
<body>
<input class="checkbox" type="checkbox">
</body>
</html>= 체크리스트 =
- <body>의 내용은 <label> 태그 하나, <input> 태그 하나, <span> 태그 하나로 구성하세요.(10점)
- "위 약관을 읽어보았고..." 텍스트를 클릭하여도 체크박스의 체크가 토글(Toggle)되게 하세요.(20점)
- 체크 박스가 체크되지 않은 상태라면 "위 약관.."텍스트의 색상을 빨간색으로 만드세요.(color:red;)(20점)
- 체크 박스가 체크된 상태라면 "위 약관을..." 텍스트의 색상을 초록색으로 만드세요.(color: green;)(50점)
- - 클래스 및 ID 적극 활용 가능
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>test1</title>
<style>
body > .check-container > .message {
color: red;
}
body > .check-container > .check:checked + .message {
color: green;
}
</style>
</head>
<body>
<label class="check-container">
<input class="check" type="checkbox">
<span class="message">위 약관을 읽어보았고 이해하였으며 동의합니다.</span>
</label>
</body>
</html>Disabled 의사 클래스
- Disabled 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소가 비활성화 되어 있는 상태에 대한 선택자이다.
- 다음과 같이 작성한다. ("는 없는 것으로 한다.)
"선택자":disabled {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Disabled 의사 클래스</title>
<style>
input:disabled {
background-color: black;
}
</style>
</head>
<body>
<input type="text">
<br>
<input disabled type="text">
</body>
</html>first-child 의사 클래스
- first-child 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 첫번째 요소를 선택하기 위해 사용한다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":first-child {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
nth-child 의사 클래스
- nth-child(n) 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 n번째 요소를 선택하기 위해 사용한다. 이 때 n 값은 1이상의 자연수 혹은 xn+y(이때 n은 자동 증가, x 배수와 y 오프셋), odd(홀수 번째), even(짝수 번째)로 지정가능하다.
- 이때 순번은 1부터 시작한다.(0 아님)
- 가령 nth-child(2n + 1)이라는 값은 3,5,7,9...번째 값을 의미하는데 n이 1부터 1씩 증가한다고 생각하면 됨.
- 단, n이 음수일 경우, 가령, nth-child(-n+3)은, (-0+3), (-1+3), (-2+3) 으로 그 값이 0을 초과할 때 -0부터 1씩 감소한다고 계산하면 됨.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":nth-child(3) {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
last-child 의사 클래스
- last-child 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 마지막 요소를 선택하기 위해 사용한다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":last-child {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>first-child, nth-child, last-child 의사클래스</title>
<style>
div > a:nth-child(3) {
color: red;
}
</style>
</head>
<body>
<div>
<b>목록</b>
<br>
<a>첫번째</a>
<br>
<a>두번째</a>
<br>
<a>세번째</a>
<br>
<a>네번째</a>
</div>
</body>
</html>first-of-type, nth-of-type, last-of-type
first-of-type 의사 클래스
- first-of-type 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 마지막 요소를 선택하기 위해 사용한다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":first-of-type {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
nth-of-type 의사 클래스
- nth-child(n) 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 n번째 요소를 선택하기 위해 사용한다. 이 때 n 값은 1이상의 자연수 혹은 xn+y(이때 n은 자동 증가, x 배수와 y 오프셋), odd(홀수 번째), even(짝수 번째)로 지정가능하다.
- 이때 순번은 1부터 시작한다.(0 아님)
- 가령 nth-child(2n + 1)이라는 값은 3,5,7,9...번째 값을 의미하는데 n이 1부터 1씩 증가한다고 생각하면 됨.
- 단, n이 음수일 경우, 가령, nth-child(-n+3)은, (-0+3), (-1+3), (-2+3) 으로 그 값이 0을 초과할 때 -0부터 1씩 감소한다고 계산하면 됨.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":nth-of-type(3) {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
last-of-type 의사 클래스
- last-of-type 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 마지막 요소를 선택하기 위해 사용한다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":last-of-type {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>first-of-type, nth-of-type, last-of-type 가상 클래스</title>
<style>
/* body > div > a:nth-child(5) {
color: red;
} */
body > div > a:nth-of-type(2) {
color: red;
}
</style>
</head>
<body>
<div>
<b>메뉴</b>
<br>
<a>짜장면</a>
<br>
<a>짬뽕</a>
<br>
<a>중화비빔밥</a>
<br>
<a>마들렌</a>
</div>
</body>
</html>Not 의사 클래스
- Not 의사 클래스(Pseudo Class)는 다른 의사 클래스를 부정하기 위해 사용한다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":not(:"다른 의사 클래스"){
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
- 가령, 마지막 요소가 아닌 모든 요소는 다음과 같이 선택한다.
*:not(:last-child) {...}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>not 의사 클래스</title>
<style>
body > div > div:not(:last-child) {
background-color: yellow;
border-bottom: 0.0625rem solid black;
}
</style>
</head>
<body>
<div>
<div>냉장고</div>
<div>청소기</div>
<div>세탁기</div>
<div>건조기</div>
<div>TV</div>
</div>
</body>
</html>Focus 의사 클래스
- Focus 의사 클래스(Pseudo Class)는 선택된 요소에 포커스(Focus)가 있을 때에 대한 의사 클래스이다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":focus {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>focus 의사 클래스</title>
<style>
body {
background-color: rgb(10,15,20);
color: rgb(245,250,255);
}
input {
background-color: rgb(20,25,30);
border: 0.0625rem solid rgb(30,35,40);
border-radius: 0.33rem;
color: rgb(245,250,255);
outline: none;
padding: 0.5rem 0.75rem;
}
input:hover {
background-color: rgb(25,30,35);
}
input:focus {
background-color: red;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>background-color 속성
- background-color 속성(Property)은 선택한 요소의 배경 색상을 지정하기 위해 사용한다.
- 색상 지정 방법은 아래와 같다.
- 리터럴(Literal) : 미리 지정된 시스템의 색상을 단어로 표시한 것. 가령, red, green, blue, black, white 등이 있음.
- RGB 함수 : rgb(r, g, b) 함수를 통해 색을 지정한다. 이 때 각 r, g, b 값은 0부터 255까지 이며 숫자가 높을수록 각 적, 녹, 청색이 많이 들어가게 된다. 가령 rgb(255, 0, 0)은 완전 빨간색(red)이며, rgb(0, 0, 0)은 검은색(black), rgb(255, 255, 255)는 흰색(white)이다.
3. RGBA 함수 : rgba(r, g, b, a) 함수를 통해 색을 지정한다. 위 RGB 함수와 용법은 동일하며 마지막 a 값은 불투명도이고 0% 부터 100%까지의 값이다. 0%는 완전 투명, 100%는 완전 불투명이다.
4. 헥스 코드(Hex Code, 16진법 코드) : #rrggbb 혹은 #rrggbbaa 방식으로 작성한다. 각 rr, gg, bb, aa 값은 00부터 ff까지 적을 수 있다. 이는 RGB 함수의 각 r, g, b 10진법 값이 16진법으로 변한 값으로, 0을 00으로, 255를 ff로 표시한다. 이 때 불투명도(aa) 값 또한 0% ~ 100%에 해당하는 값을 00 부터 ff 까지의 16진수로 표시한다. 마찬가지로 00은 완전 투명, ff는 완전 불투명이다.
- (불투명도 %) *255 / 100 값에 대해 소수점을 절사하고 해당 값을 16진수로 변환하면 된다.
- 가령, 50%의 불투명도는 50 * 255 / 100의 방식으로 계산되며 이 값은 127.5 이고 절사하면 127이 된다. 이 10진수 값 127을 16진수로 변환하면 7f가 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>focus 의사 클래스</title>
<style>
body {
/* background-color: black;
background-color: rgb(0,0,0);
background-color: rgba(0, 0, 0, 100%); */
background-color: #000000ff;
}
</style>
</head>
<body>
</body>
</html>width 및 height 속성
- width는 가로크기를, height는 세로크기를 지정하기 위해 사용한다.
- 단, display가 inline인 요소(span, a등)는 그 display 값을 다른 것으로 변경하기 전에는 width 및 height 속성이 적용되지 않는다.
- 크기는 아래와 같은 단위를 사용할 수 있다.
- 픽셀(Pixel) : 픽셀 단위로 크기를 지정한다. 가령 100px. 단, 픽셀 단위는 정적인 단위(Static Unit)임으로 사용을 피한다.
- em : 부모가 가진 폰트 크기(font-size)에 대비하는 비율로서의 크기이다. 가령, 부모 요소의 폰트 크기가 16px 이라면 1em은 16px과 동일하다.
- rem : 브라우저에서 설정한 폰트 크기에 대비하는 비율로서의 크기이다. 가령, 브라우저에 기본 폰트 크기가 16px 이라면 1rem은 16px과 동일하다.
- vw (Viewport Width) : 현재 브라우저의 가로 크기에 대비하는 비율이다. 가령 100vw는 화면 가로 크기 전체이고 50vw는 그 절반이다.
- vh(Viewport Height) : 현재 브라우저의 세로 크기에 대비하는 비율이다. 가령 100vh는 화면 세로 크기 전체이고 50vh는 그 절반이다. 단, 이 때 스크롤 바의 크기는 무시함으로 주의한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>width 및 height 속성</title>
<style>
.by-px {
width: 160px;
height: 160px;
background-color: rgb(225, 150, 160);
}
.by-rem {
width: 10rem;
height: 10rem;
background-color: rgb(150, 140, 225);
}
.by-v {
width: 50vw;
height: 50vh;
background-color: rgb(150,225,150);
}
</style>
</head>
<body>
<div class="box by-px"></div>
<div class="box by-rem"></div>
<div class="box by-v"></div>
</body>
</html>position 속성
- position 속성(Property)은 해당 요소가 어떻게 위치할 것인가에 대한 설정이다.
- 기본 값은 static 이고, 사용할 수 있는 속성 값은 아래와 같다.
- static : 해당 요소가 원래 위치해야하는 위치에 위치하도록 한다.
- relative : 해당 요소가 원래 위치해야하는 위치에 위치하거나 해당 위치를 기준으로 움직이도록 한다.
- absolute : position 속성 값이 static이 아닌 가장 가가운 부모를 기준으로 움직인다. 단, 그러한 부모가 없다면 문서를 기준으로 움직인다. 다른 요소나 텍스트의 흐름에 영향을 끼치지 않는다.
- fixed : 뷰포트를 기준으로 움직이고, 스크롤의 영향을 받지 않는다. 다른 요소나 텍스트의 흐름에 영향을 끼치지 않는다.
- ...
top, right, bottom, left 속성
- position 속성 값이 static이라면 무시된다.
- top : 해당 요소의 윗변을 기준으로 이동한다.(bottom과 함께 쓰지 않는다.)
- right : 해당 요소의 우변을 기준으로 이동한다.(left와 함께 쓰지 않는다.)
- bottom : 해당 요소의 아랫변을 기준으로 이동한다.(top과 함께 쓰지 않는다.)
- left : 해당 요소의 좌변을 기준으로 이동한다.(right와 함께 쓰지 않는다.)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>position 및 top, right, bottom, left 속성</title>
<style>
body > div {
/* bottom: 5rem; */
width: 20rem;
height: 20rem;
background-color: rgb(220,100,100,50%);
position: absolute;
}
body > div > div {
width: 7.5rem;
height: 7.5rem;
}
body > div > div:first-of-type {
background-color: rgb(100,220,100,50%);
}
body > div > div:nth-of-type(2) {
top: 2rem;
left: 2rem;
background-color: rgb(100,100,220);
position: fixed;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
</div>
반갑습니다!
</body>
</html>=position 활용해서 화면 구성해보기=
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>test2</title>
<style>
body {
margin: 0;
padding: 0;
}
body > div {
background-color: rgb(225,225,200);
width: 27.5rem;
height: 30rem;
}
body > div > div:nth-of-type(1) {
background-color: rgb(100,200,255);
width: 11.5rem;
height: 12.75rem;
top: 1.5rem;
left: 1.5rem;
position: absolute;
}
body > div > div:nth-of-type(2) {
background-color: rgb(100,200,255);
width: 11.5rem;
height: 12.75rem;
top: 1.5rem;
left: 14.5rem;
position: absolute;
}
body > div > div:nth-of-type(3) {
background-color: rgb(100,200,255);
width: 11.5rem;
height: 7.75rem;
top: 15.75rem;
left: 1.5rem;
position: absolute;
}
body > div > div:nth-of-type(4) {
background-color: rgb(100,200,255);
width: 11.5rem;
height: 7.75rem;
top: 15.75rem;
left: 14.5rem;
position: absolute;
}
body > div > div:nth-of-type(5) {
background-color: rgb(50,200,50);
width: 11.5rem;
height: 5rem;
top: 23.5rem;
left: 1.5rem;
position: absolute;
}
body > div > div:nth-of-type(6) {
background-color: rgb(50,200,50);
width: 11.5rem;
height: 5rem;
top: 23.5rem;
left: 14.5rem;
position: absolute;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
'CSS > 학습내용' 카테고리의 다른 글
| [선택자] ID 선택자 (1) | 2022.10.03 |
|---|---|
| [선택자] 클래스 선택자 (0) | 2022.10.03 |
| [속성] grid (0) | 2022.10.03 |
| [속성] flex (0) | 2022.10.03 |
| [CSS] 속성 (1) | 2022.10.03 |