쿠쿠더님의 블로그

2일차 html과 그 안에 태그의 관해서 본문

CSS , HTML

2일차 html과 그 안에 태그의 관해서

쿠쿠더 2024. 12. 30. 17:08

 

 

 

  • html 과 vscode 란 ?
  • 태그란?
  • 태그 종류 및 설명( <a>  , <div> , < h1> ~ <h6> , <input> , <lable> , <span> , <ul> <ol> <li> )
  • 실습 및 예제 ( 아쉬운 점)

 

 

 

 

[지식 정리]

Html  html을 들여보면 '용어' 라는 느낌이 듣니다 
html은  hyperText Markup Language 하이퍼 링크이고  
원하는 텍스트에 하이퍼 링크를 추가하면 텍스트를 클릭하고 원하는 페이지로 요청을 보낼수 있습니다.
쉽게 말하자면 html은 하이퍼 링크가 포함된 문서 라고 생각하시면 쉬울것 같다.
이떄 문서란 브라우저가 해석할수 있는걸 뜻합니다. 
vscode  개발자가 html 혹은 css js 등등 파일을 작성할때 기능을 제공해준다. 
웹 페이지에서 f12(개발자 도구)를 눌러서 확인을 해보면 
`<태그 이름>` 이런 형태를 태그 라고 부른다 . 

 

태그란 무엇인가?

 

tag 란 Html 문서를 구성하는 기본 단위를 tag라고 부릅니다.

 - 블록 요소 : 블록은 한 줄을 다 차지하는 영역을 가진다 옆에 내용이 영역을 차지할 수 없다. 

 - 인라인 요소 : 인라인은 태그안의 내용의 크기만큼 영역을 차지한다. 

 

태그의 종류

 

<div> 태그란 ? 

분할, 분배, 분류를 뜻하고 html 안에 존재하는 여러 개의 태그들을 <div>라는 큰 단위로 묶어주는 주머니 역할을 한다.

<div> 태그 정의

 

<span> 태그란 

<span> 태그도 <div>태그와 같이 여러 개의 태그들을 묶어주는 역할을 한다 하지만 <span> 태그는 inline element라 자신의 content만큼 공간을 차지한다는 점을 같고 있다.

<span>태그 정의

 

<a> 태그란 ? 

<a> 태그는 문서를 링크시키기 위해 사용하는 태그이다 

<a>  태그에서 3가지 속성이 있는데 href, target , title 세 가지가 있다

1. href : 연결할 주소를 지정 한다 . 

2. target : 링크를 클릭 할 때 창을 어떻게 열지 설정 한다.

3. title : 해당 링크에 마우스 커서를 올릴 때 도움말 설명을 설정한다.  

주소를 연결할때 절대 경로 url , 상대 경로 url 있는데 

- 절대 경로 url : 링크의 전체경로 

- 상대 경로 url : 같은 프로젝트 폴더 내의 경로 ( 예시 / 쓰면 위에 경로가 나온다)

 

<img> 태그란 ?

이미지를 의미하는 태그로 , 웹 페이지에 이미지를 삽입할 때 사용합니다. 

이미지 삽입하려면 이 태그의 필수 속성인 src 속성의 값으로 삽입하려는 이미지 소스의 경로를 지정합니다.

그리고 혹시 이미지가 잘못 들어서가서 이미지가 안 뜨면 alt에 이 이미지가 무엇인지 적어놓을 수도 있습니다.

 

<h1> ~ <h6> 태그란?

h 태그는 <h1> , <h2> 부르는 태그이고 h 태그는 제목을 나타내는 태그입니다 

그리고 <h1> 순으로 제일 크고 <h6> 이 제일 작습니다. 

 

<ul> , <ol> , <li> 태그란 

- ul 태그 : 순서가 없는 리스트 작성할 때 사용하는 태그 ( 앞에 조그만 동그라미가 나타납니다.)

- ol 태그 : 순서가 있는 리시트 작성할 때 사용하는 태그 ( 위에부터 순서 1 , 2, 3 ,4 이렇게 됩니다.) 

- li 태그 : 리스트 표현하는 태그 리스트 아이템이고 <ul>, <ol> 안에 들어갑니다. 

 

input 태그란? 

입력창의 기능을 사용할 때 사용하는 태그이고  <input> 태그의 속성에는 type 있고

예시로 대부분은 text 타입으로 하고 비밀번호와 같이 숨겨야 할 때는 password이다 

input 예시

 

lable 태그란

input 태그 어떤 내용을 작성해야 하는지 알려줄 때 쓰인다. 

 

학원실습] 메가박스 디자인은 신경 x 레이아웃에 맞게 영화 리스트를 나열해서 (10개)

 

 [아쉬운 점] 메가 박스 페이지에 되어있는 것처럼 저도 가로로 5개씩 나열을 하고 싶었으나 배운 것까지 오는 아직 할 수 없는 것 같다.

