[웹개발] HTML 기본 내용

9836 단어 pycharm웹개발htmlhtml

💡HTML

• HTML은 문서 기반이라고 이해하면 쉽습니다.
• <>(꺽쇠) 들을 '태그'라고 부릅니다.
• HTML은 크게 head와 body로 구성되며, head 안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담는다고 보면 됩니다.
• head 안에 들어가는 대표적인 요소들 : meta, script, link, title
• body에는 다음과 같은 요소들이 들어갑니다.

div(division) 태그 : 묶음 작업할 때 유용한 구역을 나누는 태그
p(paragraph) 태그 : 문단 태그
h1(h2, h3, ...) 태그 : 제목 태그
span 태그 : 특정 글자를 꾸미는 태그
a 태그 : 하이퍼링크 태그
img 태그 : 이미지 태그
hr 태그 : 가로선 제공 태그
이외에도 input, button 태그 등 많은 요소들이 존재합니다. 필요할 때마다 찾아서 넣어보면 됩니다.

👉이와 같은 기본적인 지식을 기반으로, pycharm에서 새로운 HTML file을 만들어 다음과 같이 코딩하고 chrome 브라우저에서 열어보았습니다.

👉만약 코드 정렬이 제대로 되어있지 않으면, 코드의 생김새를 파악할 수 없어 오류를 해결하기가 무척 어려워집니다. Pycharm에서 ctrl+alt+L (Mac은 cmd+option+L) 로 자동정렬 기능을 사용하는 것을 추천합니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | HTML 기초</title>
</head>

<body>
    <!-- 구역을 나누는 태그들 -->
    <div>나는 구역을 나누죠</div>
    <p>나는 문단이에요</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
    <hr>
    span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
    <hr>
    a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
    <hr>
    img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>

</html>

👉그 결과, 다음과 같은 웹페이지가 생성된 것을 확인할 수 있었습니다!

programmers - 두 개 뽑아서 더하기
5월 18일 화요일 (7일차) - SELECT기본기능 ㅇ

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage