web웹프로그래밍

Html 핵심

짱쭈니어 2022. 2. 2. 15:34

html은 태그, 속성, 콘텐츠를 이해하면 된다.

 

 

기본형식: <태그> 콘텐츠 </태그>

 

<p>Hello inflearn!</p>

 

속성이 있는 경우: <태그 속성=""> 콘텐츠 </태그>

 

<a href="https://www.naver.com">네이버로 가기</a>

 

태그 안에 태그가 있는 경우

 

<div>
  <p>hello grab!</p>
  <p>hello grab!</p>
</div>

 

 

HTML의 기본구조

 

<html>
<head>
<!-- html 설정-->
</head>
<body>
html 내용
</body>
</html>

 

 

HTML의 기본구조 예시

 

<html>
  <head>
  	<!--html title정하기-->
    <title>그랩마켓에 오신걸 환영합니다.</title>
    
    <!--css파일 불러오기-->
    <link href="web.css" rel="stylesheet" />
    
    <!--css직접 정하기 <style>태그  -->
    <style>
      p {
        font-weight: 900;
      }
    </style>
    
    <!--js파일 불러오기--> 
    <script src="web.js" type="text/javascript"></script>
    
    <!--js파일 직접 쓰기 --> 
    <script>
        console.log('안녕하세요');
    </script>
  </head>
  <body>
    <p>Hello inflearn!</p>
  </body>
</html>

 

 

img, form태그 예시

 

 

 
 <!-- img가 올바르게 나오지않을때, alt가 대신나옴-->
 <img
      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAeFBMVEUAxzz///8AxjcAxCZQ0Gjc9N/m9+jR8dbQ9Ntp2YMAxjgAxCwAxTAAxTP7//3p+Osfy01R1HC068Hx/PTL8tVIz2O77cfF7ct/3pXX9d8Awx+L4aA70F+Y5KlJ0mqn6LcszVWh5rB024yH4Jtg2oBa1Xau6bwozVMQgS/cAAACxklEQVR4nO3c7W7aQBBG4Vm7QPGabwqBkBSSpr3/O6yUKi0EbK8NjTKvzvPbWnHixWInks0AAAAAAAAAAAAAAAAAAAAAAAAAQEORJ4kJS8WbrXRLxbdFP8FknjcuFVeTlJXWH5yYfQlphmXTUvnXpIV6zX+rm0ouHE+LhqW8F4Zl0010XxjuGhL9FzbtU/+FYbOtXUqgMNzXPugVCsMuq1lKonAzqllKojA81OxTjcLwWH0XRQr78oXhe+UHVCkMs6q7KFM4sYqfNjKFYV7xPNUprDoqChUuLu9TocKwuvgTXKkwPF3ap1KFF4+KUoVheeF5qlUY7s4TxQrH+7Ojolhh2JzdRLXC85GGXOHZSEOvsPfuJuoVhsNpomDhu6OiYmE/O/5po1h4OtKQLDzZp5qFx0dFzcLjkYZo4dFIQ7Xw3z5VLQzrt08sW/h3pKFb+DbS0C0My1y9MDxH9cLx61FRuTBsSvXC15GGdmHYZ+qF/VK9MByiemGYbdUL+87v4aT5ksPSdeGPRfM1CZd85sKXtOv8Fg63P9ULS0v4KrouHI0e1QstP6gXWt5XL8x26oUWH9QLrdyoF2a7sXihxWf1wtRjruPCwq7dp5+90Mon9UKLa/XCYpp2DvRbaOVQvdDyuXphMbpmn3ootNE1Iw0XhRavGGn4KCyy7kdFH4U2mqkXXjHS8FJoses+dVPYeaThptDivXqhld2Oio4KO440HBV2HGl4KrRt2n8MHRd2Gmm4Kuw00vBVaHGlXthhpOGssMNIw1th+5GGu8Iia7lP3RW2Pir6K2x7VHRYWBStjooOC1vuU4+FFg/qhRZ76oXZL/XCNiMNp4UtRhpeC7N96lHRa6HFO/VCyxNHGh9dWOx6gwSbl7r3ev5ZaZqy0GBQ9TK0/ybxjeWNgTd99zkAAAAAAAAAAAAAAAAAAAAAAAAACb8BlaxF0SY61+4AAAAASUVORK5CYII="
      alt="네이버 사진"
    />
    
    <!-- form태그를 이용하여, 서버에 정보를 보낼 수 있다. -->
    <form>
      <label> 아이디 입력</label>
      <input type="text" />
      <br />
      
      <label>비밀번호 입력</label>
      <input type="password" />
      
       <!--submit을 이용해서 보내기 -->
      <input type="submit" value="login" />
    </form>