[HTML]wecode

18931 ワード
&& テキストリンク

🚀 学習目標

  • ページベースとしてのHTMLとCSSの役割を説明できる.
  • HTMLとCSSの基本概念と用語を説明することができる.
  • HTMLでよく使用されるタグの種類を理解し、適切に使用します.
  • CSSの基本概念を使用して、ページレイアウトを整理し、要素にスタイルを追加できます.
  • Semantic Webとは何かを説明することができ、なぜSemantic tagを使用するかが重要です.

    • 📝 Mentor's Tip

  • の開発の初期段階では、まず大きな図を描く必要がある.個別の内容も重要ですが、HTMLやCSSの大図を描きながら勉強してください.
  • Replitは、基礎から深化までの様々なテーマをカバーしています.一度に内容を完全に理解してスキップするのではなく、常に繰り返し見るように勉強しましょう.
    • 一人で解くとつまらない多少気まずくても、同期同士で助け合ったり、状況を確認したり、一緒に推薦したりします.
  • 難しい用語やテーマは必ずブログで整理してください.面接問題に関するテーマがたくさんありますただし、質問が5時間以上ある場合は、必ず周囲の同級生や指導者の助けで提出を完了してください.
  • Repletが完了すると、オフラインの問答セッションがあります.会議は人員と状況に応じて行われるので、後でより多くの時間と場所をお知らせします.
  • HTMLとCSSの質問に答え、ブログの宿題を終えた方教えてください.簡単な議論の後、次の課題をご紹介します.

    • HTMLとは?


    Webページを作成するための言語、Webページの構造を実現
    画像、テキスト、ビデオなど、Webサイトが実装するコンテンツの構成
    ブラウザはHTMLファイルを使用してWebページを作成します.

    HTML tag


    などのラベルが表示されます.
    少なくともラベルは上のものと同じです
    ほとんどのタグには先頭と末尾があります.
    ただし単一で使用するラベルもあります. ,
    -attribute(プロパティ):開始タグにあり、複数のプロパティを指定できます.
    -element(要素):タグ、タグで終わるタグ間の内容

    htmlファイルの構造は常に以下の通りです。

    <!DOCTYPE html> # HTML5 버전 사용
<html> # 최상위 태그
 <head> # html 태그 다음에는 항상 head태그 위치
   # 제목, 설명, 부가정도, 기술적내용 등이 위치
  <meta charset="utf-8"> # utf-8 로 인코딩
  <meta name="viewport" content="width=device-width">
   # 디바이스의 가로 크기와 웹페이지의 가로와 같다 
  <title>repl.it</title># 브라우저 탭 페이지의 이름 
 </head>
  
 <body>
   <h1> ~  <h6> #heading 글씨크기, *이 태그를 사용하는 방법에 따라 html 최적화 가능 , 검색엔진 등 상위노출
     <span> #주로 텍스트를 넣어주는 태그
		<p> #paragraph , 텍스트를 주로 넣어주는 태그 + 줄바꿈
          <a href = "http:// website" target="_blank"> div 태그?</a> 
          #<a> 링크 , 텍스트 <p>, <span> 
      </span>
        # 클릭 시 화면이동(태그) , target 설정씨 새 창에서 열기
      <div> # 웹사이트의 섹션을 나눌 때 사용, division
        #비슷한 부분끼리 그룹짓기, 레이아웃분리, class, id 등을 부여하여 css스타일 사용가능 ** 헤더,메뉴,내용, 푸터 등으로 나누어 div클래스로 묶어 사용
       
 </body>
