HTML (1)

ysh·2023년 6월 22일

Spring Boot

목록 보기

5/53

LiveServer 플러그인 설치 시 Alt + L, Alt + O로 바로 실행 가능

기본 스타일

<!-- 태그의 기본적인 스타일 -->
<h1> 기본 스타일 </h1>

속성

- 공통 속성

<!-- 모든 태그가 사용할 수 있는 공통 속성이 있다. (id, class 등) -->
<h1 id="title" class="title">제목</h1>
<div id="myDiv" class="my-Div">문단</div>

- 특수 속성

<!-- 특정 태그만 사용 가능한 특수 속성이 있다. (a herf 등) -->
<a id="myA" class="my-a" href="https://google.com">링크</a>

a는 선박의 닻(앵커)의 첫글자

구조

<!-- DOCTYPE은 문서의 타입 명시 -->
<!-- 아래는 html 5버전 -->
<!DOCTYPE html>

<!-- html --> 
<!-- 문서의 시작(필수) -->
<html lang="en">

<!-- head -->
<!-- 문서의 메타데이터(필수) -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My homepage</title>
</head>

<!-- body -->
<!-- 문서의 내용이 들어가는 부분(필수) -->
<body>
    
</body> 
</html>

블록과 인라인

- block

블록을 쌓은 것처럼 화면의 한 줄을 모두 차지

- inline

태그가 내용만 감쌈
한 줄에 여러개, 높이 넓이 설정 X

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        div {
            font-size: 40px;
            background-color: red;
            height: 100px;
            
        }
        span {
            font-size: 40px;
            background-color: red;
            /* inline 태그인 span 태그는 높이, 넓이 설정 불가 */
            height: 100px;
        }
        /* class style은 .으로 */
        .ib {
            background-color: green;
            height: 200px;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div>블록 태그</div>
    <span>인라인 태그</span>
    <span>인라인 태그</span>
    <div class="ib" style="display: inline-block;">인라인 블록 태그</div>
    <div class="ib" style="display: inline-block;">인라인 블록 태그</div>
</body>
</html>

- inline-block

한줄에 여러개, 높이 넓이 설정 가능

부모, 자식, 형제

<!-- 부모 -->
    <div>
        <!-- 자식 간의 관게는 형제 -->
        <div class="first">첫째 자식</div>
        <div>둘째 자식</div>
        <div>
            <div>첫째 손자</div>
        </div>
    </div>

- 줄바꿈

<div><div><a href="https://www.google.com">구글</a></div><div>
<a href="https://www.naver.com">네이버</a></div><div>
<a href="https://aws.amazon.com/ko">AWS</a></div></div>

Ctrl + Alt + L (Prettier 플러그인 설치 시)

<div>
  <div>
    <a href="https://www.google.com">구글</a>
  </div>
  <div>
    <a href="https://www.naver.com">네이버</a>
  </div>
  <div>
    <a href="https://aws.amazon.com/ko">AWS</a>
  </div>
</div>