6일차 내용 정리

채공부·2025년 5월 29일

기본적인 PAGE는 3가지로 구성
1. HTML 형식의 문자열
2. CSS 형식의 문자열
3. javaScript 형식의 문자열

HTML
화면상 약간의 디자인과 함께 정보를 단순히 나열

CSS
화면의 디자인 설계

javaScript
웹페이지의 역동적인 동작을 부여

주석

Oracle     :  --
HTML       :  <!---->
CSS        :  /**/
JavaSCript :  //

HTML

폴더와 파일 생성 후 해당 파일에 ! + TAB => 기본 틀 생성

LIVE SERVER 다운로드, 방화벽 포트 열기

검사 : (F12) 웹서버 구동, INDEX 페이지

CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 페이지</title>
    <!--CSS-->
    <style>
        h1{
            color:#0f0;
        }
        h2{
            color:#f00;
        }
    </style>
</head>
<!--HTML-->
<body>
    <h1>안녕하세요 저는 박명수 입니다!</h1>
    <h2>나의 첫번째 웹페이지</h2>
    <button onclick="clicked()">누르기</button>
    <!--JAVASCRIPT-->
    <script>
        function clicked(){
            document.querySelector("button").style.width = "100px";
            document.querySelector("button").style.height = "100px";
        }
    </script>
</body>
</html>

RESULT

ex) 본인의 이름과 성별, 취미를 아래에 작성해라

XML 문서 예시

<person>
	<name>박명수</name>
	<gender>여자</gender>
	<hobby>분좋카 가기</hobby>
</person>

or

<person name = "박명수" gender = "여자" hobby = "분좋카 가기"/>

JSON 형식

("name":"박명수", "gender":"여자", "hobby":"분좋카 가기")

or

{
'name":"박명수"
"gender":"여자"
"hobby":"분좋카 가기"
}

HTML 문서 기본 구조

<html> <!--tag명이 html, element명이 html-->
<head>
	<title>문서 제목</title>
</head>
<body>
	<h1>헤더</h1>
    <p>이것은 HTML 페이지의 본문입니다.</p>
    <a href="https://example.com">예제 링크</a>
</body>
</html>

링크 걸기

<h1>헤더</h1>
    <p>이것은 HTML 페이지의 본문입니다.</p>
    <a href="https://naver.com">예제 링크</a><br>
    <!--a href=""></a> innerTExt안 쪽에 작성하는 문자열-->
    <a href="hello.html">hello 예제</a><br>
    <!--같은 폴더 위치에 존재해야한다-->
    <a href="/html/hello.html">hello 예제</a><br>

BLOCK 요소

위에서 아래로 쌓여짐

<div>
  <h1>블록 요소 예시</h1>
  <p>이 문장은 블록 요소로 처리되는 문단입니다.</p>
</div>

INLINE 요소

좌측에서 우측으로 쌓여짐

div

블록 요소, 특별한 의미는 없지만 레이아웃을 나눌 때 주로 사용
CSS 적용 용이

  • class
    동일한(특정) 그룹으로 묶기 위해 사용
    class와 id는 css, javascript에서 사용
    CSS 적용 용이

top, right, bottom, left
명시 안 하면 마주보는 것이 적용된다

CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test01</title>
    <style>/*class 속성의 value가 container인 요소에 적용할 css*/
        .container{ /* <-선택자 (Selector)*/
            width: 80%; /*width를 80%로 제한*/
            margin: 0 auto; 
            /*위(top), 아래(bottom) margin 0, 좌(left), 우(rigth) margin auto*/
            background-color: #f3f3f3;
            padding: 20px;
            border-color: red;
            border-style: dotted;
        }

        .header, .content, .footer{
            padding:10px;
            margin:10px 0;
        }

        .header{
            background-color: #4CAF50;
            color:white;
        }
        .content{
            background-color: #ffffff;
        }
        .footer{
            background-color: #DDD;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>헤더</h1>
    <p>이것은 HTML 페이지의 본문입니다.</p>
    <a href="https://naver.com">naver로 이동</a><br>
    <!--a href=""></a> innerTExt안 쪽에 작성하는 문자열-->
    <a href="hello.html">hello 예제</a><br>
    <!--같은 폴더 위치에 존재해야한다-->
    <a href="/html/hello.html">hello 예제</a><br>
</body>
</html>

RESULT

css에서 설정

ex) margin : 0 auto;

top, right, bottom, left 로 시계방향 순서
명시를 안 했다면 설정된 마주보는 값이 적용

p

블록 요소

CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test01</title>
</head>
<body>
	<p>이것은 첫 번째 문답입니다. 문단 태그를 사용하여 텍스트를 문단 단위로 나눌 수 있습니다.</p>   
    <p>이것은 두 번째 문단입니다. 문단 태그는 텍스트를 그룹화하여 읽기 쉽고 정도된 형태로 표시해 줍니다.</p>
</body>
</html>

RESULT

hn

블록 요소
HEADER로 헤드라인 작성 시 사용

CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test01</title>
</head>
<body>
    <h1>이것은 페이지의 주요 제목입니다 (h1)</h1>
    <p>여기에는 페이지의 주요 내용을 소개하는 문장이 올 수 있습니다</p>

    <h2>이것은 첫 번째 섹션의 제목입니다.(h2)</h2>
    <p>첫 번째 섹션의 내용을 설명하는 문단입니다.</p>

    <h3>첫 번째 소제목입니다. (h3)</h3>
    <p>소제목에 대한 상세한 설명이 들어갈 수 있습니다.</p>

    <h2>이것은 두 번째 섹션의 제목입니다.(h2)</h2>
    <p>두 번쨰 섹션의 내용을 설명하는 문단입니다.</p>
