반응형
CSS란?
밋밋한 HTML에 디자인을 꾸며주는 언어입니다.
선택자(Selector)
선택자는 스타일을 적용할 대상입니다.
태그, id, class 등을 선택 할 수 있습니다.
/* 태그를 선택자로 했을 때 */
p {
color: red;
}
/* 태그를 id로 했을 때 */
#title {
color: blue;
}
/* 태그를 class로 했을 때 */
.item {
color: pink;
}id는 한요소에만 적용되며 class는 class가 적용된 모든 요소에게 적용됩니다.
<html>
<head>
<style>
/* 선택자 p태그를 선택 : 모든 p태그에 적용*/
p {
color: red;
}
/* id를 선택자로 한 경우 : id를 가지고있는 한가지 요소에만 적용*/
#id-test {
color: blue;
}
/* class를 선택자로 한 경우 : class 가 적용된 모든 요소에게 적용*/
.class-test {
color: pink;
}
</style>
</head>
<body>
<p>Hello world</p>
<p>my officelab</p>
<div id="id-test">id 적용 요소</div>
<div class="class-test">class 적용 요소</div>
</body>
</html>
복합선택자
복합선택자는 하위선택자 (Descendant Selector)와 자식 선택자 (Child selector)이 있다.
<html>
<head>
<style>
/* 하위 선택자 */
#item-list p {
color: red;
}
/* 자식 선택자 */
#item-list > p {
color: blue;
}
</style>
</head>
<body>
<div id="item-list">
<p>자식 선택자 아이템1</p>
<p>자식 선택자 아이템2</p>
<div>
<p>하위 선택자 아이템1</p>
<p>하위 선택자 아이템2</p>
</div>
</div>
</body>
</html>
반응형
크기 태그
width(가로) Height(높이)
크기는 px,와 %값으로 설정할 수 있다.
#item {
width: 100px; /* 웹에서 px은 크기의 기본 단위입니다 */
height: 10%; /* 웹 크기 대비 10%를 차지합니다 */
}
여백
margin : 바깥여백
padding : 내부여백
#item {
margin: 10px; /*상하좌우 모든여백 10px씩 적용*/
margin-right: 30px; /*오른쪽 여백 30px 적용*/
padding: 10 20px 30 40; /*순서대로 상 우 좌 하에 내부여백 적용*/
}
테두리 : border
순서대로 너비 ,스타일 ,색상 적용
#item {
border: 10px solid #ff0000 /*너비 : 10px, 스타일 : 실선, 색상 :레드*/
}
색상
backgound-color : 배경 색상
color : 폰트색상
#item {
color: red;
background-color: red
}
폰트 사이즈, 크기
font-size : 텍스트 크기(px)
font-weight : 텍스트 굵기 (숫자만 입력)
font-style (italic) : 텍스트 기울임
font-famliy : 글씨체 설정
#item {
font-size: 15px;
font-weight: 20;
font-style: italic;
font-family: "Nanum Gothic";
}
반응형
'퍼블리싱 > html, css, javascript' 카테고리의 다른 글
| node.js 윈도우 설치 및 설치확인방법 React 시작하기 (0) | 2023.10.17 |
|---|---|
| [css] 쇼핑몰 테이블(border)이 이미지에 가려 안보일때 overflow 설정 (0) | 2023.10.13 |
| 네이버를 참조한 기본 쇼핑몰 상품 레이아웃 (두번째) (0) | 2023.08.09 |
| 네이버를 참조한 기본 쇼핑몰 레이아웃 (첫번째) (0) | 2023.07.31 |
| HTML 핵심 태그 기본 문법 (0) | 2023.07.25 |