하늘아덤벼라
블로그 이미지

Home

Write

Setting

About Me
Dark
프론트

[HTML] 1. HTML 기초 정리 1

하늘아덤벼라
|2024. 4. 2. 19:34

HTML(하이퍼텍스트 마크업 언어)는 웹 페이지를 만들기 위해 사용되는 기본적인 마크업 언어이다.

 

웹 페이지의 구조와 콘텐츠를 정의하며, 웹 브라우저에게 텍스트, 이미지, 링크, 동영상 등을 어떻게 표시할지 지시한다.

 

CSS(Cascading Style Sheets)를 사용하여 HTML 요소에 스타일을 적용하고, JavaScript를 사용하여 동적인 기능을 추가할 수 있습니다. 

 

HTML = 홈페이지의 기본 뼈대, CSS = 이쁜거,  JavaScript = 움직이는거

 

 

HTML은 다양한 요소로 구성되어있는데 각 요소들은 태그로 정의되어 있다.

예를 들어, <h1> 태그는 가장 큰 제목 <h2>는 부제목, <p> 태그는 단락을 나타낸다.

 

1. HTML 기본 구조

 

 

Visual Studio Code에서 대충 .html 만들고 !치고 엔터키 빵 치면 밑 구조가 기본적으로 생성된다.

기본 구조

 

1. <!DOCTYPE html>

문서 유형 선언. html5를 사용하겠다는 의미.

 

 

2. <html lang="en">

전체 문서 language가 english다라는 뜻.
바디 안에 한글 쓸 것이기 때문에 ko로 바꿔준다.

 

 

3. head

문서의 메타데이터와 외부 리소스에 대한 정보를 포함

 

 

4. meta

메타태그(meta tag)는 웹페이지(Web page)의 요약

반드시 바디태그 앞에 위치해야한다.

<meta charset="UTF-8">
문서의 문자 인코딩을 UTF-8로 설정하여  미국브라우저로 봐도 한글이 깨지지않게 보인다

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
넓이(width)를 모바일에 맞게 맞춰준다. 모바일페이지를 따로 만들기도 하지만 아무튼 이렇게도 설정함

 

 

5. title

탭에 보이는 제목.

 

 

6. body

브라우저에 보이는거. 실제 콘텐츠를 포함하는 부분

 

 

 

HTML에선 <, >, & 처럼 명령어나 태그에 사용되는 문자는 그냥 쓰면 안된다.

 

코드 문자
&lt; <
&gt; >
&amp; &
&copy; 저작권 기호 ⓒ
&quot; "
&nbsp; 띄어쓰기

 

참고로 태그 안에서 띄어쓰기는 아무리 많이 해도 한칸만 띄어쓰기되어서 브라우저에 나온다.

그래서 띄어쓰기는 따로 &nbsp; 를 주면 된다.

꼼수로 이미지로 처리해버리는 방법도 있긴 하다.

2. HTML 요소와 태그

 

각 요소는 태그로 정의되며, 각 태그는 특정한 의미와 기능을 가지고 있습니다. 예를 들어, <h1> 태그는 가장 큰 제목을 나타내며, <p> 태그는 단락을 나타냅니다. 또한 HTML은 속성을 사용하여 요소에 추가 정보를 제공할 수 있습니다. 예를 들어, <a> 태그의 href 속성은 링크의 URL을 지정합니다.

 

HTML 요소는 태그로 정의된다. 각 태그는 특정한 의미와 기능을 가진다.

또 <태그 속성="값"> 형식으로 요소에 추가 정보를 제공할 수도 있다.

 

예를 들어, <a> 태그의 href 속성은 링크의 URL을 지정한다.

 <a href="http://www.kbs.co.kr">한국방송공사</a>

<h1>

제목. <h1>부터 <h6>까지 있으며, 숫자가 작을수록 더 큰 제목을 나타낸다.

h1은 홈페이지 제목, h2는 부제목 h3는 소제목..이런 식이다.

주의할 점은 글씨 크기를 조절하겠다고 태그를 조절하면 안된다. 그런건 CSS로 해야한다.

 

