2022.12.05 Wep1일차 비주얼 스튜디오 코드 설치,HTML

2022.12.05 Wep1일차 비주얼 스튜디오 코드 설치,HTML

2022. 12. 5. 17:04ㆍWep

비주얼 스튜디오 코드

1.비주얼스튜디오 다운 검색 >>https://visualstudio.microsoft.com/ko/downloads/
2. Visual Studio Code Windows 64x 다운로드
3. 추가작업 선택에서 PATH추가 필수로 선택 ★★★
4. ctrl + shift + x 누른후 검색창에 Korean 검색 한글팩 설치 후 비주얼스튜디오 재실행

Web(HTML,CSS)

웹(Wep)이란
wep이란, 사전적인 의미로 거미줄이란 뜻으로 IT에서는 www(World Wide Web) 라는 말의 줄임말로서 사용됨.
전 세계의 컴퓨터를 연결하여 정보공유를 하는데 목적이 있음, 이렇게 연결되어있는 상태를 네트워크에 연결되어 있다고 함

wep의 동작원리

브라우저에 www.naver.com 이라는 일종의 url을 치면 브라우저는 서버에 url을 요청하고
서버는 저장되어있던 네이버의 HTML, CSS,Java Script파일 등의 구성파일을 보내면 브라우저에 나타냄.
192.168로 시작하는 IP는 공유기 IP

www.naver.com = DNS = 도매인이름

클라이언트 - 서버구조
클라이언트(Client)는 서비스를 사용하는 사용자 혹은 사용자의 단말기를 가르키는 말
서버(Server)란 서비스를 제공하는 컴퓨터이며, 다수의 클라이언트를 위해 존재하기 때문에 일반적으로
매우 큰 용량과 성능을 가지고 있음. (보통 서버컴퓨터는 다수 가지고있음)

무언가의요청을 할떄
요청하는쪽은 클라이언트, 요청받는쪽은 서버가 된다. 따라서 서버가 클라이언트도 될수있다

웹이란, 1개이상의 사이트가 연결되어있는 인터넷 서비스의 한가지 형태.
인터넷이란, 1개 이상의 네크워크가 연결되어있은 형태.

-프로토콜(Protocol) : 네트워크상에서 약속한 통신규약
(HTTP, FTP, SMTP,POP,DHCP)
-IP(internet Protocol): 네트워크상에서 컴퓨터를 식별할 수 있는 주소
-DNS(Domain Name Service) : IPㅡ주소를 인간이 쉽게 외우도록 맵핑한 문자열
- Port : IP주소가 컴퓨터를 식별할수 있게 해준다면, Port번호는 해당컴퓨터의
구동되고 있는 프로그램을 구분 할 수 있는 번호

HTML이란
Hyper Text Markup Language의 약자로 웹문서를 기술하는
언어 웹문서를 표햔하기 위해 태그들로 구성되어 있음.
1. doctype : 브라우저 선언문, 반드시 상단 웹표준과 관련
2. <html>태그 : lang속성은 문서가 작성된 언어
3. <head>태그 : 브라우저 화면에 표시되지 않음 문서의 기본설정
4. <body>태그 : 브라우저 화면에 나타내는 내용 태그들 대부분이 해당

HTML 요소 구조
HTML 요소(element)는 여러 속성을 가질수 있으며, 이러한 속성(attribute)은 해당요소에 대한 추가적인 정보를 제공함.
HTML 요소는 시작태그로 시작해서 종료 태그로 끝남.

HTML 태그
HTML문서 기본 형태

<html>
    <head>
        <meta charset="utf-8"/>
        <title>test2</title>
    </head>
    <body>
        안녕하세요. 처음입니다.<br/>
        Hello world!!
    </body>

</html>

문자표현 태그
<h1~6>(글자크기), <p>(단락구분), <br/>(줄바꿈), <a>(속성부여), <b>(글자강조), <i>(글자기울임), <sup>(윗첨자),

<ins>(밑줄), <del>(취소선)
 : html 주석,   : 공백

예제)문자표현태그 활용

<!DOCTYPE html>
<html>
    <head>
        <title>html 연습용</title>
    </head>
    <body>
        <h1>h1태그 입니다.</h1>
        <h2>h2태그 입니다.</h2>
        <h3>h3태그 입니다.</h3>
        <h4>h4태그 입니다.</h4>
        <h5>h5태그 입니다.</h5>
        <h6>h6태그 입니다.</h6>
        
        <p>주로 본문에 사용되는 태그로서 단락을 구분함.</p>
        <p>주로 본문에 사용되는 태그로서 단락을 구분함.</p>
        <p>주로 본문에 사용되는 태그로서 단락을 구분함.<br/> 행바꿈 태그 적용</p>

        <p>주로 <b>본문</b>에 사용되는 태그로서 단락을 구분함.<br/> 행바꿈 태그 적용</p>

        <p><a href = "http://www.daum.net">다음 웹페이지로 이동</a></p>
        
        <p><i>KOREA</i></p>
        <p>KOREA <sup>SEOUL</sup></p>
        <p><ins>KOREA</ins></p>
        <p><del>DELETE</del></p>
        <br/>
    </body>
</html>

출력

리스트 태그
<ol> : 숫자나 알파벳등 순서가있는 목록
<ul> : 순서가 필요없는 목록
<li> : list.item의 약자

<a href="http://www.google.co.kr" target="_blank"> : 새로운 탭으로 창열기
<a href="http://www.daum.net" target="_self"> : 현재 탭으로 창열기

<dl> : 사전처럼 용어를 설명하는 목록을 만들때
<dt> : 정의되는 용어의 제목을 넣을 때 사용
<dd> : 용어를 설명하는 데 사용

예제) 리스트 태그 활용