</body>
</html>

RESULT

ul

순서가 필요 없는 목록 만들 때 사용
반드시 li가 따라나옴 (li은 폭을 100% 다 차지하고 있다)
CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test01</title>
</head>
<body>
        <h2>과일 목록</h2>
    <ul>
        <li>사과</li>
        <li>바나나</li>
        <li>체리</li>
        <li>포도</li>
    </ul>
</body>
</html>

RESULT

ol

순서가 필요한 목록 만들 때 사용
반드시 li가 따라나옴

CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test01</title>
</head>
<body>
    <h2>순서 있는 목록</h2>
    <ol>
        <li>HTML 배우기</li>
        <li>CSS 배우기</li>
        <li>JavaSCript 배우기</li>
        <li>프론트엔드 개발 완성</li>
    </ol>
</body>
</html>

RESULT

table

vs code에서 html 자동 정렬
        window : shift + alt + f
        mac : shift + option + f

CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test01</title>
</head>
<body>
    <h2>학생 성적표</h2>
    <table>
        <tr>
            <th>이름</th>
            <th>과목</th>
            <th>점수</th>
        </tr>

        <tr>
            <td>박명수</td>
            <td>수학</td>
            <td>90</td>
        </tr>

        <tr>
            <td>유재석</td>
            <td>국어</td>
            <td>100</td>
        </tr>
    </table>
</body>
</html>

RESULT

thread

CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test01</title>
</head>
<body>
	<h2>회원 정보</h2>
    <table>
        <thead>
            <tr>
                <th>이름</th>
                <th>나이</th>
                <th>직업</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>박명수</td>
                <td>25</td>
                <td>돈많은 백수수수수퍼노바</td>
            </tr>

            <tr>
                <td>김미영</td>
                <td>38</td>
                <td>팀장장</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

RESULT

TAG 자동완성

Cheat sheet

a

href

링크 삽입

<a href="https://XXX.com">외부 페이지로 이동</a>
<a href="/test01.html">내부 페이지로 링크</a>

target

링크가 열리는 방법을 설정

  1. _self: 현재 탭에서 링크 (기본값)
  2. _blank: 새 탭에서 링크
  3. _parent: 상위 프레임에서 링크
  4. _top: 가장 상위 프레임에서 링크
<a href="https://XXX.com" target="_blank">새 탭에서 열기</a>

section

책갈피

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test01</title>
    <style>
        .spacer{
            height: 500px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <h1>HTML 책갈피 기능 예제</h1>

    <!-- 책갈피 링크 -->
    <a href="#section1">섹션 1로 이동</a>
    <a href="#section2">섹션 2로 이동</a>

    <div class="spacer"></div>

    <!-- 책갈피 목적지 -->
    <h2 id="section1">섹션 1</h2>
    <p>여기는 섹션 1의 내용입니다.</p>

    <div class="spacer"></div>

    <h2 id="section2">섹션 2</h2>
    <p>여기는 섹션 2의 내용입니다.</p>

    <div class="spacer"></div>
</body>

</html>

span

인라인 요소
디자인X CSS로 직접 스타일 변경

strong

인라인 요소
중요한 강조 시 사용

b

인라인 요소
의미가 없는 굵기

em

인라인 요소
감정적인 강조 시 사용

im

인라인 요소
의미가 없는 굵기

강조 예시

CODE

<p>이 문장에는 <span class="highlight">강조된 부분</span>이 포함되어 있습니다.</p>

<p>천리 길도 <b>한걸음</b> 부터</p>
<p>천리 길도 <strong>한걸음 </strong>부터</p>
<p>천리 길도 <i>한걸음</i>부터</p>
<p>천리 길도 <em>한걸음</em>부터</p>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test01</title>
    <style>
        .highlight{
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>이 문장에는 <span class="highlight">강조된 부분</span>이 포함되어 있습니다.</p>
    <p>천리 길도 <b>한걸음</b> 부터</p>
    <p>천리 길도 <strong>한걸음 </strong>부터</p>
    <p>천리 길도 <i>한걸음</i>부터</p>
    <p>천리 길도 <em>한걸음</em>부터</p>
</body>
</html>

RESULT

공백 띄우기

CODE

 -----
|<div>|
 -----		=> \t<div>\n\t\t하나\n (중간에 \t와 \n이 존재함)
    -----
    |하나|
    -----
    둘
    셋
    	네엣
        	다섯섯
</div>

'&nbsp(는 무시)'와 br 삽입

    <div>
&nbsp;&nbsp;&nbsp;&nbsp; 하나<br>
        둘<br>
        세엣<br>
            네엣<br>
                다섯<br>
    </div>

RESULT

code와 pre

code

고정폭 글꼴
줄 바꿈X

pre

긴 코드 블록 표시할 경우 사용
코드의 줄 바꿈과 들여쓰기 유지 가능

code, pre, code와 pre의 결합

<div>
	function clicked(){
		xxx...
		yyy...
    }
</div>
<pre>
	function clicked(){
		xxx...
		yyy...
    }
</pre>
<pre>
	<code>
		function clicked(){
			xxx...
			yyy...
		}
	</code>
</pre>

RESULT

profile
채공부
학원 공부 내용 정리
이전 포스트

DBeaver 설치

다음 포스트

7일차 내용 정리

0개의 댓글