본문 바로가기
kosta/HTML,CSS,JavaScript,JQuery

[HTML] 기초

by 엑츄얼리 2022. 3. 22.

Web

 - HTML : 문서의 구조, 내용

 

 - CSS : 문서의 스타일 (레이아웃)

 

 - JavaScript : 웹의 기능적인 역할

  -> 라이브러리 : JQuery

  -> 프레임워크 : Angular, React, Vue.js

 

CSS 규칙

 - property는 selector에서 바꾸고 싶은 요소 (color, font, width, height, border...)

 

 - value는 property에 적용할 값

 

 - 선택자 그룹화 : 여러 선택자에 동일한 스타일을 적용할 때, comma(,)로 구분하여 나열

 

 - 선언 안에 여러개의 property를 작성할 수 있으며, 이를 semi-colon(j)으로 구분

 

 

스타일 적용방법

 외부 스타일 시트, 내부 스타일 시트, 인라인 스타일 3가지로 분류

 

 

외부 스타일 시트

 - *.css 파일을 <link>나 @import로 HTML문서에 연결하여 사용

 

 - 하나의 css 파일만 수정하면 해당 스타일 시트를 사용하는 모든 페이지에 적용

<!--link-->
<head>
<link rel="stylesheet" type"text/css" href="파일경로/파일명.css">
</head>

<!--import-->
<head>
<style type="text/css">
@import url("파일경로/파일명.css"); <!--@import "파일경로/파일명.css"-->
</style>
</head>

 

 

내부 스타일 시트

 - <style> 을 이용하여 HTML페이지 내부에 CSS를 적용 (<style>은 반드시 <head>안에 작성해야 함

 

 - 내부 스타일 시트는 페이지마다 반복해서 작성해야 함

   => 여러 페이지에 동일한 스타일을 적용할 경우 외부 스타일 시트 사용

<style type="text/css">
	h1{color:blue;}
    p{background-color:yellow; color:red;}
</style>

 

 

인라인 스타일 시트

 - style attribute를 사용하여 개별적인 엘리먼트에 스타일을 적용

 

 - 3가지 스타일 적용 방법 중 가장 먼저 적용

<body>
	<h1 style="color:blue;">Inline Style</h1>
    <p style="background-color:yellow; color:red;">
    Using Inline Style!</p>
</body>

 

 

*

 - HTML 태그를 이용하여 문서에 하이퍼텍스트, 표, 목록, 비디오 등을 포함

 

 - CSS는 HTML이 화면에 보여지는 모습을 정의, CSS를 사용함으로써 하나의 문서를 다양하게 꾸밀 수 있음

 

 - CSS는 HTML문서에서 외부 스타일시트로 연결하거나 문서 내부에 정의하여 사용 가능

 

 

HTML 기초 다지기

HTML 마크업 작성

 

 - <h*> : 제목

 

 - <br> : 엔터

 

 - <strong> : 문자 진하게

 

 - <mark> : 텍스트에 하이라이팅

<!DOCTYPE html>
<html>
<head>
	<title>두번째 html 예제</title>
</head>

<body>
    <h2>애국가</h2>
    동해 물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세<br>
    <q>남산 위에 저 소나무, 철갑을 두른 듯</q>
    바람서리 불변함은 우리 기상일세<br>
    가을 하늘 공활한데 <strong>높고 구름 없이</strong>
    밝은 달은 우리 가슴 일편단심일세<br>
    이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나
    <mark>나라 사랑하세</mark>
    <p>
        - 후렴 -<br>
        무궁화 삼천리 화려강산 대한사람, 대한으로 길이 보전하세
    </p>
</body>
</html>

 

 

DOCTYPE

 현재 문서가 어떠한 현태의 문서인지를 판단하기위한 목적

<!DOCTYPE html>

 

 

HTML 요소 기초

 - HTML tag는 HTML 문서의 구조와 의미를 브라우저로 전달 (대소문자 구별 X)

 

 

Root 요소

 - <html> 태그는 HTML 문서 전체를 정의 (Head + Body로 구성)

 

 - manifest(캐시 저장 위치), xmlns(네임스테이스) 속성 지정 가능

 

 

Head 요소

 - <head> 태그는 브라우저에서 HTML 문서의 머리부분

 

 - <title> (문서의 제목), <meta>, <style>, <script>, <link> 태그 포함 가능

 

 - META : 문서의 작성자, 날짜, 키워드 등 브라우저의 본문에 나타나지 않는 문서에 대한 정보를 나타냄

 

 - name, content을 이용하여 페이지 설명, 제작자, 키워드, 등을 나타냄

 

 - http-equiv 속성을 이용하여 인코딩 설정 및 문서 이동, 새로 고침이 가능

 

 - charset 속성을 이용하여 문서의 인코딩 정보를 설정

 

 

Body 요소

 - id 속성을 이용하여 문서 내에서 태그를 유일하게 식별 가능. (id 속성은 중복되지 않아야 함)

 

 - class 속성을 이용하여 여러 태그에 공통적인 특성( ex)CSS )를 부여할 수 있으며 중복 가능

 

 - <section> 태그를 이용하면 같은 태그를 서로 다르게 표현 (<section> 태그는 글자 크기가 작아짐)

 

 

HTML 마크업 요소