<!DOCTYPE html>
<html>
    <head>
        <title>리스트 태그 ol,ul</title>
    </head>
    <body>
        <p>메뉴 리스트</p>
        <ul>
            <li>menu1</li>
            <li>menu2</li>
            <li>menu3</li>
            <li>menu4</li>
            <li>menu5</li>
        </ul>

        <p>지역 리스트</p>
        <ol>
            <li>인쳔</li>
            <li>서울</li>
            <li>경기</li>
            <li>강원</li>
            <li>제주</li>
        </ol>

        <ol>
            <li><a href="http://www.google.co.kr" target="_blank">Google</a></li>
            <li><a href="http://www.daum.net" target="_self">Daum</a></li>
        </ol>
         
        <br/><br/>
        <dl>
            <dt>메뉴리스트</dt>
            
            <dd>menu1</dd>
            <dd>menu2</dd>
            <dd>menu3</dd>
            <dd>menu4</dd>
            <dd>menu5</dd>

            <dt>지역 리스트</dt>
            
            <dd>서울</dd>
            <dd>인천</dd>
            <dd>경기</dd>
            <dd>강원</dd>
            <dd>제주</dd>

        </dl>


    </body>
</html>

출력

Table태그
<table> : 테이블을 만드는 태그
<th> : 테이블의 해더부분을 만드는 태그
<tr>: 테이블의 행을 만드는 태그
<td> : 테이블의 열을 만드는 태그

테이블 디자인 변경
border : 테이블의 테두리(border = "1") - 숫자가 높을수록 테두리가 두꺼워짐
bordercolor : 테이블의 테두리 색상 - 디폴트 검은색
width : 테이블의 가로크기
height : 테이블의 세로크기
align : 정렬(테이블안에 있는 값들을 정렬시키는 기능)
bgcolor:배경색
colspan : 가로합병(열 합병)
rowspan : 세로합병(행 합병)

예제)table태그 활용

<!DOCTYPE html>
<html>
  <head>
    <title>테이블 실습문제</title>
  </head>
  <body>
    <table border="1" height="100" width="200">
      <tr>
        <th bgcolor="bule">1열</th>
        <th bgcolor="red">2열</th>
        <th bgcolor="00FF00">3열</th>
      </tr>
      <tr>
        <td rowspan="2">1행 1열</td>
        <td>1행2열</td>
        <td>1행3열</td>
      </tr>
      <tr>
        <td>2행2열</td>
        <td>2행3열</td>
      </tr>
      <div style3="text-align:center">
        <tr>
          <td colspan="3">3행1열</td>
        </tr>
      </div>
    </table>
  </body>
</html>

출력

이미지 출력 태그 <img src = "웹이미지 링크" alt = "이미지 태그">

예제) 이미지 출력태그 활용

<!DOCTYPE html>
<html>
  <head>
    <title>이미지 실습</title>
  </head>
  <body>
    <p>
      <img
        src="https://t1.daumcdn.net/b2/creative/290476/0cc0e45f0f788c6317073bb426da0a44.jpg"
        widht="800"
        height="200"
        alt="첫번째 이미지"
      />

      <img
        src="https://shop4.daumcdn.net/shophow/sib/0_221202122157_AthWQukOJNPPgTKgAiRqToHuvCOFgHCd"
        alt="두번째 이미지"
      />
      <img
        src="https://shop2.daumcdn.net/shophow/c/image/content/set/ad8255/20221205140326645_555255"
        alt="세번째이미지"
      />
    </p>
  </body>
</html>

출력

예제)홈페이지 꾸며보기

<!DOCTYPE html>
<html>
  <head>
    <title>개인홈페이지 실습</title>
    <style type="text/css">
      table,
      td {
        border: 1px solid red;
      }
      table {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>My HomePage</h2>
    <br />
    <a href="http://www.google.co.kr" target="_blank">
      <img
        src="https://shop4.daumcdn.net/thumb/R160x160/?fname=http%3A%2F%2Fshop4.daumcdn.net%2Fshophow%2Fp%2FC5111564217.jpg%3Fut%3D20221021011306"
        width="100"
        height="100"
        alt="노트북 이미지"
      />
    </a>
    <b>컴퓨터 프로그래머</b>를 열심히 공부하고 있는 땡땡땡 입니다.<br />
    <h3>현재 학습하고 있는 과목</h3>
    <ul>
      <li>C언어</li>
      <li>JAVA언어</li>
      <li>
        웹프로그래밍
        <a href="http://www.naver.com" target="_blank">W3C 사이트</a>
      </li>
    </ul>
    <br />
    <h3>이번 학기 시간표</h3>
    <br />

    <table border="1">
      <caption>
        시간표
      </caption>
      <tr>
        <th>&nbsp;</th>
        <th>월요일</th>
        <th>화요일</th>
        <th>수요일</th>
      </tr>
      <tr>
        <td>1교시</td>
        <td rowspan="2">C언어</td>
        <td rowspan="2" colspan="2">JAVA언어</td>
      </tr>
      <tr>
        <td>2교시</td>
      </tr>
    </table>
  </body>
</html>

출력

'Wep' 카테고리의 다른 글

2022.12.14 Wep 6일차 JS(JS기초) (0)	2022.12.14
2022.12.09 Wep5일차 HTML(text속성 선택자),CSS(box-shadow) (0)	2022.12.09
2022.12.08 Wep4일차 HTML,CSS(input 추가요소) (1)	2022.12.08
2022.12.07 Wep3일차 HTML,CSS (0)	2022.12.07
2022.12.06 Wep2일차 HTML,CSS (0)	2022.12.06

코딩일기

코딩일기

태그

최근글

댓글

공지사항

아카이브

예제)문자표현태그 활용

출력

출력

'Wep' 카테고리의 다른 글

관련글

티스토리툴바