</html>
          
     id = 각 태그에 이름을 주는 속성( 식별가능 번호부여 고유번호 부여) <div id="profile"> 해당요소에만 디자인을 적용할 때 사용(글씨크기나 스타일, 디자인 등)
     class = 여러태그에 중복된 이름 부여가능. 
       <div class="content-wrap"></div>
		<p class="content-wrap"></p>

    cssとは何ですか。

      = HTML 태그들에 디자인을 입혀주는것.  
   	HTML 적용방법 
   1. 인라인스타일 
   태그 style 속성에 직접 작성할 수 있습니다.
    <h1 style="color: red;">FRONTEND 101</h1>
		2.style	태그
        html 파일 내에 css를 작성할 수 있는 방법입니다.
        <style> 사이에 css문법을 사용하여 스타일을 작성합니다.
        <style>
         h2 {
          color: #408090;
         }
        </style>
          
3. css파일에 작성
대신 html파일에서 어느 css파일이 쓰였는지 브라우저에 알려야 하므로,
링크를 해주는 태그를 추가해야 합니다.
          <link href="index.css" rel="stylesheet" type="text/css" />

    css合成方法

    	p {color : red; }
          #p라는 태그의 내용 빨간색으로 변경
        p {  font-size: 12px; }
          #p 태그의 글씨크기 12픽셀 변경

    class: .クラス名


    セレクタがタグである場合は、タグ名を記入するだけです.
    ただし、クラスにデザインを適用する場合は、セレクタに適用します.(点)が必要です.
    以下のとおりです.セレクタ(ポイント)クラス名を作成する必要があります.
    .profile-detail {
  font-weight: bold;
}

"profile-detail" 이라는 클래스가 적용된 태그에는 모두 글씨 두께가 두꺼워 집니다.

<p class="profile-detail">이것도 두꺼워 지고</p>
<span class="profile-detail">이것도</span>
<div class="profile-detail">그리고 이것도..</div>

    cssページの#と。差異

    # 은 class 이름에 사용
. 은 id 이름에 사용

    font

      #title {
  color: blue;
  font-family: Georgia, "Times New Roman", Times, serif; 
     # font-family는 폰트 스타일을 지정
  font-size: 30px;
}
 # 브라우저에서 Georgia 폰트 지원시 적용, 지원되지않으면 "Times New Roman" 적용, 없으면 Times, 앞에 3가지가 전부 없으면 serif폰트사용          
 # font 이름에 띄워쓰기가 있으면 ""사용
          font-family 값에는 여러가지 폰트가 나열
          serif 폰트는 모든 브라우저에서 지원

    色の検索


    あるいは「color picker」
    "color picker hex color"
    hex表現からrgb表現に変えたいなら
    「色hex to rgb」
       indent = css에서 들여쓰기
  .js-description {
  text-indent: 50px;
}
    ( https://images.velog.io/images/cs982607/post/7d601325-8d82-4d27-bc31-0878ad1271b1/1.jpg )
    オレンジ色はmarginエリア、上、右、下、左の計50 px
    黄色はborder領域で、boderの厚さは5 pxです.
    緑は充填領域、上、右、下、左の合計50 px
    元素の横径は273 px,縦径は90 pxである
    p.example {
    width: 273px;
    height: 90px;
    margin: 50px;
    border: 5px solid black;
    padding: 50px;
    }

    padding値の設定

    p.example {
  padding: 50px 50px 50px 50px;
} 
          한 번 더 풀어쓰면 아래와 같습니다.
p.example {
  padding-top: 50px;  # 위-오-아래-왼 시계방향
  padding-right: 50px;
  padding-bottom: 50px;
  padding-left: 50px;
}

    Border

     p {
  border: 5px solid red;
}

span {
  border: 1px dotted #0000ff;
}

          선 스타일의 종류입니다.
dotted 
dashed 
solid 
double 
groove 
ridge
inset 
outset 
이 중에 거의 solid만 사용하지만, 
혹시 다른 선스타일도 사용할 경우가 있으니 다양한 스타일이 있다는 것만 알아두시면 좋겠습니다.
          
선 또한 윗 선, 오른쪽 선, 아래 선, 왼쪽 선 등 다양하게 스타일을 줄 수 있습니다.
    blockquote {
    border-top: 4px double red;
    border-right: 2px solid #666666;
    border-bottom: 6px dashed darkviolet;
    border-left: 1px dotted #00ee44;
    }

    box-sizing

    모든 태그에 이 프로퍼티가 적용되어야 하는데 일일히 태그마다 적용하기에는 코드가 길어지겠죠.
아래와 같은 "*" selector로 모든 태그에 적용할 수 있습니다.
  • {
    box-sizing: border-box;
    }

    • 継承、グループ

  • 継承
    bodyラベルのcolorは赤、サイズは14 px
    次のラベルも同じスタイルを継承します.(親)
    ただし、下のサブタブのスタイルの色が異なる場合は、独自のスタイルが適用されます.
  • グループ=同じスタイルを適用したい場合は、それぞれのセレクタを同じスタイルに適用するのではなく、一度にスタイルを指定できます.
    スタイルを適用するために.what-is-blockquote、span、p{#ラベル名を同時に書き込む
    color: green;
    }

    • CSS selector


    classまたはidがセレクタの場合、タグとマージできます.
    p.p-tag {
  color: gray;
}
p#third-line {
  text-decoration: underline;
}
    1つ目はp-tagであり、p-tagクラスでもある.
    2つ目はpタグで、third-line IDでもあります.
    という意味です.
    .pre span {
  background-color: yellow;
}
그런데 모든 span이 아니라 "pre" 클래스 내부에 있는 span이라는 뜻입니다
          ###selector 우선순위
          tag <<<<< class <<<< id <<<<<< inline css
          1점					1000점

    イメージ


    タグを使用して画像を挿入
    img 태그에 사용된 속성을 하나씩 살펴보겠습니다.

