백학도령
블로그 이미지
----------고3----------/응용 프로그래밍

[고3 응용 프로그래밍] 문법

백학도령
|2025. 3. 18. 14:40

문서 기본 구조

!→tab
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
Lorem→tab
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi quaerat numquam molestiae error quibusdam quos, adipisci aspernatur vitae sapiente reiciendis dolorem, dolor ipsum doloremque laboriosam quia sed aut vero illum.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[제목]</title>
</head>
<body>
    <!--주석-->
</body>
</html>

 

텍스트

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>제목</title>
</head>
<body>
    <h1>제목1</h1>
    <h2>제목2</h2>
    <h3>제목3</h3>
    <h4>제목4</h4>
    <h5>제목5</h5>
    <h6>제목6</h6>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문단</title>
</head>
<body>
    <p>문단1</p>
    <hr> <!-- 수평선 -->
    <p>문단2</p>
    <br> <!-- 공백 -->
    <p>문단3</p>
</body>
</html>

 

사진과 링크

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>사진</title>
</head>
<body>
    <img src="images/baghak.png" alt="폴더 안 사진">
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>링크</title>
</head>
<body>
    <a href="baghakdorung.tistory.com">바로가기</a>
</body>
</html>

 

목록

ul>li{순서 없는 목록}*3→tab
<ul>
    <li>순서 없는 목록</li>
    <li>순서 없는 목록</li>
    <li>순서 없는 목록</li>
</ul>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>목록</title>
</head>
<body>
    <ul>
        <li>순서 없는 목록</li>
        <li>순서 없는 목록</li>
        <li>순서 없는 목록</li>
    </ul>
    <ol start="3" type="a">
        <li>스마트보안솔루션과</li>
        <li>모빌리티메이커과</li>
        <li>인공지능소프트웨어과</li>
        <li>게임소프트웨어과</li>
    </ol>
</body>
</html>

 

