2018/3월

180321

2018. 3. 21. 13:41

   

        <h1> 제목태그1 </h1>

        <h2> 제목태그2 </h2>

        <h3> 제목태그3 </h3>

        <h4> 제목태그4 </h4>

        <h5> 제목태그5 </h5>

        <h6> 제목태그6 </h6>


제목 태그는 <h></h> 1~6까지 있다

두껍게 표현하려고 h태그를 사용하지 않는다.


왼쪽 정렬

가운데 정렬

오른쪽 정렬


<p align="left"> 왼쪽 정렬 </p>

<p align="center"> 가운데 정렬 </p>

<p align="right"> 오른쪽 정렬 </p>


문단에서 강제로 줄을 바꿀때는 <br>을 사용한다.




<b>는 진하게, <i>는 기울임꼴, 원하는 부분부터 태그를 넣고 끝나는 부분에 닫힘 태그를 넣으면 된다.


    <head>

        <meta charse="utf-8">

        <title> 제목 </title>

        <style>

            body {background-color: oldlace;}

            p {color: dimgrey; background-color: burlywood;}

            b {color: darkgreen;}

        </style>

    </head>


이런식으로 들어가는데 <style>은 <head>쪽에 들어간다.

b {} <이런식으로 된거는 볼드로 설정한 애들만 색이나 전경색이 바뀜

p는 p를 사용해 문단을 나눈 애들이 바뀜

이런식으로 특정 태그를 이용한 애들을 쉽게 바꿀 수 있음!



        <ul>

            <li> 항목 1 </li>

            <li> 항목 2 </li>

        </ul>

        <ol>

            <li> 항목 1 </li>

            <li> 항목 2</li>

        </ol>

        <dl>

            <dt> 용어 제목 </dt>

            <dd> 용어 설명 </dd>

        </dl>

        

<ul> <ol> 은 <li> 태그만 사용 가능하다.

 <ul>은 앞에 쩜이 찍히는 항목 나열 / <ol> 은 숫자 형식으로 항목 나열 / <dt>는 단어등등 설명할 대상

 / <dd>는 <dt>에 대한 설명문



실습_180321.html

실습_180321-1.html




'2018 > 3월' 카테고리의 다른 글

180328  (0) 2018.03.29
180327  (0) 2018.03.27
180323  (0) 2018.03.26
180326  (0) 2018.03.26
180320  (0) 2018.03.20
2018/3월

180320

2018. 3. 20. 14:13

구글에 들어가서 '브라켓'이라는걸 다운받아서 집에서도 실습 가능

브라켓은 저장할때 .html을 붙이지 않으면 일반적인 메모장 문서를 인식하니 .html을 붙인다.


* 지금 배우는건 html 5 다.


첫 시작을 할때는 <!doctype html> : html은 다른것으로 대체가 가능하다


전 세계용으로 지원을 할때는 <html lang="ko">

즉 lang="원하는 국가" << 이런식으로 적어 넣으면 된다.


<meta charse="utf-8"> : 이게 들어가지 않으면 글자가 나오지 않는다.

utf-8 << 다국어 지원


<head> <<여는거  ㅣ  </head> <<닫는거

 / : 이게 들어가면 tag가 닫히는거임


html에서는 head랑 body가 나뉘어져잇음

<h> 이걸 헤딩태그라고 부름


줄바꿈을 하려면 <br> 을 써야한다.

<p> 태그를 사용하면 <br>과 달리 줄 자체가 아예 한칸 띄워짐 문단을 닫을때는 </p> <<즉 문단나누고 닫는 태그당



<img src="http://placehold.it/400x300" alt="">


400x300은 원하는 사이즈로 수정하면 된다. alt=""는 이미지가 엑박으로 뜰때 설명하는거

alt="" 꼭 있어야한당 웹디 시험때 없으면 감점! 링크를 걸을때 꼭 필요하당


경로, 확장자명을 틀리지 않게 유의한다.

폴더명이나 파일의 이름은 영문과 언더바(_)와 숫자를 이용해 작성해야한다.

예시 <img src="파일명1/파일명2/그림이름.확장자명" alt="">


<!--<img src="http://placehold.it/400x300" alt="">-->

<!--<어쩌구저쩌구 태그들>-->

주석처리를 하면 웹페이지 자체에서 보이지 않는다

ctrl + / : 행 주석처리

ctrl + shift + / : 블록 주석처리


<a href="http://naver.com">네이버</a>

<a>는 </a>의 사이에 있는 문자에 링크를 연결해줄때 사용한다.


이미지에 링크를 연결시켜줄때

<a herf="원하는곳 링크 주소(파일도 괜찮고 인터넷 주소도 괜찮음)"> <img src="원하는 이미지 주소" alt=""></a>

이렇게 하면 된다!


<font color="#원하는 6자리 색상 코드></font>

<font size="1~7의 크기가 있다"></font>

<font face="원하는 서체"></font>

한번에 여러개를 적용 하고 싶으면 <font size="" color="" face=""></font> 이런식으로 하면 된다.


<div align="center">

정렬하는거! center left right << 이런식으로 하면 됨







실습_180320.html

실습_180320-1.html



'2018 > 3월' 카테고리의 다른 글

180328  (0) 2018.03.29
180327  (0) 2018.03.27
180323  (0) 2018.03.26
180326  (0) 2018.03.26
180321  (0) 2018.03.21
12