본문 바로가기
중앙정보처리학원/FRONTEND

HTML5 & CSS (1)

by 하지마지 2023. 9. 18.
728x90

HTML : 브라우저에 데이터를 표시해 주는 언어

 

웹표준 : 브라우저마다 같은 결과를 표시하도록 설정된 표준

 

부모 tag : 상위에 있는 태그

자식 tag : 부모태그 안에 있는 태그

손자 tag : 자식태그 안에 있는 태그 

형제 tag : 같은 레벨에 있는 태그

 

UI : 사용자 인터페이스(연결) - 편하게 사용하도록 제작

그림크기, 글자크기, 글자 색상, 콘텐츠(정보) 위치

 

UX : 사용자 경험 (만족도) - 유익한 정보 제공

부담 없는 접근방법, 스토리가 있는 장면, 영원한 선호도 충성심(삼성, 애플) > 매출 증가로 이어짐

 

UX/UI  목표

멋지고 재밌고 유익하게 디자인 하는 것 

 

GOOD 디자인 7항목 : top : 기능성(합목적성) - 실용성

 

VSC 단축키 

 

Ctrl + 크게 보기

Ctrl -  작게 보기 

 

index.html : 웹페이지가 실행될 때 가장 먼저 실행되는 파일 이름

 

 

익스텐션 프로그램 : 코딩을 도와주는 확장 프로그램

Live Server : 실행 결과를 즉시 보기

Elm Emmet : 빠르게 칠 수 있도록 도와줌 

Auto Rename Tag  : 앞뒤 태그명을 같게 해 줌 

 

[파일] auto save  : 자동저장

vsc 화면 왼쪽 아래 매니저(설정) - setting 검색창 - 'zoom' 입력 후 휠마우스 체크박스 선택(휠마우스 사용 가능) 

                                                                              - tab 입력 칸 띄우기 

 

태그[명령어]

<br> : 줄 바꿈 태그 
<p> : 문장 태그 - 자동 줄 바꿈 
<p></p> : 자동으로 2줄이 줄바꿈이 됨
<img src="" alt=""> : 그림 태그 
        속성: 태그 안에 쓰는 옵션 ex> src 속성, alt 속성
Shift + alt + ↓  : 밑으로 문장 복사 
<!-- 문서종류 --> : 주석 (Ctrl + /)
<table> : 표만들기
        <tr> : 표 줄 만들기 
        <td> : 표 칸 만들기
        인라인 스타일(inline style) : 태그 안에 스타일을 지정
                    ex)<td style="color: red; font-size: 25px;">
        내부 스타일 : <head>와 <head> 사이에 스타일을 지정 
                   
<!DOCTYPE html>               <!--html(웹파일) 문서종류 -->
<html>                                  <!-- html 시작  -->
    <head>                             <!-- 이 문서의 정보를 알려주는 태그 -->
        <title>웹페이지 제목 연습</title>
        <meta charset="utf-8"><!-- utf-8(유니코드) : 2 바이트 전 세계 언어표시 -->
    </head>

    <body>
        소개팅웹을 만들자
        ok
    </body>
</html>                                  <!-- html 끝 -->
    color: red;                                                 //글자색
            font-size: 25px;                                // 글자 크기
            border: 1px solid black;                   // 테두리 : 두께 선종류  선색상 
margin : 50px;                                            // 여백 : 상하좌우
margin: 50px auto;                                     // 여백 (상하) auto(좌우)
width : 20px                                               //넓이
 
    <table>
        <tr>
            <td>새우햄버거</td>
           
        </tr>
        <tr>
            <td>
                <img src="img/img1.jpeg" alt="햄버거" title="가격은 1000원">
            </td>
        </tr>
    </table>

내부 스타일 

    <style>
        td{
            color: red;
            font-size: 25px;                
            border: 1px solid black;
        }
        img{
            border: 1px solid blue;
        }
    </style>

 

 

선택자 : 대상(개체)을 지정하는 명령어

              class.id. tag, name 기타 등등

              class:. (점)으로 표시, 반복해서 사용 가능

              id     : #(샵)으로 표시. 중복 사용 불가 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>연습용</title>
<style>
    td{
        border: 1px solid black;
        text-align: center;
        font-size: 25px
    }
    .table1 {
        width: 1000px;
        margin: 50px auto;
    }