alt: 이미지가 뜨지 않았을 때(서버에서 이미지가 삭제됐거나 잘못된 이미지 주소일 때..), 이미지 대신 보여줄 텍스트
src: 이미지 파일 경로 or 이미지 url 주소
          
css에 가로만 지정해주어도 원본의 세로값이 가로의 비율에 맞춰서 알맞게 줄어듬

    背景→画像を挿入


    bg-imgクラスには背景画像のcssが追加されている.
    .bg-img {
    background-color: yellow;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png" );
    }
    background-colorは背景色を追加します.
    background-imageは背景画像を追加します.
    これは、div.bg-imgの水平寸法をバックグラウンド画像で満たすことを意味します.
    .bg-img {
    background-size: 100%;
    }

    Block , Inline

       <header><footer><p><li><table><div><h1> 등은 Block요소 : 이 요소 바로 옆(좌우측)에 다른 요소를 붙일 수 없다.
      이 요소들은 항상 새 줄에서 시작되며 좌우로 최대한 늘어난다.
     
     <span><a><img> 등은 Inline요소 : 요소끼리 서로 한줄에, 바로 옆에 위치할 수 있다.
       이 요소들은 텍스트만큼의 영역만 차지.
       
       하지만, css를 사용하여 스타일 변경할 수 있다.
    CSS属性にinline属性を持たせるCSS属性にはdisplayとfloatがある.
    .inline-p {
  display: inline-block;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
해당 property에 위와 같은 값을 부여하면, 
요소 옆에 요소가 위치하는 inline 성질로 변하게 됩니다.
           
반대로 원래는 inline 성질을 가진 태그를 block으로 바꾸게 할 수도 있습니다.
    .block-span {
    display: block;
    }
    上のCSSは銀ラベルと同じ属性を持っています.
  • none=htmlには存在しますが、画面には表示されません.
    使用するためのインタラクティブWebの実装
    検索ウィンドウにテキストを入力した瞬間に関連リストを実現
    この領域はdisplay:none;
    • .
    [Wikea]商品並べ替え機能
    鋭い波のレポート、交差するレポートの中で交差するフィールドに対して、条件をして背景の色を変えます.