2. 왕초보의 HTML 도전기 - 2023.11.16 [HTML 기본구조 및 태그]

2023. 11. 16. 09:24ㆍ1단계) 쌩초보 코딩 HTML,CSS

파일저장시

파일제목.html 으로 꼭 저장하기

-HTML 와 단축키*

-HTML 로 작성하기*

 

116P CSS*

316P 클론코딩& 

41P 목표와 일정정하기*

46P WEB 학습

 

48P 각 기능별 통신규약

WWW ->HTTP,HTTPS

email ->SMTP,POP3,IMAP

FTP->FTP,SFTP

 

51P HTML 기본구조

HTML 하이퍼텍스트 마크업하는 언어(하이퍼텍스트=링크)

마크업하는 언어는 표시하는 언어

<!-- --> 주석: 프로그램에 아무런 영향 미치지않음. 사용용도:정보 및 메모 목적*

<html>
    <head>
        <!-- 주석입니다 -->
    </head>
    <body>
        <h1> 비전공자를 취한 첫 코딩챌린지</h1>
    </body>
</html>

tip) 코드는 <>~</> 한줄 작성하는게 수정하기 쉬움

<!DOCTYPE> 현재 사용하는 브라우저에 대한 정보

 

<head> 타이틀 위주로 표시됨

 

<title> 문서제목, 

<html>
    <head>
        <!-- 주석입니다 -->
        <title>시작</title>
    </head>
    <body>
        <h1> 비전공자를 취한 첫 코딩챌린지</h1>
    </body>
</html>

결과확인

<body>
        주석없이 작성
        <!-- 바디에 작성한 내용 -->
        <h1> 비전공자를 취한 첫 코딩챌린지</h1>
    </body>

 

결과

 

 

 

<meta> 데이터를 설명하는 태그, 메타태그 통해 웹페이지에 대한 정보를 전달할 수 있다.

 

54p 태그가 뭐지

웹문서 정보를 정의해주는 형식

 

 

63p 단축키

Ctrl+Z 뒤로가기*   (한달락 뒤로 감)

Ctrl+Shift+Z 앞으로가기*

Ctrl+C

Ctrl+V

Ctrl+X

Ctrl+S 저장하기

Ctrl+space 자동완성기능복구 " <입력 안하고 영문으로 입력시 나타나는 emeet averiviation

 

Ctrl+ / 주석 -> <!-- --> 자동완성

Ctrl+ F 현재 작업중인 파일에서 검색*

- open Editor 열려있는 편집기 체크 해제

 

 

68p

새파일 (tip F2 remane)

index.html 생성

Hello world

vscode 기능덕분에 자동완성으로 채워짐

 

73p

태그

 

아무것도 입력안된 화면에서

! 입력하면, 자동완성됨

h 제목

**검색엔진이 h태그에 기반하여 결과물을 보여줌**

 <h1> ~ <h6>

tip) 자동으로 앞태그 숫자에 맞춰서 설정되는 태그

extension -> auto rename Tap downlord

<html>
    <head>
        <!-- 주석입니다 -->
        <title>시작</title>
    </head>
    <body>
        주석없이 작성
        <!-- 바디에 작성한 내용 -->
        <h1> 비전공자를 취한 첫 코딩챌린지</h1>
        <h2> 비전공자를 취한 첫 코딩챌린지</h2>
        <h3> 비전공자를 취한 첫 코딩챌린지</h3>
        <h4> 비전공자를 취한 첫 코딩챌린지</h4>
        <h5> 비전공자를 취한 첫 코딩챌린지</h5>
        <h6> 비전공자를 취한 첫 코딩챌린지</h6>
    </body>
</html>

 결과

 

br 줄바꿈 (=window상 엔터기능과 동일, VSCode에는 enter key가 입력해도 html에 나타나지 않는다)

줄바꾸기 전
<br/>
줄바꿈 태그를 사용 했습니다

적는 칸에 엔터효과가 있다. 아이콘 참조

p 문단지정 (약간 비슷하지만 div는 한번의 엔터)

앞 뒤 엔터 치는효과(주로 문단 지정할때 사용)

<p>문단의 내용을 작성합니다.</p>

체크 부분 엔터띄우는 효과

정리)

사용
결과

 

 

 

 

 

div 영역지정

문장 자체를 줄만 바꿈, 보통 한덩어리로 묶을때 사용함

<div>div 태그입니다</div><div>div 태그입니다</div>
<div>div 태그입니다</div>
<div>div 태그입니다</div>

 

span 범위지정

</p> 
<div>div 태그입니다</div><div>div 태그입니다</div>
<div>div 태그입니다</div>
<div>div 태그입니다</div>
<p> <span> 태그를 사용합니다</span></p>

