될때까지

HTML 스터디 본문

학습/JavaScript, TypeScript

HTML 스터디

랖니 2022. 3. 7. 22:39
728x90

지난주에 무작정 따라했던 장고 프로젝트가 끝났다. 

작성했던 포스팅들에 이어서 장고를 마저 정리해야하는데, 장고를 하다 보니 갑자기 궁금해진 웹.

무조건 복붙해서 붙이던 프론트엔드 관련 코드들이 무슨 뜻일까 궁금하잖아?🧐

그래서 오늘은 HTML + CSS 기초 강의들을 들으면서 공부를 했다. (참고 유튜브 : 생활코딩/이수안/개발자의 품격)

역시 프론트는 눈에 결과가 바로바로 나타나서 배우는 재미가 참 쏠쏠하다!!

 

 

1. HTML ?

HyperText Markup Language의 약어로, 문서와 문서가 링크로 연결되어 있고 <시작태그></닫히는태그>와 같이 태그 형식으로 이루어진 언어다.

<태그이름 속성 = "속성값"> 내용 </태그이름>

 

닫는 태그가 없을 수 있으며, 이는 단일태그라고 한다.

모든 태그마다 가지고 있는 속성들이 다 다르다. (속성은 태그를 추가 설명해주는 명령어라고 생각하자)

 

 

2. HTML 기본 구조

* 아래 적은 태그와 속성들은 개인적으로 공부하며 적은 내용들이라 빠진 속성들이 있을 수 있습니다 :)

* 상단 태그는 색칠을 해서 표현했고, 꺽쇠가 없는 아이들은 하위태그 및 속성을 정리한 내용입니다.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML 스터디 시작</title>
    </head>
    <body>
        <h1>HTML 기초</h1>
        <p>오늘부터 뉴싹이는 html스터디에 들어갔습니다. 역시나 재밌습니다. </p>
        <hr>
    </body>
</html>

 

<!DOCTYPE html> 웹 문서가 어떤 버전의 html 언어로 작성되었는지 알 수 있는 부분으로, 최상단에 기재하는 태그이다.
<html> ~ </html> HTML 문서의 시작과 끝을 나타낸다. 
<head> ~ </head> HTML 문서에 대한 "정보"들을 기재하는 영역으로, 아래와 같은 태그들을 적을 수 있다. 
<title> ~ </title>      상단바에 표시될 '사이트의 제목' 적는 부분
<meta charset="utf-8">     문자 인코딩 방식 기재
<style> ~ </style>      HTML문서 내부에 CSS 작성할 때 사용한다.
<script> ~ </script>     HTML 문서 내부/외부에서 JS 작성 or 불러올 때 사용한다.
<body> ~ </body> HTML 문서의 실질적인 내용이 등장하는 부분으로, 아래와 같은 태그들을 적을 수 있다.
<h1> ~ </h1>     제목 태그로 1번부터 6번까지 있다. 숫자가 작을수록 글씨 크기가 크다.
<p> ~ </p>     단락을 나타내는 태그
<br>     강제 줄바꿈 태그이다. 하지만 br태그를 남발하는 건 좋지않다.
<hr>     문단을 의미적으로 분리하고자 할 때 쓰는 수평선 태그(줄긋기)
<div> ~ </div>     HTML 문서 분할할 때 쓰인다(영역 지정하는 태그)

 

 

3. 이미지 태그

<img src="happy.jpg" width="900" height="800" alt="행복한 이미지" title="행복해보이는 커플의 사진입니다.">

 

<img> ~ </img> 이미지 삽입할 때 쓰는 태그이다.
 src    이미지 파일의 위치를 적는다.
width    가로 크기
height    세로 크기
title     이미지에 대한 설명을 적는 부분으로, 이미지에 마우스를 갖다대면 적은 내용(툴팁)이 나타난다.
alt    이미지가 없을 때, 대체할 텍스트를 적는다.

 

 

4. 표 태그