<p>

단락(paragraph)

 

<ul> <li> 

ul은 부모태그. 순서가 없는 목록(unordered list)을 의미함.

li는 자식태그. 목록 내용들 작성하면 된다.

 파이썬에선 부모 자식관계 들여쓰기안하면 에러난다고 함

 

ul>li*5  ->는 부모와 자식관계를 보여줌. ul이 부모. li자식을 5개 만들겠다는 뜻

 

<ol><li>

순서있는 목록(ordered list)(홈페이지에 순서번호가 보인다)

 

<ol reversed>

list들 번호 거꾸로(큰번호부터 처음에 나옴)

원래는 <ol reversed="reversed">이다.
<태그 속성 값> 이어야하는데 속성과 값이 같으면 값 생략해도 된다.

 

<dl><li>

<dl> 태그는 용어(term)와 그에 대한 설명(description)을 리스트 형식으로 정의할 때 사용함.

 

<img>

이미지를 삽입할 때 사용.

src 속성이 이미지의 경로를 지정함.

 

<a>

href 속성이 링크의 URL을 지정함. 하이퍼링크(anchor)를 의미.

 

 

자세한 내용은 수업내용으로 대체함.

 

1. hello.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>황찬우화이팅</title>
    <link rel="shortcut icon" href="images/boy.ico"> <!-- 탭에 넣을 이미지. 확장자가 ico인데 요즘엔 jpg, png아무거나 해도 ㄱㅊ-->
    <!-- 주석 -->
</head>
<body>
    <h1>처음 만드는 홈페이지</h1>
    <h2 title="세계의 명언집">시간을 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 관리하자</h2>
    <p>내일 죽을 것처럼 오늘을 살고 영원히 살 것처럼 내일을 꿈꾸어라&copy;</p>
    
    <img src="images/watch.jpg" alt="시계">
    <p>콜럼버스 시계</p> <!-- 이미지의 단락이 아니라 그냥 따로 단락임. 사진과 하나되게 하려면 figure+figcaption해줘야함 -->
    
    <h3>오늘의 메뉴</h3>
    <ul>
        <li>된장찌개</li>
        <li>제육볶음</li>
        <li>산나물무침&amp;김치</li>
    </ul>
    <p>제목태그는 &lt;h1&gt;로 시작되며</p>
</body>
</html>
황찬우화이팅

처음 만드는 홈페이지

시간을       관리하자

내일 죽을 것처럼 오늘을 살고 영원히 살 것처럼 내일을 꿈꾸어라©

시계

콜럼버스 시계

오늘의 메뉴

  • 된장찌개
  • 제육볶음
  • 산나물무침&김치

제목태그는 <h1>로 시작되며

2. list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>목록태그</title>
</head>
<body>
    <h2>오늘의 메뉴</h2>
    <ul>
        <li>부대찌개</li>
        <li>도라지무침</li>
        <li>두부조림</li>
        <li>산나물무침</li>
        <li>멸치국수</li>
    </ul>
    <h2>농산물</h2>
    <ul>
        <li>과일
            <ul>
                <li>국산과일</li>
                <li>수입과일</li>
                <li>냉동과일</li>
            </ul>
        </li>
        <li>채소
            <ul>
                <li>제철채소</li>
                <li>하우스채소</li>
            </ul>
        </li>
    </ul>
</body>
</html>
목록태그

오늘의 메뉴

  • 부대찌개
  • 도라지무침
  • 두부조림
  • 산나물무침
  • 멸치국수

농산물

  • 과일
    • 국산과일
    • 수입과일
    • 냉동과일
  • 채소
    • 제철채소
    • 하우스채소

 

3. list2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>목록태그</title>

