본문 바로가기
비주얼스튜디오코드

[ 20일차 ] html 태그 연습하기

ggosoon 2022. 6. 15. 10:29
 

PHP Tutorial (w3schools.com)

 

 

<!DOCTYPE html>   //html 선언문
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>  //h 태그는 6까지만 있음
<h2>This is a Heading</h2>
<h3>This is a Heading</h3>
<h4>This is a Heading</h4>
<h5>This is a Heading</h5>
<h6>This is a Heading</h6>

<p>This is a paragraph.</p> //p태그는 목록태그
<p>This is a paragraph.</p>
<p>
    1&nbsp;&nbsp;&nbsp;&nbsp;23  //&nbsp; 공백 &emsp; tab띄어쓰기
    4&emsp;&emsp;5
</p>

</body>
</html>

 

자동으로 줄바꿈 되어서 보인다

 
 
 

<br> 줄바꿈 태그 , 단독태그라서 닫는</> 개념이 없음  권장사항은 <br />이다 (통일해서 써주면 문제가 되진않음)

<hr> 라인생성 태그 

<img> 이미지 불러오기 태그

<p>
    1&nbsp;&nbsp;&nbsp;&nbsp;<br>
    <hr>
    <img>
    2<br>3<br>
    4&emsp;&emsp;5
</p>

 

 

파일 저장할때 항상 모든파일로 설정하고 UTF-8로 저장한다
브라우저 절대경로 c: ~부터

 

img2 새폴더 만들고 안에 이미지를 넣어준다 

파일을 가져올때 상대경로, 절대경로 두 가지 방법이 있다

<p>
    1&nbsp;&nbsp;&nbsp;&nbsp;<br>
    <hr>
    <img src="./img2/너구리.png" width="100" height="100" alt="상대경로">
    <img src="http://127.0.0.1/img2/너구리.png" width="100" height="100" alt="절대경로">
    2<br>3<br>
    4&emsp;&emsp;5
</p>

 

 

링크 걸기 <a href=""> </a> (이미지에 링크걸기, 단어 설정 this is a link 해서 링크 걸어주기 )

<p>
    <hr>
    <a href="https://www.w3schools.com">
    <img src="./img2/너구리.png" width="100" height="100" alt="상대경로">
    </a>
    <hr>
    <img src="http://127.0.0.1/img2/너구리.png" width="100" height="100" alt="절대경로">
    <hr>
    <a href="https://www.w3schools.com">This is a link</a>

</p>

 

첫번째 이미지 파일에 링크걸린 것

 

 

 

새창으로 링크 띄우기 (blank) , 테두리 주기(border) , 새창에다가 이름 부여하기(target) = 프레임네임이 있으면 그창으로 가는 것 (??) 

<p>
    <hr>
    <a href="https://www.w3schools.com" target="_blank">
    <img src="./img2/너구리.png" width="100" height="100" alt="상대경로" border="1">
    </a>
    <hr>
    <img src="http://127.0.0.1/img2/너구리.png" width="100" height="100" alt="절대경로">
    <hr>
    <a href="https://www.w3schools.com" target="maju">This is a link</a>
</p>

 

 

style 태그 

<h1 style="font-size:160px;">Heading 1</h1>
 
<style>
 h1{
    font-size:160px;
 }
 #p1{                  --id를 나타낼땐 #을 붙여줌
    font-size:60px;
 }
 .p2{                   --class를 나타낼땐 .을 붙여줌
    font-size:40px;
 }

</style>

</head>
<body>

<h1 style="font-size:160px;">Heading 1</h1> --style 주기

<p id="p1">This</p>        --아이디 설정하기
<p class="p2">is a </p>    -클래스 설정하기
<p>paragraph.</p>
<p>

 

<style>
 h1{
    font-size:50px;
 }
 h1{
    font-size:10px;
 }
 #p1{
    font-size:60px;
 }
 .p2{
    font-size:40px;
 }

</style>

</head>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>

<p id="p1">This</p>
<p class="p2">is a </p>
<p>paragraph.</p>
<p>

h1에대한 값이 두개가 있으면 나중에 적은게 적용됨 

 

<body>

    <pre>
        My Bonnie lies over the ocean.
      
        My Bonnie lies over the sea.
      
        My Bonnie lies over the ocean.
      
        Oh, bring back my Bonnie to me.
      </pre>

</body>

문서를 그대로 출력하고싶을때 pre 태그 

 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<style>
p{
    font-size:20px;
    background-color:powderblue;
    color:lightcoral; --폰트색상
    font-family:'Times New Roman', Times, serif; --글씨체
    text-align:center; --가운데정렬
 }

