본문 바로가기

웹 프로그래밍/프론트 엔드

HTML 기초

TAG는 설명

<html></html> : 전체 html 코드를 감싸는 태그

<head></head>: 본문을 설명하는 태크

<title></title> : 웹페이지 제목

<meta charset="utf-8"> : utf-8로 html를 해석

 

<body></body> : 본문

 

<strong></strong> : 진하게

<u></u> : 밑줄 쫙

<br> : 줄바꿈

<p> </p> : 단락 줄바꿈(br과 비슷하지만 더 정보를 담고있음) 

<img src="이미지 주소" width="100%> : 이미지 넣기

(src와 width는 속성(Attribute) 이고 순서에 상관없음)

unordered list

<ul>

    <li> </li>

</ul> : 부모 태크와 자식태그(e.g. ul은 li(목록)의 그룹(시작부터 끝)을 나타냄)

 

ordered list

<ol>

    <li> </li>

</ol> : 위와 같으나 자동으로 넘버링

 

테이블은 3대(조부모,부모,손자)가 필요함

<table>

    <tr>

        <td>head</td>

        <td>98.1%</td>

    <tr>

        <td>body</td>

        <td>97.9%</td>

    <tr>

        <td>html</td>

        <td>97.9%</td>

    </tr>

</table>

 

head 98.1%
body 97.9%
html 97.9%

 

html의 혁명 : hyper link 기능

<a href="http://www.google.com" target="_blank" title="google"></a>

href는 클릭시 링크될 url, target으로 새탭으로 만들기 가능, title로 이동전에 설명을 추가할수 있음

 

동영상 삽입(<iframe>)

 

<p>
        <iframe width="560" height="315"
        src="https://youtu.be/PtxFi72Vbh4"
        frameborder="0" allowfullscreen></iframe>
</p>

'웹 프로그래밍 > 프론트 엔드' 카테고리의 다른 글

타임리프(스프링 통합과 폼)  (0) 2023.04.13
Thymeleaf(타임리프) 기본  (0) 2023.04.11
Thymeleaf(타임리프) 기초  (0) 2023.04.11
JavaScript 기초  (0) 2023.04.02
CSS 기초  (0) 2023.04.02