<!DOCTYPE html>
<html>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>이름</th> <th>성별</th> <th>음식</th> <th>가격</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>뉴싹</td> <td>여</td> <td>떡볶이</td> <td>3000</td>
                </tr>
                <tr>
                    <td>뉴싹1</td> <td>남</td> <td rowspan="2">김치볶음밥</td> <td rowspan="2">9000</td>
                </tr>
                <tr>
                    <td>뉴싹2</td> <td>여</td>  
                </tr>
            </tbody>

            <tfoot>
                <tr>
                    <td colspan="3">합계</td> <td>21000</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

 

<table> ~ </table> 표를 생성하는 태그이다.
border     테이블 테두리 두께를 나타내는 속성
<thead> ~ </thead>     테이블의 제목들을 묶는 태그
<tbody> ~ </tbody>     테이블의 데이터를 묶는 태그
<tfoot> ~ </tfoot>      테이블의 아래부분을 묶는 태그
<tr> ~ </tr>     table row 행
<th> ~ </th>     table header 테이블 칸들을 정의하는 태그(표의 상단바)
<td> ~ </td>     table data 테이블 한 칸(실제 테이블 데이터)
rowspan     같은 행의 칸을 병합할 때 사용
colspan     같은 열의 칸을 병합할 때 사용

 

                 

5. 폼 태그

<!DOCTYPE html>
<html>
    <body>
        <form action="입력한 정보 어디로 보낼지 여기다 적음"> 
            <p>아이디 : <input type="text" name="id" value="아이디를 입력하세요."></p>
            <p>닉네임 : <input type="text" name="nickname"></p>
            <p>비밀번호 : <input type="password" name="pw"></p>
            <input type="submit">
        </form>
    </body>
</html>

 

<form> ~ </form> 사용자가 웹 사이트에 데이터를 전송할 때 쓰는 태그이다. (로그인, 회원가입 등)
action     보내는 데이터가 도착할 곳을 기재한다.
method     GET은 도메인에 보낸 데이터가 그대로 나타나서 보안에 취약하다.
    POST는 데이터가 암호화되어 나타나기 때문에 보안이 필요한 로그인이나 회원가입에 주로 사용된다.    
<input> ~ </input>     입력받을 데이터들의 양식을 정하는 태그
type     text : 일반 텍스트
    password : 비밀번호처럼 암호화 처리
    submit : 데이터 전송용 버튼
    radio : 단일값 선택
    checkbok : 다중값 선택
    hidden : UI는 없지만 서버로 데이터를 전송하고 싶을 때 사용    외
name     서버로 전달될 때 파라미터의 이름
value     기본값 설정

 

 

6. 앵커 태그

<a href="https://www.google.com" target="_blank">구글</a>

 

 <a> ~ </a> 하나의 페이지에서 다른 페이지로의 연결을 할때 사용하는 태그
href     이동할 목적지 링크를 적는 곳
target      이동할 페이지가 열릴 위치를 나타냄
     = _blank : 새 창에서 열기
     = _self : 현재 창에서 열기

 

 

7. 리스트 태그

<!DOCTYPE html>
<html>
    <body>
        <ol type="a">
            <li>1등</li>
            <li>2등</li>
            <li>3등</li>
        </ol>
        <ul>
            <li>떡볶이</li>
            <li>피자</li>
            <li>치킨</li>
        </ul>
    </body>
</html>

 

<ol> ~ </ol> ordered list 순서가 있는 리스트
type     a : 소문자 알파벳 순서
    A : 대문자 알파벳 순서
    i : 로마 숫자 소문자 순서
    I : 로마 숫자 대문자 순서
<ul> ~ </ul> unordered list 순서가 없는 리스트
style="list-style-type : ____"     circle : 속이 빈 원형
    square : 까만 사각형
    none : 기호 안보임
728x90
저작자표시 비영리 변경금지

'학습 > JavaScript, TypeScript' 카테고리의 다른 글

JavaScript study :: 동등연산자와 일치연산자  (0) 2022.03.14
JavaScript study :: 전위연산자, 후위연산자  (0) 2022.03.14
JavaScript study :: 형변환  (0) 2022.03.14
JavaScript study :: 변수 var, let, const  (0) 2022.03.10
HTML + CSS 간단 프로젝트(by 드림코딩엘리)  (0) 2022.03.09
'학습/JavaScript, TypeScript' Related Articles more