웹 시작 (2)
입문
CSS는 웹 사이트의 텍스트, 프레임워크, 배경 등 외관과 설정을 지정하는 데 사용되는 언어입니다.처음에는'CSS가 외관을 바꿀 수 있다'는 것을 인식하면 된다.CSS는 HTML과 함께 사용됩니다.참고로 CSS는 Cascading Style Seets의 약자입니다.
작법
CSS를 사용하여 스타일을 지정할 때 먼저 모양을 변경할 위치를 결정합니다.
sample.cssp { font-size : 40px; }
CSS의 기본 쓰기 방법은 선택기 {속성 이름:값;}입니다.의 구조.선택기는 변경할 요소의 이름을 지정합니다.위의 예에서 p원소입니다.속성 이름 스타일 유형을 지정합니다.속성은 변경할 스타일 유형입니다.예는 문자의 크기이다.값은 속성을 변경하는 방법을 지정합니다.위의 예는 40px입니다.
여러 속성을 한 번에 지정할 수도 있습니다.이 때 줄을 바꾸어도 스타일에 영향을 주지 않습니다.코드가 쉽게 보이기 때문에 개인적으로 줄바꾸기를 추천합니다.
sample.css/* 改行しない*/
p { font-size : 30px; color: red; height : 80px; }
/*改行した*/
p {
font-size: 30px;
color: red;
height: 80px;
}
기본 속성 및 사용 예
기본 속성 목록
속성
설명
width
너비 지정
height
높이 지정
color
문자 색상 지정
background
배경 관계 통합 지정
background-color
배경색 지정
margin
요소 외부의 간격(예: 여백) 지정하기
padding
요소의 간격(예: 여백) 지정하기
font
글꼴 관계 통일 지정
font-size
글꼴 크기 지정(문자 크기)
font-family
글꼴 유형 지정
float
원소를 좌우로 가까이
사용 예
다음 샘플.html을 준비했습니다.(비교하기 쉽도록 배경색에 노란색을 미리 지정합니다.)
sample.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sample</title>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<p>こんにちは！</p>
</body>
</html>
다음 CSS를 이 웹 페이지에 적용합니다.
sample.css/*背景を黄色、横幅を100px、高さを30pxにして、padding,marginを100px加える*/
p {
width: 100px;
height: 30px;
padding: 100px;
margin: 100px;
background-color: yellow;
}
웹 페이지가 변경되었습니다!
여기서'margin'과'padding'의 차이를 가볍게 만져보세요.
위의 속성 일람표에도 "margin"은 요소 밖에 있고, "padding"은 요소 안에 공백을 추가한다고 쓰여 있다.아래 그림 같은 인상.
다음은 플로트를 적용해보겠습니다.
sample.css/*p要素を右に寄せ、さらに背景を青色に変更*/
p {
width: 100px;
height: 30px;
padding: 100px;
margin: 100px;
background-color: yellow;
/*要素を右に配置*/
float: right;
}
요소가 오른쪽으로 이동했습니다!
총결산
CSS를 사용하여 스타일을 지정할 때 먼저 모양을 변경할 위치를 결정합니다.
sample.css
p { font-size : 40px; }
여러 속성을 한 번에 지정할 수도 있습니다.이 때 줄을 바꾸어도 스타일에 영향을 주지 않습니다.코드가 쉽게 보이기 때문에 개인적으로 줄바꾸기를 추천합니다.
sample.css
/* 改行しない*/
p { font-size : 30px; color: red; height : 80px; }
/*改行した*/
p {
font-size: 30px;
color: red;
height: 80px;
}
기본 속성 및 사용 예
기본 속성 목록
속성
설명
width
너비 지정
height
높이 지정
color
문자 색상 지정
background
배경 관계 통합 지정
background-color
배경색 지정
margin
요소 외부의 간격(예: 여백) 지정하기
padding
요소의 간격(예: 여백) 지정하기
font
글꼴 관계 통일 지정
font-size
글꼴 크기 지정(문자 크기)
font-family
글꼴 유형 지정
float
원소를 좌우로 가까이
사용 예
다음 샘플.html을 준비했습니다.(비교하기 쉽도록 배경색에 노란색을 미리 지정합니다.)
sample.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sample</title>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<p>こんにちは！</p>
</body>
</html>
다음 CSS를 이 웹 페이지에 적용합니다.
sample.css/*背景を黄色、横幅を100px、高さを30pxにして、padding,marginを100px加える*/
p {
width: 100px;
height: 30px;
padding: 100px;
margin: 100px;
background-color: yellow;
}
웹 페이지가 변경되었습니다!
여기서'margin'과'padding'의 차이를 가볍게 만져보세요.
위의 속성 일람표에도 "margin"은 요소 밖에 있고, "padding"은 요소 안에 공백을 추가한다고 쓰여 있다.아래 그림 같은 인상.
다음은 플로트를 적용해보겠습니다.
sample.css/*p要素を右に寄せ、さらに背景を青色に変更*/
p {
width: 100px;
height: 30px;
padding: 100px;
margin: 100px;
background-color: yellow;
/*要素を右に配置*/
float: right;
}
요소가 오른쪽으로 이동했습니다!
총결산
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sample</title>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<p>こんにちは！</p>
</body>
</html>
/*背景を黄色、横幅を100px、高さを30pxにして、padding,marginを100px加える*/
p {
width: 100px;
height: 30px;
padding: 100px;
margin: 100px;
background-color: yellow;
}
/*p要素を右に寄せ、さらに背景を青色に変更*/
p {
width: 100px;
height: 30px;
padding: 100px;
margin: 100px;
background-color: yellow;
/*要素を右に配置*/
float: right;
}
Reference
이 문제에 관하여(웹 시작 (2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Teasegasugoi/items/d830e16742ea1a50096c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
