수달이네 기술 블로그

1. HTML기본기 본문

웹/HTML, CSS, JavaScript

1. HTML기본기

슬픈 수달이 2025. 11. 21. 00:36

태그종류

<!-- --> html 주석

/* */ css주석

<h1> </h1> ~ <h6>~</h6> 제목태그 - 블록요소

<b></b>, <strong> </strong> 굵은글씨-인라인요소

<span></span> 인라인요소

<i></i> 기울임 글씨 - 인라인요소

<hr> 한줄 전체 가로선-블록요소

<br> 줄바꿈 - 블록요소

<ol></ol>,<ul></ul>, <li></li> 리스트 태그-블록요소

<table></table>, <tr></tr>, <th></th>, <td></td> 테이블태그-블록요소

<a></a> 링크태그 - 인라인요소

<img> 이미지태그-인라인요소

<label></label>, <input>입력태그-인라인요소

<div></div> 블록요소

블록요소와 인라인요소

블록 요소: 한줄을 전부 차지함

  • 자동 줄바꿈, 안에 인라인요소, 다른 블록요소를 포함함.

인라인요소: 줄바꿈 없이 같은 줄에 이어짐

  • 텍스트 일부, 작은 단위를 꾸밀 때 사용
  • 블록 요소안에서만 정상적으로 꾸밈

CSS(Cascading Style Sheets)

HTML로 만든 웹 문서의 스타일 담당

인라인 스타일

  • 스타일을 적용시킬 태그에 style속성을 사용

내부 스타일

  • <head></head>영역에 <style></style> 태그를 추가하여 사용함.
선택자{
	속성: 속성값;
}
  • 태그선택자 : 태그명
  • 클래스 선택자: .클래스명
  • 아이디선택자: #아이디명
  • 전체 선택자: *

외부 스타일

  • 별도의 css파일을 만들어서 적용시킨다.
  • <head></head>영역에 <link rel=”stylesheet” href=”css파일경로”>

박스모델BoxModel

HTML의 모든 요소는 일정한 영역을 차지한다.

CSS에서는 이러한 영역을 Box Model이라 한다

박스모델의 구성

margin: 바깥여백(테두리 밖의 여백

border: 테두리

padding: 안쪽여백(테두리와 컨텐츠 사이의 여백)

contents: 컨텐츠 영역

블록요소의 박스모델

전체 설정되며 margin설정시 위아래(상하)간격은 중복 적용되지 않는다.

width, height, 정렬이 가능하다.

박스 모델의 CSS속성

내용(컨텐츠)

  • width: 너비;
    • width: 250px;
  • height: 높이
    • height: 100px;
  • 단위는 기본적으로 px단위지만, 그외에 여러 단위가 존재(em, %등)]
  • 인라인 요소는 지정되지 않는다.

테두리(border)

  • border: 굵기 모양(형태) 색상;
    • border: 5px solid red;

margin(테두리와 테두리 사이의 여백, 바깥 여백)

  • margin: 4방향;
  • margin: 상하 좌우;
  • margin: 상 좌우 하;
  • margin: 상 우 하 좌; (시계방향)

padding(테두리와 내용 사이의 여백, 안쪽 여백)

  • padding: 4방향;
  • padding: 상하 좌우;
  • padding: 상 좌우 하;
  • padding: 상 우 하 좌; (시계방향)

text가운데 정렬

.div-block{
		height:100px;
    text-align: center;  
    line-height:100px;
 }

*auto를 사용하면 요소를 중앙에 위치시킨다.

alt-L-O의 웹사이트에서 f12 style탭에서 직접 수정해볼 수도 있다.

  • 하지만 일시적이므로 확인만 하고 고쳐주어야함.

인라인 요소의 박스 모델

전체 설정되며 margin설정시 좌우 간격은 중복 적용되지 않는다.

width, height, 정렬이 되지 않는다.

.span-inline{
    border:2px dotted blue;
    margin: 20px;
    padding: 20px;
    height: 100px;
    width: 100px;
}