</head>
<body>
    <h2>프론트엔드 학습 순서</h2>
    <!-- reversed는 항목을 역순으로 표시-->
    <ol>
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
        <li>jQuery</li> <!-- 자바스크립트의 라이브러리(다운로드, CDN방식(인터넷되야함)) -->
        <li>python</li> <!-- 프론트 + 백엔드. 문법은 괜찮은데 라이브러리가 많다 -->
        <li>library</li> <!--파이썬의 라이브러리 배울 예정(다운로드 방식임)-->
        <li>API</li> <!-- 자바서 배운API랑 다른 말 -->
    </ol>
    <h2>주간작업(화)</h2>
    <ol start="4"> <!-- 4부터 시작. 4,5,6 -->
        <li>내부청소</li>
        <li>운반작업</li>
        <li>연결작업</li>
    </ol>
    <h2>1박 2일 가족 여행 코스</h2>
    <ul>
        <li>1일차
            <ol type="a"> <!-- 영소문자로 순서 나옴. i는 로마자. 꾸미는건 보통 css에서 하지만 html에서도 조금은 할 수 있다-->
                <li>해녀박물관</li>
                <li>낚시체험</li>
            </ol>
        </li>
        <li>2일차
            <ol type="I">
                <li>용눈이오름</li>
                <li>만장굴</li>
                <li>카악체험</li>
            </ol>
        </li>
    </ul>
</body>
</html>

 

목록태그

프론트엔드 학습 순서

  1. html
  2. css
  3. javascript
  4. jQuery
  5. python
  6. library
  7. API

주간작업(화)

  1. 내부청소
  2. 운반작업
  3. 연결작업

1박 2일 가족 여행 코스

  • 1일차
    1. 해녀박물관
    2. 낚시체험
  • 2일차
    1. 용눈이오름
    2. 만장굴
    3. 카악체험

 

 

4. list3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>설명목록</title>
</head>
<body>
    <h2>제주 올래</h2>
    <dl> <!-- definition list. 정의 목록 -->
        <dt>올레 1코스</dt> <!-- definition title. 제목 -->
        <dd>코스 : 시흥 초등학교 옆 - 광치기 해변</dd> <!-- definition 목록의 내용 -->
        <dd>거리 : 14.6km</dd>
        <dd>난이도 : 중</dd>
        
        <dt>올레 2코스</dt>
        <dd>코스 : 광치기 해변 - 은평 포구</dd>
        <dd>거리 : 14.5km</dd>
        <dd>난이도 : 중</dd>
    </dl>
</body>
</html>

 

설명목록

제주 올래

올레 1코스
코스 : 시흥 초등학교 옆 - 광치기 해변
거리 : 14.6km
난이도 : 중
올레 2코스
코스 : 광치기 해변 - 은평 포구
거리 : 14.5km
난이도 : 중

 

5. image.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이미지</title>
</head>
<body>
    <img src="images/first.jpg" alt="민들레" width="500" height="200"> <!-- src: 이미지 경로, alt: 대체 텍스트--> <!--width는 css에서 하지만 이미지는 html에서 직접 설정하기도 한다-->
    <img src="../images/car_green.jpg" alt="자동차">
    <figcaption>자동차입니다</figcaption>
    <!--(위에꺼설명) htmlBase안의 images말고 바깥의 images폴더에 접근하고싶다? ../ 입력하면 한단계 밖으로 빠져나간다.  ../../  은 두단계빠져나감 -->
    
    <figure> <!-- 독립적인 컨텐츠 나타내는 태그 -->
        <img src="images/watch.jpg" alt="시계">
        <figcaption>콜럼버스 시계</figcaption> <!-- 이미지 제목 -->
    </figure>
    <!-- figure쓰는 이유: 한글의 캡션처럼 이미지 제목을 이미지와 함께 따라다니게 해줌. -->
    <!-- 시맨틱태그(Semantic Tag): 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그-->
    <!-- 웹표준 -->
    <!-- 웹접근성: 장애인/비장애인 구별없이 잘 접근할 수 있게 -->
</body>
</html>

 

이미지 민들레 자동차
자동차입니다
시계
콜럼버스 시계

 

6. anchor.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>하이퍼링크</title> <!-- 웹문서는 하이퍼링크로 이동함 -->
    
    <script src="http://code.jQuery.com/jQuery-latest.min.js"></script> <!-- CDN방식 -->
    <script>
        $(function (){
            $('#move').click(function (){
                $('body,html').animate({
                    scrollTop:0
                },2000)
            });
        });
    </script>
