HTML 3日目

11222 ワード
CSS id class div Comment html テキストリンク
2021.08.14

『今日学んだ』

  • class 
    • <p class="주고 싶은 이름"> ~~ </p>
    造形部分で与える名前を指定できます.同じタグを使用しますが、異なるタグを使用します.
  • head 
    • <p id="고유한_값"> ~~ </p>
    スタイル部分では#一意の値{}で指定でき、同じidを共有できません.
    classとidの最大の違いは、classが他のタグで同じ名前を共有できることであり、idはそうではないことです.
  • div 
    • <div> ~~ </div>
    段落を区切るときに使用します.段落に区別する部分をdivラベルで囲むとclassを指定できます.
  • 複数種類のスタイル指定法
    1)外部cssファイルを作成することで、異なるファイルで共有するスタイルを簡単に指定できます.
    • <head>
	<link href="파일 경로" rel="stylesheet">
</head>
    2)ラベルの横で使用可能
    <p style="color: red; font-size: 60px;"> ~~ </p>
  • コメント作成法
    • <!-- 적고 싶은 코멘트-->  //html에서 사용
/* 적고 싶은 코멘트 */  //css에서 사용
    ctrl+/(単行)またはctrl+shift+/(複数行)で簡単に指定できます.
  • 例
    • <!--html 파일-->
<!DOCTYPE html>
<html>
<head>
  <title>세븐틴</title>
  <meta charset="utf-8">
  <link href="css/css.css" rel="stylesheet">
</head>
<body>

<!--주요내용-->
<h1 id="teamname">
  Seventeen
</h1>

<h2>
  2015년 5월 26일 데뷔한 대한민국의 보이그룹이다.
</h2>
<img src="https://newsimg.hankookilbo.com/cms/articlerelease/2021/06/25/8fe3756d-5439-49e8-abb8-cdb6c07fd420.jpg">
<p class="name_meaning">
  총 <b>13명의 인원</b>으로 이루어져 있으며
 팀 이름의 뜻은 <i>13명+유닛 3개+1개의 그룹</i>이라는 의미이다.
</p>

<!--자세한 설명-->
<p class="recent">
   최근 5번째 팬미팅인 5th carat land를 개최하였으며 6월 18일 "Ready to love"로 컴백을 하기도 했다.
   고잉 세븐틴을 통해 팬이 아닌 대중들에게 예능감을 각인시키도 했다.
   멤버는 에스쿱스, 정한, 조슈아, 준, 호시, 원우, 우지, 디에잇, 민규, 도겸, 승관, 버논, 디노로 
   구성되어 있으며 다수의 인원이 예명을 사용한다.
</p>

<!--나무위키 참고-->
<div class="tree">
 <a href="https://namu.wiki/w/%EC%84%B8%EB%B8%90%ED%8B%B4">나무위키: 세븐틴</a>
 </div>
</body>
</html>
    /*css 파일*/
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

h2 {
    font-size: 15px;
    text-align: center;
}

.recent {
    color: pink;
}

#teamname {
    font-size: 60px;
    text-align: center;
}

.tree {
    text-align: right;
    font-size: 10px;
}

    <後期>


    やはり今はまだ馴染みがなく、サンプルファイルを作るときもいちいち探してみますが、追星^が入った^ページを作るのは面白いです.そして作ったものがすぐに見えます!いろいろなcssを覚えてから使えたらいいな.
    Java宣言
    BootStrapのグリッドシステム(レイアウト)を深く理解する