</style>

</head>
<body>
    <p> My Bonnie lies over the ocean.</p>
    <p style=" text-align:right;">한글글꼴도 변경가능</p> --스타일바로 설정가능, 오른쪽정렬
</body>
</html>

 

넓이랑 높이 설정 

<style>
p{
    font-size:20px;
    background-color:powderblue;
    color:lightcoral;
    font-family:'Times New Roman', Times, serif;
    text-align:center;
    width:600px;
    height:300px;
 }
</style>

 width를 % 형식으로 주기도한다 width: 90%; 하면 창 크기를 줄여도 화면비율의 90%로 유지된다 

div 설정해주기 

 div{
    background-color:rgb(187, 219, 99);
 }
</style>

</head>
<body>
    <div>
    <br>
      <p> My Bonnie lies over the ocean.</p>
      <p style=" text-align:right;">한글글꼴도 변경가능</p>
    <br>
    </div>
</body>

 

가운데정렬해주기  margin:auto;

 

 

  • <b> - Bold text
  • <strong> - Important text
  • <i> - Italic text 기울임
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Smaller text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Superscript text
<p> <i>My</i> <s>Bonnie</s> <u>lies over</u> <b>the ocean.</b></p><br>

 

 

그림문자

<!DOCTYPE html>
<html>
<head>

</head>
<body>
     <br> &#128512; &#128516; &#128525; &#128151;
</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <!-- Write <p> your </p> comments here -->

    <!-- 주석 표현하기 이렇게 나타내도됨 
    -->
    
     <br> &#128512; &#128516; &#128525; &#128151;

     <address>
        Written by John Doe.<br>
        Visit us at:<br>
        Example.com<br>
        Box 564, Disneyland<br>
        USA
    </address>

    <p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

</body>
</html>

 

<body>

    <!--색상 : 빨, 녹, 파 
    -->

     <br> 

     <h1 style="background-color:Tomato;">Hello World</h1>
     <h1 style="background-color:#999340;">Hello World</h1>
     <h1 style="background-color:lightskyblue;">Hello World</h1>
     <h1 style="background-color:#ff0000;">Hello World</h1>
     <h1 style="background-color:#00ff00;">Hello World</h1>
     <h1 style="background-color:#0000ff;">Hello World</h1>

</body>

 

 

 

<!DOCTYPE html>
<html>
<head>
<style>

a:link, a:visited{
  text-decoration: none;
}


a:hover, a:active {
  text-decoration: underline;
}

</style>

</head>
<body>

    <!--색상 : 빨, 녹, 파 
    -->

     <br> 
    <a href="https://naver.com"> 네이버</a> <br>
    <a href="https://nate.com" target="google"> 네이트</a> <br>
    <a href="https://www.google.co.kr/" target="google"> 구글코리아</a> <br>
    색상: 빨, 녹, 파 

</body>
</html>

구글코리아 클릭하고 네이트 클릭하면 구글창이 네이트창으로 바뀜 target="google"로 동일하게 설정했기 때문에

<!DOCTYPE html>
<html>
<head>
<style>
img {
    width:100px;height:200px;
}
</style>
</head>
<body>

<img src="./img2/너구리.png" 
     alt="HTML5 Icon" 
     width="100" height="100">

</body>
</html>

위의 경우 

<style>
img {
    width:100px;height:200px;

이 우선순위가 높다 

<!DOCTYPE html>
<html>
<head>
<style>
img {
    width:100px;height:200px;
}
</style>
</head>
<body>

<img src="./img2/너구리.png" 
     alt="HTML5 Icon" 
     width="100" height="100"
     style=" width:100px;height:100px;">

</body>
</html>

인 경우에 

 style=" width:100px;height:100px;">

이 적용된다 

제일 마지막에 설정한 값이 제일 우선순위가 높다

 

'비주얼스튜디오코드' 카테고리의 다른 글

[ 22일차 ] 정보처리기능사 html 실습해보기 (form 태그)  (0) 2022.06.17
[ 21일차 ] html table만들기, form활용하기 test + java 활용해보기  (0) 2022.06.16
[ 20일차 ] html table 태그, form태그 연습하기  (0) 2022.06.15
[ 18일차 ] 비주얼스튜디오 코드  (0) 2022.06.13
[ 18일차 ] 윈도우용 APM설치하기 , 비주얼스튜디오코드 해보기  (1) 2022.06.13

'비주얼스튜디오코드' Related Articles

티스토리툴바