</head>
<body>
    <h1 id="top">가나 쇼핑몰</h1> <!-- id:식별자  -->
    <h2><a href="#news">오늘의 스포츠 핫뉴스</a></h2> <!-- h2한 이유는 그냥 글자 크게 보려고 -->

    <a href="http://www.kbs.co.kr">한국방송공사</a> <!-- anchor태그(하이퍼링크)/href(참조하는 속성)/anchor(손가락)가 한국방송공사에 걸리고 http://~로 이동한다. -->
    <br><br> <!-- 줄바꿈 태그 --> <!-- h,p,ul,dl,ol는 밑으로 생기는데 a는 옆으로 생김. a는 br로 줄바꿔야한다. 자세한건 css에서 배울 예정 -->
    <a href="http://hyundai.com"> <!-- 그림을 클릭하면 링크이동하게 만들기. 앵커사이에 그림넣으면 됌 -->
        <img src="../images/car_green.jpg" alt="자동차" title="현대자동차 사이트"> <!-- 마우스 갖다대면 보이는 기능 -->
    </a>
    <br>
    <a href="hello.html">여행지 탐험</a> <!-- 외부 페이지말고 내 페이지로 설정해도 됨(서브페이지 이동)-->
    <br>
    <img src="../images/Koala.jpg" alt="코알라">
    <br>
    <br><br>

    <h2 id="news">오타니와 첫 대결 판정승!…이정후</h2>
    <p> LA 원정을 떠난 '바람의 손자' 이정후(샌프란시스코 자이언츠)가 5경기 연속 출루 행진으로 상승세를 이어나갔다. 빅리그 데뷔 이후 두 번째 멀티히트까지 달성했다.
        이정후는 2일(한국시간) 미국 캘리포니아주 로스엔젤레스에 위치한 다저스타디움에서 열린 2024 미국프로야구 메이저리그(MLB) LA 다저스와의 원정경기에 1번타자 겸 중견수로 선발 출전해 5타수 2안타를 기록했다. 시즌 타율은 0.286에서 0.316으로 상승했고 출루율도 0.368에서 0.375로 올랐다. 장타율은 0.500에서 0.474로 소폭 하락했다.</p>   
    <p> 2번 지명타자로 샌프란시스코 투수들을 만난 '슈퍼스타' 오타니 쇼헤이는 4타수 1안타 1타점 1득점으로 3경기 연속 안타에 만족했다. 시즌 타율은 0.269에서 0.267로 떨어졌다.
        경기에선 다저스가 8-3으로 승리하면서 3연전 기선제압에 성공했다. 다저스 선발 제임스 팩스턴이 5이닝 동안 1점도 내주지 않는 짠물 투구로 샌프란시스코 타선을 꽁꽁 묶었고, 타선에선 프레디 프리먼, 윌 스미스, 테오스카 에르난데스 세 명의 타자가 7타점을 합작하면서 팀 승리에 크게 기여했다.</p>
    <p>▲양 팀 선발 라인업, 그리고 이정후와 다시 만난 팩스턴

        샌프란시스코는 이정후(중견수)-오스틴 슬래이터(우익수)-호르헤 솔레어(지명타자)-맷 채프먼(3루수)-윌머 플로레스(1루수)-톰 머피(포수)-마이클 콘포토(좌익수)-타이로 에스트라다(2루수)-닉 아메드(유격수) 순으로 라인업을 꾸렸다. 선발투수는 키튼 윈.

        이에 맞서는 다저스는 무키 베츠(유격수)-오타니 쇼헤이(지명타자)-프레디 프리먼(1루수)-윌 스미스(지명타자)-맥스 먼시(3루수)-테오스카 에르난데스(우익수)-제임스 아웃맨(중견수)-크리스 테일러(좌익수)-개빈 럭스(2루수) 순으로 라인업을 구성했다.
        
        다저스 선발로 나선 투수는 이적 후 처음으로 다저스타디움 마운드에 오른 좌완 제임스 팩스턴이었다. 팩스턴은 2013년 시애틀 매리너스 소속으로 빅리그에 데뷔한 뒤 뉴욕 양키스, 시애틀, 보스턴 레드삭스를 거쳐 올 시즌을 앞두고 다저스와 계약했다. 시즌 준비 과정에서 선발진 보강이 시급했던 다저스가 팩스턴에게 손을 내밀었다.</p>
    <br>

    <a id="move" href="#">맨위로 ↑</a> <!-- 앵커는 3가지. 완전 외부 사이트로 이동, 서브페이지로 이동, 한페이지에서 위치이동(책갈피). href=#top : 위에 식별자 top으로 이동. #은 id를 나타냄  -->
                                        <!-- #만 쓰면 '빈 링크'라고 함. -->
                            