스타일

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>인라인 스타일</title>
</head>
<body>
    <p style="color:blue; background: yellow;">스타일</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내부 스타일</title>
    <style>
        p {
            color:blue;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>스타일</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>외부 스타일</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <p>스타일</p>
</body>
</html>
 css
  ㄴ style.css
p {
    color: blue;
    background-color: yellow;
}

 

태그선택자

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>전체 선택자</title>
    <style>
        * {
            margin: 0;
        }
    </style>
</head>
<body>
    <img src="images/baghak.png" alt="백학">
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
    initial-scale=1.0">
    <title>태그선택자</title>
    <style>
        p {
            font-style: italic;
        }
        .accent {
            border: 1px solid #000; /*테두리 선*/
            padding: 5px;             /* 테두리와 내용 사이의 여백*/
        }
        #container {
            width: 500px;             /* 가로 크기 */
            margin: 10px auto;        /* 중앙 배치 */
            padding: 10px;            /* 테두리와 내용 사이의 여백 */
            border: 1px solid #000; /* 테두리 굵기와 색깔 */
        }
        .bg {
            background-color: red;
        }
        h1, p {
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1 class="accent bg">레드향</h1>
        <p>껍질이 붉은 빛이 돌아 <span class="accent">레드향</span>
            이라 불린다.</p>
        <p>레드향은 한라봉과 귤을 교배한 것으로</p>
        <p>비타민 c가 풍부하고 맛이 있다.</p>
    </div>
</body>
</html>

 

스타일시트 우선순위
!important 인라인 스타일 id 스타일 클래스 스타일 타입 스타일
우선 적용 해당 태그에만 적용 한 번만 사용 여러 번 사용 특정 태그에만 적용

 

색상

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>색상</title>
    <style>
        h2 {
            color:blue;
        }
        h3 {
            color: #00f;
        }
        h4 {
            color: rgb(0, 0, 255);
        }
        h5 {
            color: rgba(0, 0, 255, 0.5);
        }
        h6 {
            color: hsl(240, 100%, 50%)
        }
        .box {
            background-color: rgba(0, 0, 255, 0.5);
        }
    </style>
</head>
<body>
    <h1>색상</h1>
    <h2>컬러 네임</h2>
    <h3>hex 코드</h3>
    <h4>RGB color</h4>
    <h5>RGBA color</h5>
    <h6>hls color</h6>
    <div class="box">
        배경에 투명도 적용
    </div>
</body>
</html>

 

단위

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>단위</title>
    <style>
        div {
            background: #ccc;
            margin : 10px 0;
        }
        .px {
            width: 400px;
        }
        .percent {
            width: 50%;
        }
        .parent {
            width: 400px;
        }
        .child {
            width: 50%;
            background: green;
        }
        .vw {
            width: 50vw;
        }
        .vh {
            height: 20vh;
        }
    </style>
</head>
<body>
    <h1>단위</h1>
    <div class="px">400px</div>
    <div class="percent">50%</div>
    <div class="parent">
        <div class="child">50%</div>
    </div>
    <div class="vw">50vw</div>
    <div class="vh">20vh</div>
</body>
</html>

 

글꼴

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>글꼴</title>
    <style>
        body {
            font-family: '돋음', dotum, Helvetica, sans-serif;
        }
    </style>
</head>
<body>
    <h1>CSS폰트 적용하기</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
        Consectetur pariatur eligendi, quod autem rem vel saepe
        eius voluptatum enim suscipit ipsam animi soluta!
        Aperiam ratione architecto porro maxime dolor neque.
    </p>
    <p>
        귀는 그들의 이상을 심장의 생의 이상, 이것이다.
        찬미를 인생에 얼음에 것은 황금시대의 풀이 과실이 보는 것이다
        피가 얼마나 있는 속잎나고, 끓는 튼튼하며, 같이 새 가치를 아름다우냐?
        못할 있음으로써 보이는 설레는 같은 청춘 찾아 앞이 수 있다.
    </p>
</body>
</html>

 

글자 정렬

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트 정렬</title>
    <style>
        body {
            width: 600px;
            border: 1px solid;
            margin: 0 auto;
        }
        .right {
            text-align: right;
        }
        .left {
            text-align: left;
        }
        .center {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>글자 정렬</h1>
    <p class="right">text align right</p>
    <p class="left">text align left</p>
    <p class="center">text align center</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Ex, quaerat iusto? Illum ducimus officiis dolore officia error,
        repudiandae eos praesentium, neque minima quibusdam odit!
        Libero eligendi earum animi dolor sunt.
    </p>
    <p class="justfy">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Ex, quaerat iusto? Illum ducimus officiis dolore officia error,
        repudiandae eos praesentium, neque minima quibusdam odit!
        Libero eligendi earum animi dolor sunt.
    </p>
</body>
</html>

 

글자 장식

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트 장식</title>
    <style>
        .none a {text-decoration: none;} 
        .underline {text-decoration: underline;} 
        .overline {text-decoration: overline;} 
        .linethrough {text-decoration: line-through;}
        .dotted {text-decoration: underline dotted red;}
        .dashed {text-decoration: underline dashed red;}
        .wavy {text-decoration: underline wavy red;}
        .both {text-decoration: overline underline solid red;}
    </style>
</head>
<body>
    <h1>글자 장식</h1>
    <p class="none"><a href="">text.decoration:none</a></p>
    <p class="underline">text.decoration:underline</p>
    <p class="overline">text.decoration:overline</p>
    <p class="linethrough">text.decoration:linethrough</p>
    <p class="dotted">text.decoration:dotted</p>
    <p class="dashed">text.decoration:dashed</p>
    <p class="wavy">text.decoration:wavy</p>
    <p class="both">text.decoration:both</p>
</body>
</html>

 

글자 두께

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트 두께</title>
    <style>
        body {font-family: '굴림', sans-serif;}
        body p {font-size: 30px;}
        .weight1 {font-weight: 100;}
        .weight2 {font-weight: 500;}
        .weight3 {font-weight: 700;}
        .thin {font-weight: 100;}
        .normal {font-weight: normal;}
        .meidum {font-weight: medium;}
        .bold {font-weight: bold;}
    </style>
</head>
<body>
    <h1>글자 두께</h1>
    <p class="weight1">font-weight:100</p>
    <p class="weight2">font-weight:500</p>
    <p class="weight3">font-weight:700</p>
    <p class="thin">font-weight:100</p>
    <p class="normal">font-weight:normal</p>
    <p class="medium">font-weight:medium</p>
    <p class="bold">font-weight:bold</p>
</body>
</html>
저작자표시

'----------고3---------- > 응용 프로그래밍' 카테고리의 다른 글

[고3 응용 프로그래밍] 자동완성  (4) 2025.03.24
  1. 문서 기본 구조
  2. 텍스트
  3. 사진과 링크
  4. 목록
  5. 스타일
  6. 태그선택자
  7. 색상
  8. 단위
  9. 글꼴
  10. 글자 정렬
  11. 글자 장식
  12. 글자 두께

티스토리툴바