티스토리 뷰
1. CSS3의 구성
- CSS3란 스타일 시트의 표준안으로, 웹 문서에 글꼴, 색상, 정렬과 각 요소의 배치 방법 등과 같은 디자인 요소를 적용하는데 사용한다.
- CSS3는 선택자, 속성, 속성값으로 구성된다.
- 1 ) 선택자 : 스타일 시트를 적용할 대상을 지정한다. Ex ( h1 , p , #employee , .ai )
- 2 ) 속성 : 어떤 속성을 적용할지 선택한다. ( ex. color: , font-size: )
- 3 ) 속성값 : 속성에 어떤 값을 반영할지 선택한다. ( ex. blue; , 15px; )
2. CSS의 우선순위
- CSS는 사용하는 위치에 따라서 인라인 / 내부 / 외부 스타일 시트로 구분된다.
- CSS의 적용 우선 순위는 인라인 - > 내부 - > 외부 - > 브라우저 기본 스타일 시트 순으로 적용 된다.
- + 하지만 마지막에 적용한 스타일 시트가 결국 브라우저에 적용되기에 가장 마지막에 적용된 것이 살아남는다고 생각하면 편하다.
- 하나의 요소에 인라인 스타일 시트가 중복 정의되면 가장 마지막에 설정된 값이 적용된다.
- CSS 적용 우선순위와 상관없이 속성을 강제로 적용하기 위해서는 (!important)라고 작성해야 한다.
3. CSS 기본 선택자 (***)
- 1 ) 전체 선택자 ( * { } ) : 모든 태그에 스타일을 적용한다.
- 2 ) 타입 선택자 ( 태그명 {} ) : 지정한 태그에 스타일을 적용한다.
- 3 ) 클래스 선택자 ( .클래스명 {} ) : 지정한 class에 스타일을 적용한다.
- 4 ) 아이디 선택자 ( #아이디명 {} ) : 지정한 id에 스타일을 적용한다.
- 5 ) 속성 선택자 ( [속성=값] {} / [속성] {} ) : 지정한 속성 또는 속성값이 있는 태그에 스타일을 적용한다.
4. 속성 선택자의 형식 ( attr_Selector 2 참고 )
- 1 ) [속성] : 해당 속성이 정의된 모든 태그를 선택한다. ( 속성의 값과는 무관하다. )
- 2 ) [속성=속성값] : 정의된 속성과 속성값이 동일한 태그를 선택한다.
- 3 ) [속성~=속성값] : 공백으로 구분된 속성값 중 하나라도 해당 속성값과 동일한 태그를 선택한다.
- 4 ) [속성|=속성값] : 속성값이 해당 속성값과 동일하거나, 해당 속성값으로 시작하고 ‘-‘ 기호로 이어진 태그를 선택한다.
- 5 ) [속성^=속성값] : 속성값이 해당 속성값으로 시작하는 태그를 선택한다.
- 6 ) [속성$=속성값] : 속성값이 해당 속성값으로 끝나는 태그를 선택한다.
- 7 ) [속성*=속성값] : 속성값이 해당 속성값을 부분 문자열로 가지는 태그를 선택한다.
5. 가상 선택자 (****)
- 웹 문서에는 보이지 않지만, 동작에 영향을 주는 속성을 가상 선택자로 이용한다.
- 가상 선택자의 종류 :
- 1 ) 이벤트 가상 클래스 선택자
- 사용자가 마우스 이벤트 행위를 어떻게 하는지에 따라서 스타일시트를 다르게 적용
- 이벤트 가상 클래스 선택자의 종류 :
- 01 ) :link – 웹 문서에서 사용자가 방문하지 않았던 곳을 표시한다.
- 02 ) :visited – 웹 문서에서 사용자가 방문한 곳을 표시한다.
- 03 ) :active – 웹 문서에서 사용자가 링크를 클릭하는 순간을 사용한다.
- 04 ) :hover – 웹 문서에서 사용자가 마우스를 올려 놓는 순간을 표시한다.
- 05 ) :focus – 웹 문서에서 해당 요소에 초점이 맞추어졌을 때 적용된다.
- 01 ~ 03까지는 <a>태그에 적용되며, 04는 마우스 이벤트, 05는 입력에 해당한다.
- 2 ) 구조적 가상 클래스 선택자
- 해당 웹 문서의 구조에 따라서 스타일 시트를 적용한다.
- 01 ) 태그명:nth-last-child – 뒤에서 지정된 순서와 일치하는 태그가 태그명과 일치하면 선택하여 스타일을 지정한다. ( 태그명과 다른 태그도 순서에 포함한다. )
- 02 ) 태그명:nth-child – 앞에서부터 지정된 순서와 일치하는 태그가 태그명과 일치하면 선택하여 스타일을 지정한다. ( 태그명과 다른 태그도 순서에 포함한다. )
- 03 ) 태그명:nth-of-type – 해당 태그만 순서에 포함하여, 앞에서부터 순서가 일치하는 태그를 선택한다.
- 04 ) 태그명:nth-last-of-type – 해당 태그만 순서에 포함하여, 뒤에서부터 순서가 일치하는 태그를 선택한다.
- 3 ) UI 요소 상태 가상 클래스 선택자
- 입력양식을 만드는 UI 요소의 상태에 따라서 선택할 수 있는 선택자이다.
- 01 ) 태그명::before – 해당 태그의 시작점에 콘텐츠를 추가할 수 있다.
- 02 ) 태그명::after – 해당 태그의 마지막 시점에 콘텐츠를 추가할 수 있다.
[ 1. CSS 중복 정의 (**) ]
<!DOCTYPE html>
<html lang="ko">
<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>CSS 중복정의</title>
<link rel="stylesheet" href="./css/02.css_override.css">
<!-- 외부 스타일 시트를 적용한 결과, 내부 스타일 시트에서 적용하지 않은 배경색은 외부 스타일 시트에서 적용한 yellow가 적용되지만(*) -->
<!-- 중복된 글자색은 내부 스타일 시트의 가장 마지막에 적용한 빨간색이 적용된다. (**) -->
<!-- 즉, 적용한 순서대로 적용되기 때문에 중복정의될 경우, 가장 마지막에 적용된 스타일 시트가 적용된다. (***) -->
<!-- 외부 스타일 시트가 마지막에 적용된다면 외부 스타일 시트에서 정의한 내용이 적용된다. (****) -->
<!-- 더 자세한 적용 순서를 알아보기 위해서는 개발자 도구를 통해서 스타일이 적용된 순서를 알아볼 수 있다. -->
<style>
p{
color: blue;
}
p{
color: yellow;
}
p{
color: red;
}
/* 확인한 결과, 내부 스타일 시트에서 중복정의한 경우에는 가장 마지막에 적용한 color : red가 적용되어있는 것을 알 수 있다. (**) */
</style>
</head>
<body>
<div id="wrapper" style="width: 1440px;">
<p>CSS가 종복 정의된 경우 어떤 것이 적용될까??</p>
</div>
<!-- vh : Viewport Height , vw : Viewport width -->
</body>
</html>@charset "utf8";
p{
color: green;
background-color: yellow;
}[ 2. CSS 중복정의 - ( !important ) ]
<!DOCTYPE html>
<html lang="ko">
<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>
p{
color: blue !important;
/* 속성값에 !important를 붙이면 순서에 상관없이 이 속성값을 적용하게 된다. - 최후수단으로 사용해야 한다. (*) */
}
p{
color: yellow;
}
p{
color: red;
}
</style>
<!-- 외부 스타일 시트를 정의하는 위치가 중요하다. -->
<link rel="stylesheet" href="./css/02.css_override.css">
</head>
<body>
<p>CSS가 중복 정의된 경우 어떤 것이 적용될까??</p>
</body>
</html>[ 3. CSS 선택자 - 전체 선택자 (*) ]
<!DOCTYPE html>
<html lang="ko">
<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>CSS 선택자</title>
<style>
/* 1. 전체 선택자 */
*{
color: red;
background-color: yellow;
font-size: 13px;
}
/* 전체 선택자의 범위는 body뿐만이 아니라 html태그도 스타일링하지만, 렌더링되는 부분이 body이기에 body만 보인다. */
</style>
</head>
<body>
<h1>Universal Selector</h1>
<h2>모두 같은 색상, 같은 크기</h2>
<h3>전체적으로 동시에 스타일 적용</h3>
<!-- 제목 태그는 기본적으로 굵은 글씨로 출력된다. -->
<p>모든 데이터에 적용</p>
</body>
</html>[ 4. 타입 선택자 (*) ]
<!DOCTYPE html>
<html lang="ko">
<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>타입 선택자</title>
<style>
h1{
background-color: yellow;
}
h2{
background-color: green;
}
h3{
background-color: pink;
}
p{
color: red;
}
</style>
</head>
<body>
<h1>Type Selector h1</h1>
<h2>타입 선택자 h2</h2>
<h3>타입 선택자 h3</h3>
<!-- 제목 태그는 기본적으로 굵은 글씨로 출력된다. -->
<!-- 하지만 실제 UI를 만들 때에는 타입을 다양하고 많이 사용하기 때문에, 타입 선택자는 잘 사용하지 않는 것이 좋다. -->
<p>해당 태그타입 데이터에 적용</p>
</body>
</html>[ 5. 클래스 선택자 (**) ]
<!DOCTYPE html>
<html lang="ko">
<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>클래스 선택자</title>
<style>
.class1{
color: blue;
background-color: yellow;
}
.class2{
color: red;
background-color: rgb(59, 196, 59);
}
/* class는 중복이 가능하기 때문에, 클래스 이름이 같으면 다중적용이 가능하다. */
h3.class1{
color: navy;
background-color: pink;
}
/* 타입명.클래스명을 통해서 class명이 class1인 태그 중에서 태그타입이 h3인 태그에만 적용하게 하였다. (***) */
/* 이처럼 선택자는 다른 선택자와 조합하여 사용할 수 있다. (***) */
</style>
</head>
<body>
<h1 class="class1">class 1입니다.</h1>
<p class="class1">class 1입니다.</p>
<h1 class="class2">class 2입니다.</h1>
<p class="class2">class 2입니다.</p>
<h3 class="class1">Element+class Selector</h3>
</body>
</html>[ 6. id 선택자 (**) ]
<!DOCTYPE html>
<html lang="ko">
<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>id 선택자</title>
<style>
#id1{
color: blue;
background-color: pink;
}
#id2{
color: blue;
background-color: yellow;
}
h2#id1{
color: red;
background-color: green;
}
/* 선택자를 조합해서 사용하는 것이 좋다.(***) */
</style>
</head>
<body>
<h1 id="id1">ID1 선택자</h1>
<p id="id1">ID1 선택자</p>
<h1 id="id2">ID2 선택자</h1>
<p id="id2">ID1 선택자</p>
<h2 id="id1">Element+ID Selctor</h2>
<!-- (h1[id=id]+p[id=id])*2+h2[id=id1] -->
</body>
</html>[ 7. 속성 선택자 (****) ]
<!DOCTYPE html>
<html lang="ko">
<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>속성 선택자</title>
<style>
/* 속성 선택자 : 대괄호기호([속성] / [속성=값]) 속성에 일치하는 요소를 선택해 적용한다. */
h1[text]{
color: red;
background-color: gray;
}
p[text]{
color: blue;
background-color: yellow;
}
h1[text="attr3"]{
color: green;
background-color: pink;
}
[text=attr2]{
color: black;
background-color: aqua;
}
/* 이와 같이 [속성=속성값] / [속성]만으로는 사용할 수 없기에, 다른 선택자와 결합하여 사용해야 한다. (***) */
</style>
</head>
<body>
<h1>사용자 정의 속성 선택자 사용하기</h1>
<h1 text="attr1">text 속성 이름 선택자</h1>
<p text="attr2">text 속성 이름 선택자</p>
<h1 text="attr3">속성과 속성값 선택자</h1>
<p>문단태그</p>
</body>
</html>[ 8. 속성 선택자 (*******) ]
<!DOCTYPE html>
<html lang="ko">
<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>속성 선택자 2(***)</title>
<style>
p[text]{
color: red;
}
/* text속성을 지닌 모든 p태그가 붉은 글씨로 출력 */
p[text="red"]{
color: yellow;
background-color: purple;
}
/* p태그 중에 text속성의 속성값으로 red를 지닌 p태그의 글씨와 배경색을 지정하였다. */
p[text~="bb"]{
color: yellow;
background-color: green;
}
/* 공백으로 들어간 속성값 목록 중 하나라도 해당 속성과 속성값에 해당한다면 적용한다. */
/* 해당 속성과 속성값이 공백으로 구분된 p태그는 3번째 p태그이다. */
p[text|="a1"]{
color: yellow;
background-color: blue;
}
/* 속성값이 해당 속성값과 같거나, 주어진 속성값으로 시작하고 ' - ' 기호로 이어져 있는 태그에 적용한다. */
p[text^="img"]{
color: yellow;
background-color: red;
}
/* 속성값이 주어진 속성값으로 시작하는 태그에 적용한다. ( 속성값이 img로 시작하는 태그에 적용한다. ) */
p[text$=".png"]{
color: yellow;
background: gray;
}
/* 속성값이 주어진 속성값으로 끝나는 태그에 적용한다. ( 속성값이 .png로 끝나는 태그에 적용한다. ) */
p[text*="ong"]{
color: yellow;
background-color: pink;
}
/* 속성값 중에 해당 속성값이 들어가있는 태그에 적용된다. ( 속성값으로 ong가 들어가있는 태그에 적용한다. ) */
</style>
</head>
<body>
<p text="hello">모든 텍스트</p>
<p text="red">텍스트 매칭 속성</p>
<p text="aa bb cc">리스트 매칭 속성</p>
<p text="a1-a2-a3">범위 텍스트 매칭 속성</p>
<p text="img/pic.jpg">텍스트 시작 매칭 속성</p>
<p text="img/pic.png">텍스트 끝 매칭 속성</p>
<p text="Seongyong Hong">텍스트 패턴 매칭 속성</p>
</body>
</html>[ 9. 이벤트 가상 클래스 선택자 (*****) ]
<!DOCTYPE html>
<html lang="ko">
<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>이벤트 가상 선택자(****)</title>
<style>
/* 가상 클래스 */
/* 1. 앵커 태그 이벤트 */
a:link{
color: blue;
text-decoration: underline;
}
/* 링크가 만들어질 때, 링크를 파란색 글자로 나타내고 밑줄을 그어준다. */
a:active{
background-color: yellow;
}
/* 링크를 클릭하는 그 순간 링크의 배경색을 노란색으로 표시해 준다. */
a:visited{
color: red;
}
/* 사용자가 링크를 방문하였으면, 해당 링크를 붉은 글자로 표시한다. */
/* 2. 마우스 이벤트 */
a:hover{
text-decoration: overline;
}
/* 사용자가 링크에 마우스 포인터를 올려 놓았을 때, 위로 밑줄이 이동하게 하였다. */
h1:hover{
text-decoration: overline;
}
/* 앵커 태그 뿐만이 아니라, 다른 태그에도 사용이 가능하며 블록 요소일 경우 호버링되는 범위가 다를 수 있다. */
/* 가상 클래스 */
div.d1{
border: 1px dashed red;
width: 400px;
padding: 5px;
}
div.d1:hover{
background-color: yellow;
}
div.d2{
border: 1px dashed green;
width: 400px;
padding: 5px;
}
div.d2:hover{
background-color: greenyellow;
}
</style>
</head>
<body>
<h1>Pseudo(가상 클래스 선택자)</h1>
<p><a href="https://www.naver.com/" target="_blank">네이버 방문</a> :
<strong>마우스 이벤트</strong>에 따른 링크의 변화를 잘 보기</p>
<!-- em태그는 강조하는 태그이다. -->
<div class="d1">
<h3>가상 클래스 1 영역</h3>
<strong>마우스 이벤트</strong>에 따른 링크의 변화를 잘 보기
</div>
<div class="d2">
<h3>가상 클래스 2 영역</h3>
<strong>마우스 이벤트</strong>에 따른 링크의 변화를 잘 보기
</div>
</body>
</html>[ 10. 구조적 가상 클래스 선택자 (*****) ]
<!DOCTYPE html>
<html lang="ko">
<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>구조적 가상 클래스 선택자 (****)</title>
<!-- 문서의 구조에 따라서 스타일 시트를 적용한다. -->
<style>
/* 1. 첫번째 태그의 텍스트 색상 - 여러 태그가 존재할때, 첫번째 태그가 h4이면 첫번째 태그에 적용한다. */
h4:first-child{
color: blue;
font-size: 20px;
}
/* child의 경우, h4 태그만 카운트하는 것이 아니라 모든 태그를 차례대로 카운트하게 되는데 이때 h1태그가 가장 먼저 작성되면 (***) */
/* h4 태그가 첫번째 child가 아닌 h1이 첫번째 child이기 때문에 적용되지 못한다. (***) */
h4:first-of-type{
color: rgb(212, 68, 75);
font-size: 20px;
}
/* first-of-type의 경우, 해당 타입의 태그만 카운트하기 때문에 스타일이 적용될 수 있다. (****) */
/* h4태그가 여러개 존재할 때, h4태그의 첫번째 태그를 의미한다. */
/* -child가 있으면, of-type도 존재한다. */
/* 2. 마지막 태그의 텍스트 색상 */
h4:last-child{
color: red;
font-size: 20px;
}
/* 라이브 서버가 자동으로 자바스크립트를 마지막에 작성해 주기 때문에, last-child가 자바스크립트 태그가 되어버리기 때문에 h4에 적용되지 못한다. */
/* 라이브 서버가 아닌 방법으로 브라우저를 연다면 h4에 적용되어 출력된다. */
h4:last-of-type{
color: red;
font-size: 20px;
}
/* of-type는 다른 태그가 존재하든 말든 해당 타입에만 카운팅하여 적용한다.(**) */
/* 그렇기 때문에 -chid가 아닌 -of-type을 자주 사용한다. */
/* 3. 홀수 태그 */
h4:nth-child(2n+1){
background-color: green;
}
/* 모든 태그를 카운팅해서 홀수인 태그에만 적용 하지만, 이 중 h4인 태그에만 적용한다. */
h4:nth-of-type(2n+1){
background-color: aquamarine;
}
/* h4태그만 카운팅하여 홀수번째인 태그에만 스타일을 적용한다. */
/* 4. 짝수 태그 */
h4:nth-child(2n){
background-color: bisque;
}
/* 모든 태그를 카운팅해서 짝수인 태그에만 적용 하지만, 이 중 h4인 태그에만 적용한다. */
h4:nth-of-type(2n){
background-color: blueviolet;
}
/* h4태그만 카운팅하여 짝수번째인 태그에만 스타일을 적용한다. */
h4:nth-last-of-type(2n){
background-color: yellow;
}
/* 끝태그부터 태그를 카운팅하여, 짝수인 태그에 배경색을 노랑색으로 스타일을 적용한다. */
h4:only-child{
color: black;
background-color: brown;
}
/* h4가 오직 하나의 태그만 존재한다면, 이 스타일을 적용한다. (다른 태그도 존재하면 안된다.) */
</style>
</head>
<body>
<!-- h4*11 -->
<h1>과연 스타일이 적용될까??</h1>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
</body>
</html>[ 11. UI 요소 상태 가상 클래스 선택자 + 기타 가상 클래스 선택자 (******) ]
<!DOCTYPE html>
<html lang="ko">
<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>UI요소 상태 가상클래스 선택자 + 기타 가상 클래스 선택자(***)</title>
<style>
div{
color: white;
}
h2:first-letter{
font-size: 30px;
color: red;
text-transform: uppercase;
}
/* h2 태그의 첫번째 문자를 30px 사이즈의 대문자로 붉은 글씨로 표시한다. */
h3::first-line{
color: blue;
}
/* 첫번째 문장을 파란색 글자로 표시한다. */
input:focus{
background-color: rgb(231, 130, 130);
}
/* 입력창에 입력을 받을 준비가 되었을 때 스타일을 적용한다. (커서가 입력창에 갔을 때 적용) */
input:checked + div.d1{
background-color: gray;
}
/* 이 경우 선택자가 +로 연결되어 있는데, 이 의미는 input이 체크되었으면 div태그 중 클래스가 d1인 태그의 배경을 회색으로 적용하라는 의미이다. (***) */
input:checked + div.d2{
background-color: black;
}
h1::before{
content: '<<<BEFORE>>>';
color: red;
font-weight: bold;
font-size: 2em;
}
h1::before{
content: '';
display: inline-block;
/* 인라인요소이기에 영역을 차지하지 않으면서, 동시에 사이즈를 조절할 수 있다. */
width: 200px;
height: 200px;
background-color: aquamarine;
border: 5px outset beige;
border-radius: 50%;
}
/* before은 h1의 콘텐츠에 추가되는 것처럼 보이지만, 실제로는 CSS에서 더한것 뿐이기에 before을 하나의 태그에 N개 이상 사용해도 마지막의 것만 적용된다. */
h1::after{
content: '<<<AFTER>>>';
color: lawngreen;
font-weight: bold;
font-size: 2em;
/* 글자크기를 기본 글자크기의 2베로 출력 */
}
/* 가상엘리먼트 선택자 before / agter는 콘텐츠를 추가할 수 있도록 content:를 제공하는데, */
/* before은 h1태그의 콘텐츠 바로 앞에 콘텐츠를 추가하고, after은 h1태그의 콘덴츠 가장 마지막에 콘텐츠를 추가할 수 있다. */
</style>
</head>
<body>
<h2>UI 요소 상태 가상클래스 선택자</h2>
<h3>문제 ) 대한민국의 수도는?</h3>
<p>정답 작성 : <input type="text"></p>
<h2>answer</h2>
힌트 보기 : <input type="checkbox">
<div class="d1">
남대문이 있는 곳이죠
</div>
정답 보기 : <input type="checkbox">
<div class="d2">
서울
</div>
<p></p>
<h1>가상 엘리먼트 선택자</h1>
</body>
</html>
728x90
'KH 정보교육원 [ Java ]' 카테고리의 다른 글
| KH 61일차 - CSS 기본 다지기 7 ( 그림자 / position / 레이아웃 ) (***) (0) | 2022.05.24 |
|---|---|
| KH 60일차 - CSS 기본 다지기 6 ( 선택자 및 박스모델 ) (*****) (0) | 2022.05.23 |
| KH 58일차 - CSS 기본다지기 4 (***) (0) | 2022.05.19 |
| KH 57일차 - CSS 기본 다지기3 (0) | 2022.05.18 |
| KH 56일차 - CSS 기본 다지기 2 (***) (0) | 2022.05.17 |
댓글