</body>
</html>

 

하이퍼링크

가나 쇼핑몰

오늘의 스포츠 핫뉴스

한국방송공사

자동차
여행지 탐험
코알라


오타니와 첫 대결 판정승!…이정후

LA 원정을 떠난 '바람의 손자' 이정후(샌프란시스코 자이언츠)가 5경기 연속 출루 행진으로 상승세를 이어나갔다. 빅리그 데뷔 이후 두 번째 멀티히트까지 달성했다. 이정후는 2일(한국시간) 미국 캘리포니아주 로스엔젤레스에 위치한 다저스타디움에서 열린 2024 미국프로야구 메이저리그(MLB) LA 다저스와의 원정경기에 1번타자 겸 중견수로 선발 출전해 5타수 2안타를 기록했다. 시즌 타율은 0.286에서 0.316으로 상승했고 출루율도 0.368에서 0.375로 올랐다. 장타율은 0.500에서 0.474로 소폭 하락했다.

2번 지명타자로 샌프란시스코 투수들을 만난 '슈퍼스타' 오타니 쇼헤이는 4타수 1안타 1타점 1득점으로 3경기 연속 안타에 만족했다. 시즌 타율은 0.269에서 0.267로 떨어졌다. 경기에선 다저스가 8-3으로 승리하면서 3연전 기선제압에 성공했다. 다저스 선발 제임스 팩스턴이 5이닝 동안 1점도 내주지 않는 짠물 투구로 샌프란시스코 타선을 꽁꽁 묶었고, 타선에선 프레디 프리먼, 윌 스미스, 테오스카 에르난데스 세 명의 타자가 7타점을 합작하면서 팀 승리에 크게 기여했다.

▲양 팀 선발 라인업, 그리고 이정후와 다시 만난 팩스턴 샌프란시스코는 이정후(중견수)-오스틴 슬래이터(우익수)-호르헤 솔레어(지명타자)-맷 채프먼(3루수)-윌머 플로레스(1루수)-톰 머피(포수)-마이클 콘포토(좌익수)-타이로 에스트라다(2루수)-닉 아메드(유격수) 순으로 라인업을 꾸렸다. 선발투수는 키튼 윈. 이에 맞서는 다저스는 무키 베츠(유격수)-오타니 쇼헤이(지명타자)-프레디 프리먼(1루수)-윌 스미스(지명타자)-맥스 먼시(3루수)-테오스카 에르난데스(우익수)-제임스 아웃맨(중견수)-크리스 테일러(좌익수)-개빈 럭스(2루수) 순으로 라인업을 구성했다. 다저스 선발로 나선 투수는 이적 후 처음으로 다저스타디움 마운드에 오른 좌완 제임스 팩스턴이었다. 팩스턴은 2013년 시애틀 매리너스 소속으로 빅리그에 데뷔한 뒤 뉴욕 양키스, 시애틀, 보스턴 레드삭스를 거쳐 올 시즌을 앞두고 다저스와 계약했다. 시즌 준비 과정에서 선발진 보강이 시급했던 다저스가 팩스턴에게 손을 내밀었다.


맨위로 ↑

 

티스토리툴바