HTML ~ 클래스와 부모 - 자식 요소 ~
클래스란?
개인적인 이미지로서 클래스는 CSS를 위해서 붙이고 있는 것일까. 라고 해석하고 있습니다.
라고 하는 것도, h1 태그로 HTML이 마크 업 해도, CSS로 장식하려고 했을 때에 전부 장식되어 버리는군요.
이런 느낌이 되어 버립니다 🥲
그럼 class를 붙여 갑시다! !
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>プロフィール</title>
</head>
<body>
<h1 class="title">あいうえお</h1>
<h1>かきくけこ</h1>
</body>
</html>
style.css.title {
font-size: 45px;
background-color: aqua;
}
다음과 같이 되었습니다! !
↓
덧붙여서입니다만, class 붙이기에 결정이 있는 것일까. 라고 신경이 쓰였으므로 조사해 보았습니다!
결론적으로 특별한 결정은 없었습니다 😊
단지 자신뿐만 아니라 누가 봐도 알 수 있도록 명명하는 것이 원칙인 것 같습니다 👍
"무엇을 위한 것인가""그것에 의해 "무엇을 표현하는지"를 축으로 생각해 붙이는 것이 기본인 것 같습니다!
id 속성
요소에 고유한 이름을 지정할 때 사용합니다!
id 속성에 지정할 수 있는 값은 선두가 알파벳으로 시작해, 2 문자째 이후에는 알파벳, 숫자, 하이픈(-), 언더 스코어(_), 피리온(.), 콜론(:)을 사용할 수 있습니다. 대문자와 소문자는 구별됩니다.
HTML 내에서 중복 요소에 설명할 수 없습니다!
for 속성
for 속성은 레이블을 컨트롤과 명시적으로 연결하는 속성입니다.
속성 값에 컨트롤의 id 속성 값을 지정하여 해당 컨트롤에 레이블을 명시적으로 연결합니다!
for 속성을 사용하여 연결하면 라벨을 클릭하면 라벨에 해당하는 컨트롤로 포커스가 이동합니다.
부모 요소와 자식 요소
HTML에는 부모 요소와 자식 요소가 있습니다!
말로 나란히 해도 이해하기 어렵다고 생각하므로, 실천 형식으로 해 갑시다 😊
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>プロフィール</title>
</head>
<body>
<div class="container">
<h1 class="title">自己紹介</h1>
<ul class="pro">
<li>名前:</li>
<li>趣味:</li>
</ul>
</div>
</body>
</html>
HTML에서 설명하겠습니다.
불필요한 사람은 날려주세요.
div는 뭐라고 생각하신 분.
이 아이는 무엇이든 가게입니다! 핸디! 어렵게 말하면 범용성입니까(^_^;) 블록 레벨 요소입니다 👍( htps : // 이 m/아카리_0618/이고 ms/f3b6892932cb6080c905 )
그리고 div씨 옆에 있는 앞서 설명한 "class"! ! 이번은 "container"(컨테이너)라고 명명했습니다. 블록 요소로 표시 영역을 나타냅니다.
이것이 "부모 요소"입니다.
그리고 그 아래가 h1 태그 옆에 다시 클래스가 되어 있네요. 이번은 이 표시 에리어의 타이틀에 상당하기 때문에 "타이틀"이라고 명명했습니다. (만마얀w)
이 아이가 "자식 요소"입니다!
그래서, 또는 만나서 태그가 있습니다!
"ul"과 "li"태그! !
"ul"은 순서없는 목록 요소라고합니다! (목록 블록이야 ~하지만 특별한 순서는 없어 ~)
"li"는 목록의 항목이라고합니다! (아니 아니, 차례가 있으니까.)
느낌입니까 😂
그리고 잊지 말아야 할 것은 닫기 태그입니다.
이것은 제대로 붙여주세요 👍
브라우저 표시하면 이렇게 될 예정입니다!
Reference
이 문제에 관하여(HTML ~ 클래스와 부모 - 자식 요소 ~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/akari_0618/items/3526fd7b751d9387667d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 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>プロフィール</title>
</head>
<body>
<h1 class="title">あいうえお</h1>
<h1>かきくけこ</h1>
</body>
</html>
.title {
font-size: 45px;
background-color: aqua;
}
요소에 고유한 이름을 지정할 때 사용합니다!
id 속성에 지정할 수 있는 값은 선두가 알파벳으로 시작해, 2 문자째 이후에는 알파벳, 숫자, 하이픈(-), 언더 스코어(_), 피리온(.), 콜론(:)을 사용할 수 있습니다. 대문자와 소문자는 구별됩니다.
HTML 내에서 중복 요소에 설명할 수 없습니다!
for 속성
for 속성은 레이블을 컨트롤과 명시적으로 연결하는 속성입니다.
속성 값에 컨트롤의 id 속성 값을 지정하여 해당 컨트롤에 레이블을 명시적으로 연결합니다!
for 속성을 사용하여 연결하면 라벨을 클릭하면 라벨에 해당하는 컨트롤로 포커스가 이동합니다.
부모 요소와 자식 요소
HTML에는 부모 요소와 자식 요소가 있습니다!
말로 나란히 해도 이해하기 어렵다고 생각하므로, 실천 형식으로 해 갑시다 😊
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>プロフィール</title>
</head>
<body>
<div class="container">
<h1 class="title">自己紹介</h1>
<ul class="pro">
<li>名前:</li>
<li>趣味:</li>
</ul>
</div>
</body>
</html>
HTML에서 설명하겠습니다.
불필요한 사람은 날려주세요.
div는 뭐라고 생각하신 분.
이 아이는 무엇이든 가게입니다! 핸디! 어렵게 말하면 범용성입니까(^_^;) 블록 레벨 요소입니다 👍( htps : // 이 m/아카리_0618/이고 ms/f3b6892932cb6080c905 )
그리고 div씨 옆에 있는 앞서 설명한 "class"! ! 이번은 "container"(컨테이너)라고 명명했습니다. 블록 요소로 표시 영역을 나타냅니다.
이것이 "부모 요소"입니다.
그리고 그 아래가 h1 태그 옆에 다시 클래스가 되어 있네요. 이번은 이 표시 에리어의 타이틀에 상당하기 때문에 "타이틀"이라고 명명했습니다. (만마얀w)
이 아이가 "자식 요소"입니다!
그래서, 또는 만나서 태그가 있습니다!
"ul"과 "li"태그! !
"ul"은 순서없는 목록 요소라고합니다! (목록 블록이야 ~하지만 특별한 순서는 없어 ~)
"li"는 목록의 항목이라고합니다! (아니 아니, 차례가 있으니까.)
느낌입니까 😂
그리고 잊지 말아야 할 것은 닫기 태그입니다.
이것은 제대로 붙여주세요 👍
브라우저 표시하면 이렇게 될 예정입니다!
Reference
이 문제에 관하여(HTML ~ 클래스와 부모 - 자식 요소 ~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/akari_0618/items/3526fd7b751d9387667d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
HTML에는 부모 요소와 자식 요소가 있습니다!
말로 나란히 해도 이해하기 어렵다고 생각하므로, 실천 형식으로 해 갑시다 😊
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>プロフィール</title>
</head>
<body>
<div class="container">
<h1 class="title">自己紹介</h1>
<ul class="pro">
<li>名前:</li>
<li>趣味:</li>
</ul>
</div>
</body>
</html>
HTML에서 설명하겠습니다.
불필요한 사람은 날려주세요.
div는 뭐라고 생각하신 분.
이 아이는 무엇이든 가게입니다! 핸디! 어렵게 말하면 범용성입니까(^_^;) 블록 레벨 요소입니다 👍( htps : // 이 m/아카리_0618/이고 ms/f3b6892932cb6080c905 )
그리고 div씨 옆에 있는 앞서 설명한 "class"! ! 이번은 "container"(컨테이너)라고 명명했습니다. 블록 요소로 표시 영역을 나타냅니다.
이것이 "부모 요소"입니다.
그리고 그 아래가 h1 태그 옆에 다시 클래스가 되어 있네요. 이번은 이 표시 에리어의 타이틀에 상당하기 때문에 "타이틀"이라고 명명했습니다. (만마얀w)
이 아이가 "자식 요소"입니다!
그래서, 또는 만나서 태그가 있습니다!
"ul"과 "li"태그! !
"ul"은 순서없는 목록 요소라고합니다! (목록 블록이야 ~하지만 특별한 순서는 없어 ~)
"li"는 목록의 항목이라고합니다! (아니 아니, 차례가 있으니까.)
느낌입니까 😂
그리고 잊지 말아야 할 것은 닫기 태그입니다.
이것은 제대로 붙여주세요 👍
브라우저 표시하면 이렇게 될 예정입니다!
Reference
이 문제에 관하여(HTML ~ 클래스와 부모 - 자식 요소 ~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/akari_0618/items/3526fd7b751d9387667d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
