CSS 기초

CSS 기초

2023. 2. 8. 16:27ㆍCSS

html에 작성하지만 CSS 문법임을 인지할 것.

CSS 태그 작성 위치는 <head> 태그 안 <title> 태그 바로 아래 작성

CSS 내용은 style 태그 안에 작성 (이 안에 작성되는 내용들은 CSS 문법임!!!!!!)

CSS 주석 : /* */

ctrl + shift + /

디자인을 변경하려면 우선적으로 디자인을 변경할 태그를 선택해야 한다.

즉, 디자인을 변경할 때는 먼저 디자인을 적용할 태그를 선택할 수 있어야 함.

이러한 태그를 선택하는 방법을 선택자라고 한다. (선택을 당하는 태그가 선택자임)

ex) h1 태그 글자의 색을 바꿔줄 때 h1이 선택자가 됨.

h1{

color: red;

}

↑ h1태그를 선택한 것.

h1이 선택자임.

선택자는 하나일 수도 있고 여러개일 수도 있다.

태그 자체를 선택하는 것 >>

태그선택자 : 해당 문서 안의 모든 동일 태그에 디자인 적용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
/* 디자인을 변경하려면 우선적으로 디자인을 변경할 태그를 선택해야 한다. */
/* 디자인을 변경할 때는 먼저 디자인을 적용할 태그를 선택할 수 있어야 함. */
/* 이러한 태그를 선택하는 방법을 선택자라고 한다. */
h1{
color: purple; /* 속성: 속성값 , 컬러: 글자색. */
border: 3px solid black; /* 테두리 1px(굵기) 실선(선스타일) 검은색 */
}
h3{
color: blue;
}
</style>
</head>
<body>
<h1>Hello~CSS~</h1>
<h1>Hello~CSS~</h1>
<h3>Hello~HTML</h3>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* id 선택자 */
/* id 속성값이 firstDiv인 태그를 선택 */
#firstDiv{
color: red;
}
/* class 선택자 */
.blueDiv{
color: blue;
}
</style>
</head>
<body>
<div id="firstDiv">첫번째</div>
<div class="blueDiv">두번째</div>
<div class="blueDiv">세번째</div>
</body>
</html>

id 선택자 :

div 태그를 선택하면 div 모두 선택 되고

#firstDiv{

color: red;

}

id 속성값이 firstDiv인 태그를 선택 가능 #이 id임 그 뒤는 id명(id명 변수처럼 자유)

id명 중복해서 쓰지 말 것!!

class 선택자 :

다수 중 몇개를 뽑아서 그 속성을 변경하고 싶을 때

class 속성이 blueDiv인 태그 선택 가능! .이 class임 그 뒤는 class명(자유)

클래스명은 중복 가능!

.blueDiv{

color: blue;

}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 자식 선택자 */
/* id속성이 div1인 태그의 자식 div 태그를 선택 */
#div1 > div{
background: green;
}
/* class가 div2인 태그의 자손 div 태그를 선택 */
.div2 div{
background: yellow;
}
</style>
</head>
<body>
<div>
<div id="div1">
<div>1</div>
<div>2</div>
</div>
<div class="div2">
<div>3
<div>3-1</div>
<div>3-2</div>
</div>
<div>4</div>
<div>5</div>
</div>
</div>
</body>
</html>

부모 태그 / 자식 태그가 존재함.

자식(바로 다음단계의) 선택자 :

#div1 > div{

}

#부모 태그 > 자식 태그

> : 자식을 나타내는 모양

자손 선택자(부모 태그 밑에 있는 모든 태그) :

.div2 div{

background: yellow;

}

.클래스 스페이스바 자손태그

ex) #aaa > .bb .cc{

}

아이디가 aaa인 부모 태그의 자식인 클래스 bb의 클래스 cc

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 특정 n번째 자식을 지정하는 선택자 */
/* ul 태그의 자식 중 첫번째 li태그 선택 */
ul > li:first-child{
font-size: 30px;
font-style: italic;
font-weight: bold;
}
ul > li:last-child {
color: olive;
}
ul > li:nth-child(2) {
border: 1px solid red;
}
#secondUL > li:nth-child(even) {
font-size: 10px;
}
</style>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
<ul id="secondUL">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</body>
</html>

특정 n번째(시작점 : 1) 자식을 지정하는 선택자 :

자식 태그가 많으면 몇번째 자식인지 알 수 있다

ul > li:first-child{

}

ul 태그의 자식 태그인 li 태그의 첫번째 자식 태그

마지막 태그 : last-child

그 외 n번째 자식 태그 선택 방법 : ()안에 n번째 숫자 넣어주면 됨.

ul > li:nth-child(2) {

border: 1px solid red;

}

짝수번째에 디자인을 변경하고 싶다면? ()에 even 홀수는 odd

#secondUL > li:nth-child(even) {

font-size: 10px;

}

hover 속성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div:hover{ /* hover는 선택한 태그에 마우스 올리면 디자인 적용 */
background-color: lime;
}
</style>
</head>
<body>
<div>div 태그입니다.</div>
</body>
</html>

'CSS' 카테고리의 다른 글

Scroll bar (0)	2023.04.27
div 태그 가로 배치 (0)	2023.03.07
폰트 변경 (0)	2023.02.23
실습 로그인창, 게시판, 회원가입창 만들기 (0)	2023.02.09
CSS기초2 (0)	2023.02.09

📚개발 복습 노트

📚개발 복습 노트

태그

최근글

댓글

공지사항

아카이브

'CSS' 카테고리의 다른 글

관련글

티스토리툴바