본문 바로가기
JAVA

[1227] 웹개발반2 (html)

지윤이다 2022. 12. 27. 19:45

<08>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>

<link rel="stylesheet" href="CSS/Style.css">
    <style>
/* CSS의 주석 */
/* CSS 기본구문
    selector { property : value; property : value; ...} */
p {
    border: 1px solid tomato;
    padding: 30px;
    margin: 50px;
}

#p01 { /* id 가 p01인 element */
    color: magenta;
}

.error { /* class에 error를 갖고 있는 element*/
    color: darkorange;
}
    </style>

</head>
<!--
CSS : Cascading Style Sheets.
HTML elements 들이 화면상에 어떻게 표시될지 기술함.

적용방식 3가지
1. Inline : 시작태그에 style 속성과 함께 기술
2. Internal : <head> 안에 <style> 태그로 기술
3. External : 외부 파일 (*.css) 로 만들고 연결
-->
<body>


<h1> This is a heading1</h1>
<p> This is a paragraph1</p>
<h1> This is a heading2</h1>
<p style="color:yellow;"> This is a paragraph2</p>

<hr>

<h1> This is a heading3</h1>
<p> This is a paragraph3</p>
<p id="p01"> I am different1 </p>

<hr>

<p> This is a paragraph4</p>
<p> This is a paragraph5</p>
<p class="error"> I am different2.</p>
<p> This is a paragraph6</p>
<p class="error"> I am different too.</p>

</body>
</html>

<09>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HyperLinks</title>

<style>
    a {
        text-decoration: none; /*기본 밑줄 제거*/
    }

a:link { /*기본 상태*/
    color: green;
}

a:visited{ /* 방문했던 상태*/
    color: pink
}

a:hover { /* 마우스가 올라간 상태 */
    color:red;
    text-decoration: underline;
}

a:active { /* 클릭한 상태 */
    color:blue;
    text-decoration: underline;
}

</style>

</head>

<!--
기본 구문: <a href="url">link text </a>
target attribute
_blank - 새 윈도우나 탭에
_self - 현재 브라우저 창에 (디폴트)
_parent - 상위 frame 에
_top - 최 상위 윈도우에

-->
<body>
    <a href="https://www.naver.com"> 네이버</a>
    <br>
    <a href="https://www.daum.net" target="_blank"> DAUM </a>
    <br>
    <!-- 이미지 링크 -->
    <a href="https://www.w3schools.com/">
    <img src="https://www.w3schools.com/html/smiley.gif" alt="HTML tutorial">
</a>

</body>
</html>

 

<10>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image</title>
</head>
<!--
    <img> 이미지 태그

    src : 이미지 경로 지정
        웹에서 가용한 이미지 포맷 3가지
        *.jpg : 압축률 높음(손실압축), 큰 이미지에 사용
        *.gif : 256색, 투명지원, 아이콘등 작은 이미지에 적합,
        *.png : 알파(투명도)지원, 픽셀당 4byte. ㅁㄲ휴

    alt : 이미지가 없는 경우 보여지는 글자, 웹접근성에서 시각적

    width, height : 브라우저에서 표현하는 이미지 크기

    경로지정 시 참조
    .  : 현재 디렉토리
    .. : 부모 디렉토리

-->
<body>

    <!-- 상대경로: 현재 경로에 대해 상대적-->
<img src="pulpitrock.jpg" alt="Mountain view" width="500" height="377">
<br>
<img src = "../img/pulpitrock.jpg" alt="Mountain View" width="500" height="377">
<img src = "../img/pulpitrock.jpg" alt="Mountain View" width="500" height="600">

    <!-- 절대경로 -->
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="">




</body>
</html>

 

<11 : Table 1>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table1</title>
<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }

    th, td {
        padding: 15px;
    }

    table {
        width: 100%;
    }
</style>

</head>
<!--
HTML 문서에 '표' 를 나타내기 위한 태그로 <table>
    다음 태그들과 같이 사용된다.
<tr> : table row
<th> : table data
<th> : table header
    실제 내용을 담는 태그는 th, th 다.
<thead> : table header 들을 담는 태그
<tbody> : table body 들을 담는 태그

정렬관련 (th, th 에 적용)
좌우 정렬: text-align
세로 정렬: vertical-align

-->
<body>
   
<table>
    <thead>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td style="text-align: center;">4</td>
        <td style="background-color: yellow;">5</td>
        <td style="text-align: right;">6</td>
    </tr>
    <tr style="height: 150px;">
        <td style="vertical-align: bottom;">7</td>
        <td style="text-align:right">8</td>
        <td style="vertical-align:top";>9</td>
    </tr>
    </tbody>
