css 기본_1 (기본css, 선택자)
WEB 2021. 5. 3. 09:30CSS; 단순한 웹페이지를 예쁘게 스타일링해보자! (Casacding Style Sheets)
- 정보표현(HTML)(뼈대/틀) + 디자인(CSS)(옷)로 구성한 경우 정보를 포함하는 내용을 건드리지 않고 디자인만 변경할 수 있음.(인형옷입히기로 생각해보면 됨)
: 정보와 디자의 분리 / 유지보수 편의 / 효율적으로 재사용 가능
웹페이지 : HTML(내용) + CSS(디자인) + Javascript(동적요소, 기능 부여)
Selector(선택자) , propery(스타일속성, value(속성)
- 선택자: 내가 속성을 부여하고 싶은 하나의 주체
- CSS는 head 영역에 사용됨. 보여질 필요가 없으며 단지 속성만 부여하는 것이기 때문에 head영역에 작성하도록 함.
- Head 영역에 <Style></style> 태그를 입력한 후 그 안에 작성하도록 함.
- 바디에 여러개의 태그가 입력되어있는 경우 개별적으로 속성을 부여하는 것 보다 style영역에서 css를 이용해 속성을 부여하는 것이 편리하고 효율적임.
<폰트속성css>
- Font: 요소가 화면에 보이는 방식 지정.
- font-family 부분에 여러개의 글씨체가 써있는 경우는 사용자의 컴퓨터에 글꼴설치가 안되어있을 경우 차선책을 나타냄.
<선택자 종류>
- 전체선택자 : *로 표시되며 웹 문서 내 모든 요소 선택하여 스타일 적용
- 태그(타입)선택자: 요소를 선택하여 스타일 적용 ; 기존에 배웠던 것
- 아이디선택자 : # 기호로 표시되며 특정한 요소 선택, HTML구조의 공간분할을 적용할 때, 고유값을 가지기때문에 중복으로 지정해주지 못함. 유일한 값. 페이지내에서 아이디나 로고같은것을 지정할 때 사용.(디자인적인 요소로는 중복이 됨. 하지만 JS에서 페이지 오류가 발생함. )
- 클래스선택자 : 마침표(.)기호로 표시되며 특정한 요소 선택, 공통되는 스타일을 적용할 경우, 속성을 공유해서 중복이 가능함
- 계층선택자(Tree 구조)
- 자식은 자손안에 포함되어있어서 자손이라고 표현해도 됨.
(예제)
Li~li>>첫번째 li뒤에 있는 모든 li를 가져온다
자식관계인지 형제관계인지 확인하는 방법: 태그 안에 있는지(자식) 밖에 있는지(형제)로 판단
<그룹선택자> : 콤마(,)를 기준으로 여러가지 선택자를 섞어서 사용할 수 있음.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color : blue;
}
h2{
color : yellow;
}
</style>
</head>
<body>
<h1>안녕하세요</h1>
<h2>Hello</h2>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<p>, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-family: "굴림, 돋음, 나눔고딕";
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<p>안녕하세요</p>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
color:blue;
}
/*계층선택자(자식선택자) 사용하여 추가적인 코드 감소*/
ol li{
color : red;
}
</style>
</head>
<body>
<details><!--화살표를 누르면 아래 리스트가 튀어나오는 details 태그-->
<!--summary 태그; 제목과 같은 역할.리스트의 설명. details안에 따라옴-->
<summary>올바른 개발자 생활</summary>
<ul>
<li>쉬는 시간에 5분정도 먼 곳을 바라본다.</li>
<li>1시간마다 스트레칭을 한다.</li>
<li>거북목이 되지 않도록 목을 편다.</li>
</ul>
</details>
<strong>연수생 수칙</strong>
<ol>
<li class="rules">지각하지 않기</li>
<li class="rules">결석하지 않기</li>
<span>(불가피할 땐 꼭 담당연구원에게 미리 말하기)</span>
<li class="rules">복습하기</li>
</ol>
</body>
</html
'WEB' 카테고리의 다른 글
| 웹크롤링(web crawling) 입문,기본 (0) | 2021.05.03 |
|---|---|
| css 기본_2 (stylesheet 명시도, 공간분할 기타 등..) (0) | 2021.05.03 |
| html 기본 태그(tag)_2 (0) | 2021.05.01 |
| html 기본 태그(tag)_1 (0) | 2021.05.01 |
| html 기본 (0) | 2021.05.01 |