포맷팅 요소

 - 포맷팅 요소 : HTML의 텍스트에 적용하여 특별한 의미를 갖는 요소

                     => 화면에는 동일하게 출력되지만 각 요소가 가진 의미가 다른 것이 있음

 - <cite> 인용의 출처를 나타냄 (글자 기울이기, <EM>은 글자 기울이는 기능만 있지 cite처럼 의미는 없음)

    AS <cite>Harry s.Truman</cite>said,
    <EM>More Imformation</EM> can be found in<cite>[ISO-0000]</cite>.<br/>
    please refer to the following reference number in future
    correspondence:<STRONG>1-234-55</STRONG><br/>

    <abbr title="World Wide Web">WWW</abbr>
    <abbr lang="fr" title="Soci&eacute; Nationale des chemins ce Fer">SNCF</abbr>
    <abbr title="Abbreviation">abbr</abbr>
    <br>
    <br/>

    <code>
        &lt;SCRIPT type="text/javascript"&gt;<br/>
        &lt;!--<br/>
            document.write("test");<br/>
        //--&gt;<br/>
        &lt;/SCRIPT&gt;<br/>
    </code>

 

 

목록형 요소

    <ul>
        <li>HTML</li>
        <li style="list-style-type:circle;">JavaScript</li>
        <li style="list-style-type:square;">CSS</li>
        <li style="list-style-type:disc;">jQuery</li>
    </ul>

    <ol>
        <li>HTML</li>
        <li>JavaScript</li>
        <li>CSS</li>
        <li>Web</li>
    </ol>

    <ol start="10">
        <li>HTML</li>
        <li>JavaScript</li>
        <li>CSS</li>
        <li>Web</li>
    </ol>

    <ol style="list-style-type:upper-alpha";>
        <li>HTML</li>
        <li>JavaScript</li>
        <li>CSS</li>
        <li>Web</li>
    </ol>

    <ol style="list-style-type:lower-roman;">
        <li>HTML</li>
        <li>JavaScript</li>
        <li>CSS</li>
        <li>Web</li>
    </ol>

*

<dl>
    <dt>URL</dt>
        <dd>인터넷상의 각종 자원의 위치를 나타내는 주소</dd>

    <dt>HTML</dt>
        <dd>하이퍼텍스트 기능을 가진 문서를 만드는 언어</dd>
</dl>

<ol>
    <li>WWW와 HTML
        <dl>
            <dt>HTTP(Hyper Text Transmission protocol)</dt>
                <dd>HTTP는 WWW 서비스에서 클라이언트와 서버사이에서 통신할 때 사용하는 통신 프로토콜(protocol)</dd>
            <dt>WWW브라우저</dt>
                <dd>브라우저는 클라이언트에 설치되어 서버로부터 제공받는 정보를 사용자를 위해 재구성하는 역할을 하는 소프트웨어</dd>
        </dl>
    </li>

    <li>HTML 기본형식</li>
        <dl>
            <dt>HTML 태그</dt>
                <dd>태그 속성은 태그가 실제 문서를 표현할 때 필요한 여러가지 환경들을 설정함</dd>
        </dl>
</ol>

 

 

테이블 요소

*

<table border ="1">
    <caption>제목</caption>
    <thead>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
        </tr>
    </thead>

    <tbody>
    <tr>
        <td colspan="2">1</td>
        <td rowspan="2">3</td>
    </tr>

    <tr>
        <td>4</td>
        <td>5</td>
    </tr>
    </tbody>
</table>

 

 

링크 요소

 - <link> 태그를 사용, 문서와 외부 자원을 연결 + <head>에 정의

 

 - rel : 현재 문서와 연결된 문서 사이의 연관관계를 지정

 

 - href : 연결된 문서의 위치를 지정하기 위해 사용

<head>
	<link rel="stylesheet" href="style/css/basic.css">
	<link rel="stylesheet" href="style/css/spring.css">
</head>

 

 

폼 컨트롤 요소

 사용자로부터 데이터를 입력 받아 서버에서 처리하기 위한 용도로 사용

 

input

<form>
	<h2>인풋박스</h2>

	아이디 : <input type="text" name="loginId"> <br>
	패스워드 : <input type="password" name="password"><br>
	전화번호 : <input type="text" name="telephone" size="15" maxlength="11"> <br>
	<input type="reset" value="취소">
	<input type="submit" value="저장">
</form>

 

 

select

<form>
	<h4>셀렉트 박스(드롭다운)</h4>

	<select name="subject" id="selSubject">
		<option value="JAVA">자바</option>
		<option value="HTML">마크업</option>
		<option value="Servlet" selected>서블릿</option>
		<option value="JSP">자바서버페이지</option>
		<option value="ORM">객체-디비 맵핑</option>
	</select>
</form>

 

 

textarea

 

<form>
	<h4>TextArea 여러줄 입력</h4>

	<textarea cols="30" rows="8">기타의견을 입력하시면 됩니다.</textarea>

	<p><textarea cols="30" rows="8" disabled>기타의견을 입력하시면 됩니다.</textarea></p>
</form>

 

 

체크박스, 라디오버튼

<form>
	<h4>체크박스</h4>
	<input type="checkbox" name="JAVA" value="자바">자바
	<input type="checkbox" name="JDBC" value="DB">데이터베이스
	<input type="checkbox" name="SPRING" value="스프링" checked>스프링
    <br>
	
    <h4>라디오버튼</h4>
	<input type="radio" name="fruit" value="사과">사과
	<input type="radio" name="fruit" value="포도" checked>포도
	<input type="radio" name="fruit" value="멜론">멜론
</form>

'kosta > HTML,CSS,JavaScript,JQuery' 카테고리의 다른 글

[AJAX] 맛보기  (0) 2022.03.30
[JavaScript] 웹 브라우저  (0) 2022.03.28
[JavaScript] 기초  (0) 2022.03.26
[html, css] 실습  (0) 2022.03.23
[CSS] 기초  (0) 2022.03.23

댓글