<!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>
    <div>
        <H1>메가 박스</H1>
       
        <div><a href="https://www.megabox.co.kr/movie-detail?rpstMovieNo=24061500">하얼빈</a></div>
        <h1>예매율 27.6% 개봉일2024.12.24</h1>

        <div><a href="https://www.megabox.co.kr/movie-detail?rpstMovieNo=24061500">하얼빈</a></div>
        <h1>예매율 27.6% 개봉일2024.12.24</h1>

        <div><a href="https://www.megabox.co.kr/movie-detail?rpstMovieNo=24061500">하얼빈</a></div>
        <h1>예매율 27.6% 개봉일2024.12.24</h1>

        <div><a href="https://www.megabox.co.kr/movie-detail?rpstMovieNo=24061500">하얼빈</a></div>
        <h1>예매율 27.6% 개봉일2024.12.24</h1>

        <div><a href="https://www.megabox.co.kr/movie-detail?rpstMovieNo=24061500">하얼빈</a></div>
        <h1>예매율 27.6% 개봉일2024.12.24</h1>

        <div><a href="https://www.megabox.co.kr/movie-detail?rpstMovieNo=24061500">하얼빈</a></div>
        <h1>예매율 27.6% 개봉일2024.12.24</h1>

        <div><a href="https://www.megabox.co.kr/movie-detail?rpstMovieNo=24061500">하얼빈</a></div>
        <h1>예매율 27.6% 개봉일2024.12.24</h1>

        <div><a href="https://www.megabox.co.kr/movie-detail?rpstMovieNo=24061500">하얼빈</a></div>
        <h1>예매율 27.6% 개봉일2024.12.24</h1>

        <div><a href="https://www.megabox.co.kr/movie-detail?rpstMovieNo=24061500">하얼빈</a></div>
        <h1>예매율 27.6% 개봉일2024.12.24</h1>

        <div><a href="https://www.megabox.co.kr/movie-detail?rpstMovieNo=24061500">하얼빈</a></div>
        <h1>예매율 27.6% 개봉일2024.12.24</h1>

    </div>
</body>
</html>

 

[예제]

<div> , < a> , <span> , <img> 예제 정리

<!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>
    <div>블록 요소</div>
    <div>안녕하세요</div>    
    <span>인라인 요소</span><div>안녕하세요</div>
    <div>
        <a href="https://www.naver.com/" >네이버 이동</a>
    </div>
    <div>
        <a href="./index.html" >두번째 페이지로 이동</a>
    </div>
    <div>
        <a href="/20241231/product.html" >두번째 페이지로 이동</a>
    </div>
    <img src="고양이.jpg" alt="cat" />
</body>
</html>

 

 

 

 

[예제]

<ul> , <ol> , <li> <input> , <label> 태그 예제 

------------------------------------------------------------------------------------------------------------------------------
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h1>영화 제목</h1>
        <h2>감독명</h2>
        <h3>평점</h3>
        <img src="" alt="" />
    </div>

    <ul>
        <li>리스트 1</li>
        <li>리스트 2</li>
        <li>리스트 3</li>
        <li>리스트 4</li>
    </ul>

    <ol>
        <li>리스트 1</li>
        <li>리스트 2</li>
        <li>리스트 3</li>
        <li>리스트 4</li>
    </ol>
    <div>
        <label>아이디:</label>
        <input type="text"/>
    </div>
    <div>
        <label>비밀번호:</label>
        <input type="password">
    </div>

    <div>
        <label for="">남자</label>
        <input type="radio">

        <label for="">여자</label>
        <input type="radio">
    </div>

    <div>
        <label for="">동의 하시겠습니까?</label>
        <input type="checkbox">
    </div>
    <h1>회원가입 폼</h1>
    <div>
        <div>
           
        </div>
    <div>
        <label for="">남자</label>
        <input type="radio">
   
        <label for="">여자</label>
        <input type="radio">
    </div>
        <label>아이디:</label>
        <input type="text"/>
    </div>
    <div>
        <label>비밀번호:</label>
        <input type="password">
    </div>    

    <div>
        <label>광고 수신 동의</label>
        <input type="checkbox">
    </div>
    <button>확인</button>
</body>
</html>

 

실습 과제 2 

메인페이지, 로그인 페이지 , 회원가입 페이지를 만들고 

회원가입 페이지에서는 이름과 성별 아이디 비밀번호 광고 수신 동의 가 들어간 회원 가입 폼을 만들어라

 

main.html 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">

    <title>메인페이지</title>
</head>
<body>
    <h1>메인 페이지</h1>
    <img src="고양이.jpg">

    <span>
        <h2><a href="/20241231/login.html">로그인</a></h2>
        <h2><a href="/20241231/register.html">회원가입</a></h2>
    </span>
   
</body>
</html>

 

login.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>
    <h1>로그인 폼</h1>
    <div>
        <label>아이디:</label>
        <input type="text"/>
    </div>
    <div>
        <label>비밀번호:</label>
        <input type="password">
    </div>
    <div>
    <a href="main.html">메인</a>
    <a href="/20241231/register.html">회원가입</a>
    </div>
    <button>확인 </button>
 
</body>
</html>

 

register.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>
    <h1>회원가입 폼</h1>
    <div>
        <label for="">이름</label>
        <input type="text">
    </div>
    <div>
        <label for="">남자</label>
        <input type="radio">
   
        <label for="">여자</label>
        <input type="radio">
    </div>
        <label>아이디:</label>
        <input type="text"/>
    </div>
    <div>
        <label>비밀번호:</label>
        <input type="password">
    </div>    

    <div>
        <label>광고 수신 동의</label>
        <input type="checkbox">
    </div>
    <div>
    <a href="/20241231/main.html">메인</a>
    <a href="/20241231/login.html">로그인</a>
    <div></div>
    <button>회원가입 하기</button>
</body>
</html>

 

이렇게 배운 대로 3개를 만들었습니다 

 

오늘 하루 끝~~

'CSS , HTML' 카테고리의 다른 글

가위바위보 상위 버전  (0) 2025.02.03
6일차 로그인 페이지 팝업  (0) 2025.01.09
5일차 개발자 공부  (5) 2025.01.06
4일차 CSS에 대해  (0) 2025.01.03
3일차 html과 css (html , css , 속성 , 식별자 )  (0) 2025.01.03
'CSS , HTML' Related Articles more