및 HTML

사이트 모사에서 저는'div와span의 p는 프로젝트를 총괄하는 역할이구나'라고 대충 이해했기 때문에 저는 조금씩 명확한 일을 정리하고 싶습니다.

＜div＞표시

division(분할·단)의 약어에서

로 둘러싸인 부분을 블록 요소로 그룹화합니다.앞뒤가 바뀌다.

라벨 자체는 특별한 의미가 없습니다.

＜span＞표시

짧은 시간span＞~＜/span＞로 둘러싸인 부분을 내연 요소로 그룹화합니다.앞뒤가 바뀌지 않다.
라벨 자체는 특별한 의미가 없습니다.

＜p＞표시

paragraph(단락)의 이니셜로 ＜p＞~＜/p＞로 페이지에서 단락을 만듭니다

실제로 써볼게요.

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>divとspanとp</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
<body>
  <div class="container01">
    <p>最初の文です。</p><p>2番目の文です。</p>
  </div>
  <div class="container02">
    <p>最初の文です。</p><p><span>2番目</span>の文です。</p>
  </div>
</body>  
</html>

styles.css

body {
    margin: 0;
}

div {
    margin: 10px;
    width: 400px;
}
.container01 {
    background: lightcoral;
}
.container02 {
    background: #80f0ab;
}
p {
    margin: 0;
    padding: 0 0 0 10px;
    font-size: 20px;
    line-height: 35px;
    text-align: left;
}
span {
    color: #5797e0;
}

라벨로 그룹을 둘러싸면 배경을 바꿀 수 있습니다.

표시로 둘러싸인 부분은
표시를 사용하지 않은 상태에서 줄을 바꿉니다.
라벨로 둘러싸인 곳은 줄을 바꾸지 않았기 때문에 이런 느낌으로 문자의 색깔을 바꿀 수 있습니다.

Reference

이 문제에 관하여(및 HTML), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/a-takano/items/73098fa09849e9e686db

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다