CSS 정보
CSS란? ?
마지막으로 마크 업한 HTML이 브라우저에 표시되는 문자이지만, 그것만으로는 짜증이 없습니다. ?
여기서 사용하는 것이 CSS입니다! 😊
화장 같은 느낌이네요! 😳
그럼 쓰는 법을 봅시다 👍
CSS 작성 방법
index.html<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="css/style.css">
<title>CSSの書き方</title>
</head>
<body>
<section>
<h1>CSSについて</h1>
</section>
</body>
</html>
style.cssh1 {
color: black;
font-size: 40px;
background-color: red;
}
그리고 설명합니다!
요점은 HTML의 head 태그 안에 링크 태그를 잊어 버리지 않는 것입니다 👍
그리고 CSS 폴더를 만들고 그 안에 CSS 파일을 만드는 것을 잊지 마십시오 👌
이것을 브라우저에 표시하면 이렇게 됩니다!
↓
잠깐, h1 오랫동안 생각한다면 HTML에는 인라인 요소와 블록 요소가있었습니다 😁
htps : // 이 m/아카리_0618/이고 ms/f3b6892932cb6080c905
그 전에 기사를 봐!
너무 길다고 생각했을 경우는 이렇게 입력해 폭을 지정해 버립니다!
style.cssh1 {
color: black;
font-size: 40px;
background-color: red;
width: 40px;
height: 65px;
}
(width)가 붙어 있네요!
40%는 적당하게 세트 했습니다만 지정의 방법에는 3개 정도 있습니다.
①자동
초기값. 즉, 첫 번째 화면으로 표시됩니다.
②%
이것은 부모 요소의 폭에 따라 달라집니다.
③px
여기는 부모 요소에 관계없이 지정할 수 있습니다.
덧붙여서 당연하지만 부모 요소보다 크게 지정할 수는 없습니다.
그리고 끔찍한 것 같습니다만, 인라인 요소에는 폭 지정할 수 없기 때문에 반응하지 않는 경우는 요소의 확인을 해 봅시다☺️
(height)도 추가되었습니다!
이쪽은 높이의 설정이 됩니다. 여기에서는 배경색의 높이를 설정합니다.
높이 지정에는 주로 픽셀(px)로 지정합니다.
↓
이렇게 되면 OK입니다 👍
문자를 중간으로 하고 싶기 때문에 다음은 그쪽을 해 가고 싶습니다!
아마 초보자가 넘어지는 padding과 margin 이군요 🥲
(괜찮아, 나도 그래)
Reference
이 문제에 관하여(CSS 정보), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/akari_0618/items/1baaebc0a4946d2fa9a6
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="css/style.css">
<title>CSSの書き方</title>
</head>
<body>
<section>
<h1>CSSについて</h1>
</section>
</body>
</html>
h1 {
color: black;
font-size: 40px;
background-color: red;
}
h1 {
color: black;
font-size: 40px;
background-color: red;
width: 40px;
height: 65px;
}
Reference
이 문제에 관하여(CSS 정보), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/akari_0618/items/1baaebc0a4946d2fa9a6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