</table>



</body>
</html>

<12 : List 1>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>List1</title>
</head>
<!--
    <ul> Unordered List
    <ol> Orderde List

    style 적용시 '어느 element' 에 '어느 style' 을 적용시켜야 하는지
    
    list-style-type 의 값은
    disc(디폴트) / circle / square / none 이 있다.
    
    type 값은
        1 숫자 (디폴트)
        A 알파벳 대문자
        a 알파벳 소문자
        I 로무숫자 대문자
        i 로마숫자 소문자
-->
<body>
    <h2>Unordered List</h2>
    <ul>
        <li>Coffee</li>
        <li>tea</li>
        <li>Milk</li>
    </ul>

    <hr>
    <h2>Ordered List</h2>
    <ol>
        <li>Coffee</li>
        <li>tea</li>
        <li>Milk</li>
    </ol>

    <hr>
    <h2>Unordered List + 'list-style-type'</h2>
    <ul style="list-style-type: square;">
        <li>Coffee</li>
        <li>tea</li>
        <li>Milk</li>
    </ul>

    <hr>
    <h2>Ordered List + 'type'</h2>
    <ol style="list-style-type: upper-alpha;">
        <li>Coffee</li>
        <li>tea</li>
        <li>Milk</li>
    </ol>

    <hr>
    <h2>Description List</h2>

    <hr>
    <h2>A Nested List</h2>
    <ul>
        <li>Coffee</li>
        <li>tea</li>
            <ul>
                <li>Black tea</li>
                <li>Green tea</li>
            </ul>
        <li>Milk</li>
    </ul>


</body>
</html>

<12-2 : List 2>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>List2</title>
<style>


    ul {
        list-style-type: none;
        background-color: #333333;
        overflow: hidden;

    }

    li {
        float: left;
    }

    li a {
        text-decoration: none;
        color: white;
        padding: 16px;
        display: block;
        text-align: center;
    }

    li a:hover {
        background-color: #111111;
    }


</style>
</head>
<!-- 오늘날 웹에서 li, ol 은 메뉴 작성에도 많이 사용됨. -->
<body>

    <ul>
        <li><a href="https://www.naver.com">네이버</a></li>
        <li><a href="https://www.daum.net">DAUM</a></li>
        <li><a href="https://www.nate.com">네이트</a></li>
        <li><a href="https://www.msn.com">MSN</a></li>
    </ul>
    
</body>
</html>

<12-3 : Table 2>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table2</title>
<style>
table, th, td {
    border: 1px solid black; /* 두께, 선종류, 선색상 */
    border-collapse: collapse; /* border 붙이기*/
}

th, td {
    padding: 15px; /* 셀 안쪽의 컨텐트와 border 사이 여백*/
}

th {
    text-align: left;
}

table {
    width: 100%;
}
</style>

</head>
<!--
colspan : 열병합
rowspan : 행병합
-->
<body>

    <table>
        <tr>
            <th>Name</th>
            <th>Telephone</th>
            <th>Mobile</th>
        </tr>
        <tr>
            <td>Bill Gates</td>
            <td>55577854</td>
            <td>55577855</td>
        </tr>
    </table>
    <br>
    <table>
        <tr>
            <th>Name</th>
            <th colspan="2">Telephone</th>
      
        </tr>
        <tr>
            <td>Bill Gates</td>
            <td>55577854</td>
            <td>55577855</td>
        </tr>
    </table>
    <br>
    <table>
        <tr>
            <th rowspan ="2">Name</th>
            <th>Telephone</th>
            <th>Mobile</th>
        </tr>
        <tr>

            <td>55577854</td>
            <td>55577855</td>
        </tr>
    </table>

    <br>
    <table>
        <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td style="text-align: center;">4</td>
            <td rowspan="2" colspan="2" style="background-color: yellow;">5</td>
         
        </tr>
        <tr style="height: 150px;">
            <td style="vertical-align: bottom;">7</td>

        </tr>
        </tbody>
    </table>
    
</body>
</html>

 

<13>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav {
            list-style-type: none;
            background-color:yellow;
            margin:0;
            padding:0;
            text-align: center;
        }

        .nav li {
            font-size: 20px;
            padding: 20px;
            display: inline-block;
        }
    </style>
</head>
<!--
'모~든' HTML elements 들은 display 스타일 값을 가지고 있다.

