공부일지

230303_수업_html 테이블 외, css 본문

Computer/공부정리

230303_수업_html 테이블 외, css

이르리의 공부일지 2023. 3. 3. 16:29

 

 

 

1. HTML

 

문법 내용
>표  
<table border="1" width="50%">
        <tr>
            <th>아이디</th>
            <th>이름</th>
            <th>비밀번호</th>
        </tr>
</table>
 *요소
-table: 테이블(표의 안팎선)
-tr: 표의 행
-td: 표의 data 각각
-th: 표의 첫 행(구분행)

*속성
-border: 표의 선 굵기
-width: 표 너비
<style>
        table {
            border : 1px solid black;
            border-collapse: collapse;
        }
</style>
 - border : 테두리 라인 설정 */
- colloapse : 두 줄 테두리를 한 줄 테두리로 스타일 적용 
<style>
td,th {
            padding: 15px;
            text-align: center;
        }
</style>
 -padding: 여백 주기
-text-align: 정렬
<body>
<tr>
            <td>c01</td>
            <td colspan="2">suyeon</td>
</tr>
</body>
 열 합치기(좌우)
<body>
<tr>
            <td rowspan="3">a01</td>
            <td rowspan="3">suyeon</td>
            <td>pw01</td>
</tr>
</body>
 행 합치기(상하)
<table boarder="1">
<caption>테이블 제목</caption>
<tr>
            <th>아이디</th>
            <th>이름</th>
            <th>주소</th>
</tr>
<tr>
            <th>a01</th>
            <th>최수연</th>
            <th>광주 광산구 소촌로</th>
</tr>
</table>
 caption: table 제목 캡션
>목록
  
<style>
        ul {
         list-style-type: square;
        }
</style>
  
<style>
ul.menu {
            padding: 0;
        }
ul.menu > li {
            display: inline;
        }
ul.menu li a {
            background-color: lightblue;
            color: white;
            padding: 10px 20px;
            text-decoration:none;
            border-radius: 10px 10px 10px 10px ;
        }

</style>


<body>
<ul class="menu">
        <li>커피</li>
        <li>차</li>
        <li>음료</li>
        <li>아이스크림</li>
 </ul>
<ul class="menu">
        <li><a href="./01_html_소개.html">커피</a></li>
        <li><a href="./02_html_태그소개.html">차</a></li>
</ul>

</body>
  
<body>
<ul>
        <li>커피(Coffee)</li>
            <ul>
                <li>아메리카노</li>
                <li>라떼</li>
            </ul>
        <li>차(Tea)</li>
        <li>우유(Milk)</li>
</ul>
</body>
  
<body>
<ol type="I">
        <li>감자</li>
        <li>고구마</li>
        <li>토란</li>
</ol>
</body>
  
<body>
<dl>
        <dt>커피 메뉴</dt>
        <dd>-아메리카노, 플랫 화이트</dd>
        <dt>차 메뉴</dt>
        <dd>-보리차, 녹차</dd>
</dl>
</body>
  
>영역 나누기
  
<head>
<title></title>
<style>

header {
[적을 내용]
}

nav {
[적을 내용]
}

section {
[적을 내용]
}

footer {
[적을 내용]
}

</style>
</head>

<body>
<div id="header">
[적을 내용]
</div>


<div id="nav">
[적을 내용]
</div>


<div id="section">
[적을 내용]
</div>


<div id="footer">
[적을 내용]
</div>


</body>
 -header: 머릿말
-nav: 카테고리
-section: 본문
-footer: 아랫글
<head>
<style>
      div.div_style {
            background-color: black;
            color:white;
            padding:20px
            margin:20px;
        }
        div.div_style2 {
            background-color: green;
            color:white;
            padding:20px
            margin:20px;
        }
    </style>
</head>
  
<body>
<div class="div_style">
        <h3>div 블록 태그-1</h3>
        <p>HTML 태그에서 의미를 갖진 않고, <br/>
           영역을 표시하기 위해 주로 사용 <br/>
        </p>
    </div>
    <div class="div_style2">
        <h3>div 블록 태그-1</h3>
        <p>HTML 태그에서 의미를 갖진 않고, <br/>
           영역을 표시하기 위해 주로 사용 <br/>
        </p>
    </div>
</body>
  
#header {
            background-color: black;
            color:white;
            text-align: center;
            padding:5px;
        }
 
        #nav {
            background-color: #eeeeee;
            width: 100%;
            height:30px;
            padding:10px;
            text-align: center;
        }
 
        #section {
            background-color: aliceblue;
            width:50%;
            padding:10px;
            float:left;
        }
        #section2 {
            background-color:bisque;
            padding:10px;
            float:left;
        }

 
        #footer {
            background-color: green;
            color: white;
            text-align: center;
            padding:5px;
            clear:both;
        }
  
>iFrame  
<body>
<iframe width="100%" height="500px" src="./02_html_태그소개.html"
    ></iframe>
</body>		 -iFrame: 하나의 페이지 안에 또 다른 하나의 페이지를 보여줌
<iframe [속성1] [속성2] [속성3]...></iframe>
<body>
<iframe width="100%" height="500px" src="http://www.daum.net"
    name="iframe_view"></iframe>
</body>
 -iframe_view: iFrame을 링크를 눌러야 볼 수 있도록 뷰어 설정
<iframe [속성1] [속성2] [속성3]...name="iframe_view">
</iframe>
 

 

 

 

2.CSS

 

문법 내용
>테이블 행단위 색 입히기  
<head>
    <title>::: 01_CSS기초_테이블_행단위_색입히기 :::</title>
    <style>
        table {
            border-collapse: collapse;
            width:100%;

        }
        th, td {
            padding:8px;
            text-align: left;
            border-bottom:1px solid #ddd;
        }
        tr:hover {
            background-color: yellow;
        }
    </style>
</head>


여기서 ▼이 부분▼
 tr:hover {
            background-color: yellow;
        }
 -hover: 마우스를 갖다댔을 때 속성
<head>
    <title>::: 01_CSS기초_테이블_행단위_색입히기 :::</title>
    <style>
       table {
        border-collapse: collapse;
        width:100%;
       }

       th, td {
        text-align: center;
        padding: 8px
       }

       tr:nth-child(odd) {
        background-color: yellow;
       }
    </style>
</head>

여기서  ▼이 부분▼
  tr:nth-child(odd) {
        background-color: yellow;
       }
  

 

 

'Computer > 공부정리' 카테고리의 다른 글

[python]재밌는 import sys  (0) 2023.03.04
[FE]참고 사이트_html, css  (0) 2023.03.03
230302_수업_HTML 기초문법  (0) 2023.03.03
2023_수업 순서(230126~230713)  (0) 2023.03.02
230301_보충수업_python_Class  (0) 2023.03.02
'Computer/공부정리' Related Articles more