컨텐츠

  • height, width 가 적용되지 않는다.

border

margin

padding

버튼 만들기

    <div id = "btn-container">
        <button class = 'btn'>클릭하세요</button>
    </div>

버튼 태그를 통해 만들 수 있다.

.btn{
    background-color: lightcoral;
    color:darkblue;
    /* 버튼의 테두리를 없앤다, 브라우저 기본 버튼은 테두리가 존재하기 때문 */
    border:none;
    padding: 10px 20px;
    /* 버튼의 모양을 둥글게 만든다  */
    border-radius: 10px;
    /* 마우스를 올렸을 때 손가락 모양으로 바꿔준다 */
    cursor:pointer;
}

.btn:hover{
    /* 마우스가 버튼 위로 올라갔을 때 스타일을 바꿔줄 수 있다 */
    background-color: lightgoldenrodyellow;
    color:red;
}

hover를 통해 스타일을 바꿔줄 수 있다.

  • 버튼은 기본 기능이 클릭이 가능한 버튼이라는 것이다.
  • 접근성등의 기능이 들어가 있어서 엔터, 태그 등으로 접근이 가능하도록 되어있따. html상의 기능이 특별한 것.

사진넣기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>프로필 사진</title>
    <link rel="stylesheet" href="./../css/profile.css">

</head>
<body>
    <h1>고양이</h1>
    <img src="./../resource/cat.jpg">
</body>
</html>

위처럼 사진을 넣어줄 수 있으며

body{
    background-color: aquamarine;
    border: 1px solid black;
    padding: 50px;
}

img{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 2px solid red;
}

이처럼 꾸며줄 수도 있다.

움직이는 박스 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>움직이는 박스</title>
    <link rel="stylesheet" href="./../css/move.css">
</head>
<body>
    <div class="box">😍</div>
    <!-- <div class = "box">😴</div> -->
</body>
</html>

body{
    background-color: gray;
    padding:50px
}

.box{
    width:100px;
    height:100px;
    background-color: bisque;
    color: white;
    text-align: center;
    line-height: 100px;
    border-radius: 10px;

    position: relative; 
    /* 자신의 원래 위치를 기준으로 left이동 가능 */
    animation: moveBox 5s infinite alternate;
    /* animation으로 이동하게 만들수 있다. */
}

@keyframes moveBox{
    from{ left:0px}
    to{left:700px}
}

animation특성과 position특성을 활용해 움직이도록 할 수 있다.

시멘틱 태그

태그 자체적으로 의미가 있는 태그

사용이유

header tag

  • 페이지나 섹션의 머리말
  • 로고, 제목, 검색등이 작성되며 한 페이지에 여러개 사용 가능

footer

  • 페이지나 섹션의 꼬리말
  • 저작권, 연락처, 관련 링크 등에 사용

nav

  • 주요 탐색 링크 묶음(사이드 링크를 전부 넣는 것이 아닌 주요 네비만 작성)

main

  • 문서의 핵심 컨텐츠, 문서(페이지)당 1개만

aside

  • 보조 정보(사이드바, 관련글, 광고, 용어 설명)메인과 간접적으로 관련있는 정보

section

  • 문서의 논리적 구역, 보통 제목태그와 함께 사용

article

  • 독립적이고 재사용 가능한 컨텐츠가 들어감(게시글, 카드, 뉴스기사, 댓글 등)
  • 단독적으로 배포해도 의미가 통함

div

  • 많이 사용함

태그 내용중 data같은 것들이 붙어있는 것은 다른 프레임워크(react, view, springboot)를 사용한 것이다.

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

Vive Coding으로 웹페이지 만들기 + GitHubPage  (0) 2025.12.03
2. Javascript(DOM - Document Object Model)  (0) 2025.11.29
1. 자바스크립트기초  (0) 2025.11.25
2. CSS추가 내용  (0) 2025.11.21
'웹/HTML, CSS, JavaScript' Related Articles more