</style>
</head>
<body>
   
    <table class="table1">
        <tr>
            <td>새우 햄버거</td>
            <td>불고기 햄버거</td>
        </tr>
        <tr>
            <td><img src="img/img1.jpeg" alt="햄버거"></td>
            <td><img src="img/img4.jpeg" alt="햄버거2"></td>
        </tr>
        <tr>
            <td>토마토 햄버거</td>
            <td>치즈 햄버거</td>
        </tr>
        <tr>
            <td><img src="img/img2.jpeg" alt="햄버거3"></td>
            <td><img src="img/img3.jpeg" alt="햠보고"></td>
        </tr>
    </table>
    <p> 선택하세요</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/menu.css">
</head>
<body>
    <table class="menu">
        <tr>
            <td width = "40%" >완전 무료 소개팅웹/앱</td>
            <td width = "15%" onclick="pic.src= 'img/img5.jpeg'">사용방법</td>
            <td width = "15%" onclick="pic.src= 'img/img6.jpeg'">회원가입</td>
            <td width = "15%" onclick="pic.src= 'img/img7.jpeg'">로그인</td>
            <td width = "15%" onclick="pic.src= 'img/img8.jpeg'">About</td>
        </tr>
    </table>
    <p class="imgBox">
        <img src="img/img9.jpeg" alt="고양이" id="pic">
    </p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>달력(스케줄 조절)</title>
    <style>
        .sept {
            margin: 50px auto;
            width: 700px;
            font-weight: bolder;
        }
        .sept tr{

        }
        .sept tr td{
            border: 1px solid black;
            width: 70px; height: 50px;
            font-size: 25px;
            text-align: center;
        }
        .red{
            color: red;
        }
        .blue{
            color: blue;
        }
        .title{
            color: orange;
            background: #000;
        }
        .last{
            height: 300px;
        
        }
        
        .last td img {
            width: 100%;
            height: 300px;
        }
    </style>
</head>
<body>
    <table class="sept">
        <tr>
            <td class="title" colspan="7">2023년 09월</td>
        </tr>
        <tr>
            <td class="red">일요일</td>
            <td>월요일</td>
            <td>화요일</td>
            <td>수요일</td>
            <td>목요일</td>
            <td>금요일</td>
            <td class="blue">토요일</td>
        </tr>
        <tr>
            <td></td><td></td><td></td><td></td><td></td><td>1</td><td class="blue">2</td>
        </tr>
        <tr>
            <td class="red">3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td class="blue">9</td>
        </tr>
        <tr>
            <td class="red">10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td class="blue">16</td>
        </tr>
        <tr>
            <td class="red">17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td class="blue">23</td>
        </tr>
        <tr>
            <td class="red">24</td><td>25</td><td>26</td><td>27</td><td class="red">28</td><td class="red">29</td><td class="red">30</td>
        </tr>
        
        <tr class="last">
            <td colspan="7"><img src="img/img6.jpeg" alt="추석" ></td>
        </tr>
        
    </table>
</body>
</html>
<td width="50%" rowspan="3" class="img">

rowspan 표 열 합

colspan  표 행 합

<img src="img/img1.jfif" alt=""> 
속성 : 태그 안에 쓰는 옵션 
         예) src 속성, alt 속성, title 속성

인라인스타일(inline-style) : 태그 안에 스타일을 지정
내부 스타일 : <head>와 </head> 사이에 스타일을 지정
color: red; // 글자 색
font-size: 25px; // 글자 크기
             border: 1px solid black; // 테두리 : 두께    선종류   선색상
width: 1000px; // 가로 크기 지정
height: 50px; // 높이 지정
             margin: 50px; // 여백 : 상하좌우 50px
margin: 50px auto; // 여백 : 50px(상하)    auto(좌우)


선택자 : 대상(개체)을 지정하는 명령어
class, id, tag, name 기타등등
  class : .(점)으로 표시, 반복 사용 가능
  id     : #(샵)으로 표시, 중복(반복) 사용 못함 

member.html (회원을 소개하는 파일)
  구역설정 : Shift + Alt + 마우스 아래로 드래그
  엔티티코드 : 일반 도형문자나 화폐단위 자주 사용하는 코드 
  

calc.html : 달력(스케즐 체크)

dothome.co.kr

728x90

'중앙정보처리학원 > FRONTEND' 카테고리의 다른 글

자바스크립트 (2)  (0) 2023.09.25
자바스크립트 (1)  (0) 2023.09.22
HTML5 & CSS (4)  (0) 2023.09.21
HTML5&CSS (3)  (0) 2023.09.20
HTML5&CSS (2)  (0) 2023.09.19

관련글

티스토리툴바