1. display: block

    block 속성 elements 들은 '항상' 새 라인에서 시작하고
    가용한 좌우폭을 다 차지한다.
    CSS height. width 속성이 적용됨.

    디폴트 display 속성이 block 인 element 들.
    <div>,<h1> ~ <h6>, <p>, <table>, <ol>, <ul> ..

2. display: inline

    inline 속성 element 들은 새 라인에서 시작하지 않고
    필요한 만큼의 좌우폭만 차지한다
    ** CSS height. width 속성이 적용 안됨
    CSS의 padding-left 와 padding-right는 적용되나
        padding-top, padding-bottom 은 적용 안 됨
    
    
     디폴트 display 속성이 inline 인 element들.
     <span> <a> <img <imput> <label> <button> <textarea>
        * 위 몇개 정도만 디폴트가 inline이고 나머지는 block 이다.
        
        HTML에서 대표적인 grouping 목적의 태그 두가지
        <div> Defines a section in a document (block0level)
        <span> DEfines a section in a document (inline)

3. display : none /* 해당 요소 감추기 */

4. display : inline-block
    element 들끼리는 inline 으로 배치되고,
    element 는 block처럼 동작 (width, height 적용됨)
-->
<body>
    
<div style="background-color: lime; padding: 5px;">
    div 요소입니다
 <div style="background-color: yellow;"> div 안의 div입니다</div>
 <div style="background-color: pink;"> div 안의 div입니다</div>
 <div style="background-color: violet;"> div 안의 div입니다</div>
</div>

<br>
<!-- display:block 요소에는 width, height 가 적용됨-->
<div style="background-color: lime; padding: 5px; width:300px; height:250px;">
    div 요소입니다
 <div style="background-color: yellow; width:200px; height:80px;"> div 안의 div입니다</div>
 <div style="background-color: pink;"> div 안의 div입니다</div>
 <div style="background-color: violet;"> div 안의 div입니다</div>
</div>

<br>

<span style="background-color: lime; padding: 5px;">
    span 요소입니다
    <span style="background-color: yellow; width:100px; height:100px; ">span안의 span</span>"
</span>

<br><br>
<hr>

<div style="background-color: cyan; display:inline;">
    Inline 적용된 div 입니다
</div>

<br><br>

<span style="background-color:cyan; display:block;">
    block 적용된 span 입니다
</span>

<span style="background-color:cyan; display:none;">
    block 적용된 span 입니다
</span>

<br><hr>
<h2>inline-block</h2>
<ul class="nav">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About us</a></li>
    <li><a href="#clients">Our Clients</a></li>
    <li><a href="#contatc">Contact Us</a></li>
</ul>



</body>
</html>

<14>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id class name</title>

    <style>
    p { 
        font-size:200%;
    }

    p#demo { /* id=demo인 p element에 적용 */
        background-color: cyan;   
    }

    p.c1 { /* class 에 c1을 가진 p element에 적용 */
        color: red;
    }

    p.c2 {
        background-color:yellow; 
    }
   
    p.c1.c2 {
        border: 2px dotted limegreen;
    }

    </style>
</head>
<!--
HTML 에서 element를 식별하는 수단 3가지 (attribute)

1. id
    : 고유(unique)한 element 식별용으로 사용
    : 사용처: CSS, JavaScript

2. class
    : 그룹으로 여러 element에 적용
    : 한 element에 복수 class 적용 가능.
    : 사용처: CSS, JavaScript

3. name
    : 주로 form 관련 element에 적용
    : 사용처: JavaScript, 서버프로그래밍(PHP, JSP 등..)
                서버에 데이터를 전송할 때는 반드시 name 사용

-->
<body>
 
<p id="demo">id = demo</p>   
<p class="c1">class="c1"</p>
<p class="c2">class="c2"</p>
<p class="c1 c2">class="c1 c2"</p>

<p id="demo"> id = demo 또?</p>

아이디: <input type="Text" size="20" name="userid">


</body>
</html>

 

 

저작자표시 비영리 동일조건 (새창열림)

'JAVA' 카테고리의 다른 글

[0116] 자바 기본 (형변환)  (0) 2023.01.16
[0114] JAVA1 - 자바의 기본  (0) 2023.01.15
[1226] 웹개발반1 (html)  (0) 2022.12.26
Java2 Day01  (0) 2022.09.24
[11] JAVA_DAY11  (0) 2022.08.10

'JAVA' Related Articles

티스토리툴바