span은 줄바꿈 없으며 글씨를 꾸며주는 효과라, 추가 효과태그(CSS)를 안넣었기 때문에 효과 따로 없음

 

<body>

<spam>hello world</spam>

</body>

문장이라고 보기 어려운 구조에 p말고 spam 을 사용하는 경우도 있지만,정답은 아니다! 

 

link 링크                                                                     link는  head 영역에서 작성한다

<link rel="stylesheet" href="___">

스타일시트를 href 링크로 불러오기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="">
</head>
<body>
   
</body>
</html>

 

+ body 영역에서 link 기능사용방법

<a href="___"></a>

링크만 입력하면 결과값이 안나오기 때문에,

<a href="https://www.naver.com/">네이버로 이동</a>

네이버로 이동 입력하고

 

 

img 이미지 (80p)

-src 이미지경로 , alt 설명, width 가로길이,height 새로길이

(같은 폴더에 있을 경우 이름만

다른폴더에있는 경우 경로 표시)

글자가 필요없어서 </img> 없다

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <img src="흰족제비.jpg" alt="흰족제비 그림" width="500" height="700">
</body>
</html>

결과 (tip 자동완성은 < 없이 사용 )

%만약 링크만 지우면?

<body>
    <img src="" alt="흰족제비 그림" width="500" height="700">

그림이 저렇게 나온다

경로복사방법 : 이미지 오른쪽마오스클릭 shift+alt+C    copy Path

                        폴더에 있는거                                         copy relation Path 상대경로복사

 

width와 height를 지우면 원래그림크기 그대로 가지고온다.

<img src="흰족제비.jpg">

 

width만 사용하는겨우는 width에 맞게 비율이 자동설정됨

<img src="dododo.jpg" width="200">

heifht만 사용하는경우 200으로 전체적인크기 설정

<img src="dododo.jpg" height="200">

 

form 입력양식을 만드는 태그

button 버튼을 만드는 태그

ol,ul,li 리스트를 나타내는 태그

 

-----------------------------------------------------

총정리

 

11.16 단축키와 HTML 태그 

자주 쓰는 단축키: ctrl 먼저 누르고 영문누르기

작업한 파일 저장:ctrl+S

복사: ctrl+C

붙여넣기:ctrl+V   ---------------------63p

 

챕터 4 - 27p

html 태그 : <태그명> ___ </>      -----------------(basic form)

h태그 : 제목강조 and 검색 엔진에 노출되는 내용 / 디자인형태는 굵은글자,글바꿈(enter)

br태그 : 글바꿈(enter 기능이 화면에 노출되지 않기 때문)

p태그 : 주로 문단작성 시 사용, 앞 뒤 엔터효과(줄바꿈 2번)

div 태그 : 문장 작성시 사용, 한번엔터효과(줄바꿈1번) -------------CSS에서 주로사용

span 태그 : 줄바꿈없고  글자형태가 어려운 것에 이용하며 --------------스타일링과 줄바꿈은 CSS으로 활용

a 태그 : href이용하여 링크연결,줄바꿈 없음

img 태그 : src이용하여 그림파일 연결,줄바꿈 없음

 

VScode 에서 작성한 내용

태그명을 적고 그 아래에 자동완성을 이용하면 태그가 작성된다 (&자동완성 사라지면 , ctrl+space 로 열어도됨)

 

 

 

dododo.jpg
0.06MB
대표적태그2.html
0.00MB
연습.html
0.00MB

 

GitHub - lorraine98/musthaveHTML-CSS: <비전공자를 위한 첫코딩 챌린지 with HTML & CSS> 코드r

 

GitHub - lorraine98/musthaveHTML-CSS: <비전공자를 위한 첫코딩 챌린지 with HTML & CSS> 코드

<비전공자를 위한 첫코딩 챌린지 with HTML & CSS> 코드. Contribute to lorraine98/musthaveHTML-CSS development by creating an account on GitHub.

github.com

 

 

 

저작자표시 (새창열림)

'1단계) 쌩초보 코딩 HTML,CSS' 카테고리의 다른 글

2023.11.22 [css시작2]  (1) 2023.11.22
2023.11.21 [css 시작1]  (2) 2023.11.21
2023.11.20 [상자박스 및 메뉴판 만들기2]  (2) 2023.11.20
3. 2023.11.17 [상자 박스 및 메뉴판 만들기1]  (0) 2023.11.17
1. 쌩초보의 HTML 도전기 - 2023.11.15 [VScode 간단 소개]  (1) 2023.11.15

관련글

티스토리툴바