CodeStates/HTML&CSS

html 시작

yeeendy 2023. 1. 31. 11:57

생활코딩 보고 따라해보고 있다

 

TAG

<strong></strong> : 두꺼운 글씨

<u></u> : 밑줄

<p></p> : 문단

<h1></h1> : 제목, 1~6까지 크기가 있음 + 줄바꿈

<br> (/가 따라붙지 않는다) : 줄바꿈,<br>갯수에 따라 여러 줄 띄울 수도 있다

<p></p> : 단락, 원하는 여백만큼 띄울 수 있다. ex) <p style="margin-top : 45px">  -->상단 여백 45픽셀 띄움

<img src="(이미지 주소)" width ="(원하는 사이즈)%"> : 사진 첨부, 주소와 크기 위치 상관 없음

<hr>(단일태그) : 수평선

<em> : 이탤릭체(기울어진 텍스트)

<mark> : 형광펜 표시

 

<parent>

   <child></child>

</parent>

 

/부모자식 예시

    <ol> //부모 
        <li>HTML</li>  //자식
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
ol 단락 안에 들어가는 글자들은 자동으로 넘버링 된다

li : list

ol : ordered list

ul : unordered list

 

<title></title> : 제목 바뀜

<meta charset ="utf-8"> : 타이틀 아래 요 코드를 넣으면 한글로 작성한 글자 안 깨진다

<body></body> :  본문

<head></head> : body를 설명하는 태그

<html></html> : 맨 처음과 맨 끝에 작성

<!doctype html> : 최상단에 작성

 

<a href="(주소)"></a> : 내가 원하는 링크로 넘어갈 수 있다

href 옆 target="_blank" : 새 탭으로 열린다

target 옆 title="" : 툴 팁

<p><a href="https://dev.w3.org/html5/spec-LC/" target="_blank" title="html5 specification">

 

목차로 넘어가기

앞에서 배웠던 방식을 활용하여

<li></li> 란 사이에

원하는 링크 입력하는 란에 카테고리 이름을 넣는다

<h1><a href="index.html">WEB</a></h1>
    <ol>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li>
    </ol>

해당 카테고리를 선택하고 그 안에 원하는 내용을 입력한다.

완성