HTML 복습 및 CSS 공부 시작

Javascript

HTML 복습 및 CSS 공부 시작

big whale 2021. 5. 23. 21:59

첫날에 HTML을 공부하면서 이해가 부족하다고 느꼈던 Image & Multimedia, Forms, Structure

다시 예제를 풀면서 복습했다.

HTML

Image & Multimedia

오디오파일이나 비디오파일을 브라우저에 띄울 때 각 브라우저마다 지원하는 확장자가 다르기 때문에 source태그를 넣어준다

<!DOCTYPE html>
<html>
    <body>
        <h2>노래 듣기</h2>
        <audio controls>
            <source src="../../Downloads/음악/노래1.mp3">
            <source src="../../Downloads/음악/노래1.ogg">
        </audio>
        <br>
        <h2>영상 보기</h2>
        <video controls>
            <source src="../../Downloads/동영상/영상1.mp4">
            <source src="../../Downloads/동영상/영상1.webm">
        </video>
    </body>
</html>

Forms

아래 코드상에서 액션에 해당되는 주소로 들어가보니 데이터 묶음들이 있었고

id,username,city를 모두 입력한 후 Submit 버튼을 눌러야 데이터를 볼 수 있게 만든 후 데이터셋을 하나 골라서 value를 입력했다.

<!DOCTYPE html>
<html>
    <body>
        <form action="http://jsonplaceholder.typicode.com/users" method="get">
            ID: <input type="text" name="id" value="2"><br>
            username: <input type="text" name="username" value="Antonette"><br>
            city: <input type="text" name="address.city" value="Wisokyburgh">
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

fieldset,checkbox type,color type, option을 활용해서 설문조사 형식의 폼을 만들어 보았다.

<!DOCTYPE html>
<html>
  <body>
      <fieldset style="width: 300px; text-align: center;" >
      <h2>설문조사</h2>
      <p>1. 좋아하는 운동</p>
      <input type="checkbox" name="soccer" value="soccer">축구<br>
      <input type="checkbox" name="horse" value="horse">승마<br>
      <input type="checkbox" name="boat" value="botat">요트타기
      
      <p style="color: green;">2. 좋아하는 색상</p>
      <input type="color" name="color" value="color"><br>
      
      <p>3. 먹고싶은 과일</p>
      <select name="buy fruit">
          <option value="melon">Melon</option>
          <option value="gold-apple" disabled>Gold Apple</option>
          <option value="Apple">Apple</option>
      </select><br><br>
      <input type="button" value="Submit" onclick="alert('Completed!')">
      </fieldset>
  </body>
</html>

Structure

만들고 싶은 테이블을 그림판으로 그린 후에 style tag와 table tag 를 이용해서 코드를 짜봤다.

<!DOCTYPE html>
<html>
    <head>
        <style>
            table,th,td {
                border: 1px solid black;
                border-collapse:collapse;
                padding: 20px;
            }
            th {
                background-color: gray;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th></th>
                <th>
                    <img src="../스크린샷 2021-05-21 오후 1.02.38.png" width="200px" height="200px">
                </th>
                <th>영희</th>
            </tr>
            <tr>
                <td rowspan="3">취미</td>
                <td>독서</td>
                <td>요리</td>
            </tr>
            <tr>
                <td>운동</td>
                <td>명상</td>
            </tr>
            <tr>
                <td>노래</td>
                <td></td>
            </tr>
        </table>
    </body>
</html>

style 태그에 th가 중복해서 들어가 있어서 둘 중 하나만 적용되지 않을까 생각했지만 두개 다 적용이 되었다.

CSS

CSS 기본 문법

h1 {color:red;font-weight:bold;}

h1: 셀렉터(Selector, 선택자)

color,font-weight: 프로퍼티(Property,속성)

red,bold: 값(Value,속성값) 값을 지정할 경우 특정 단위로 지정해야 한다는 특징이 있다.

Reset Css

브라우저 별로 제각각인 디폴트 스타일을 하나의 스타일로 통일시켜주는 역할

Eric Meyer's reset
normalize.css

다양한 셀렉터들

Universal Selector - *

html 문서 내의 html 요소를 포함한 모든 요소를 선택한다.

<style>
	* {color: red;}
</style>

Id Selector - #아이디명

모든 p 태그를 선택한 후 id="p2"인 p 태그만 선택을 다시 해보았다. id="p2"인 부분만 따로 적용이 되는걸 확인했다.

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                color:red;
                font-family: 'Courier New', Courier, monospace;
            }
            #p2 {
                font-weight: 800;
                color:blue;
            }
        </style>
    </head>
    <body>
        <p>Hello World!</p>
        <p>This paragraph is styled with CSS.</p>
        <p id="p2">paragraph</p>
    </body>
</html>

Class Selector - .클래스명

이번에는 클래스 셀렉터를 div 태그에 넣은 후 id="p3"인 p 태그를 지정해 보았다.

<!DOCTYPE html>
<html>
    <head>
        <style>
            #p3 {color: initial;}
            .container {color: purple;}
        </style>
        <body>
            <div class="container">
                <h1>h1</h1>
                <p>paragraph 1</p>
                <p>paragraph 2</p>
                <p id="p3">paragraph 3</p>
                <p>paragraph 4</p>
                <p>paragraph 5</p>
            </div>
        </body>
    </head>
</html>

style 태그에서 #p3를 먼저 작성해도 해당 p 태그의 color는 초기값 상태가 나왔다.

Attribute Selector

해당 태그 중에서 해당 어트리뷰트를 가진 것들만 지정되는 셀렉터다.

<!DOCTYPE html>
<html>
    <head>
        <style>
            a[href] { color: red; }
            a[target="_blank"] {
                color: initial;
            }
        </style>
    </head>
    <body>
        <a href="http://www.naver.com">네이버</a><br>
        <a href="http://www.vanillacoding.co">바닐라코딩</a><br>
        <a href="http://www.google.com" target="_blank">구글</a>
    </body>
</html>

a 요소 중 href를 갖는 모든 요소에 적용되고 a 요소 중 target값이 _blank인 요소는 색상을 초기값으로 지정한다.

Descendant Combinator(후손 셀렉터) - 셀렉터A 셀렉터B

셀렉터A의 모든 하위 요소 중 셀렉터B와 일치하는 요소를 선택한다.

<style>
	div p {color: red;}
</style>
<body>
    <div>
    	<p>hello</p>
        <span><p>hello</p></span>
    </div>
    <p>hi</p>
</body>

출력 결과

: div의 하위요소가 아니라 바깥에 있어서 hi는 빨간색이 적용되지 않았다.

Child Combinator(자식 셀렉터) - 셀렉터A > 셀렉터B

자식 셀렉터는 셀렉터A의 모든 자식 요소 중 셀렉터B와 일치하는 요소를 선택한다.

<style>
	div > p { color:blue;}
</style>
<body>
    <div>
    	<p>Hi guys.</p>
        <span><p>Where are you from?</p></span>
    </div>
</body>

출력 결과

: span 태그 안에 있는 p 태그는 div의 후손이지만 자식이 아니기 때문에 파란색이 적용되지 않았다.

Pseudo-Class Selector(가상 클래스 셀렉터) - 셀렉터:가상 클래스

가상 클래스는 요소가 특정 상태에 있을 때의 스타일을 정의한다.

예) 마우스가 올라와 있을 때(hover), 방문하거나 방문하지 않은 링크일 때(visited,link) 등

<style>
    a:hover { color: red;}
    input:focus { background-color: yellow;}
</style>

<body>
    <a href="#">Hover me</a><br>
    <input type="text" placeholder="focus me">
</body>

출력 결과

Pseudo-Element Selector(가상 요소 셀렉터) - 셀렉터::가상 요소

가상 요소는 요소의 특정 부분에 스타일을 적용하기 위하여 사용된다.

예) first-letter(첫글자),first-line(첫줄),after(요소의 뒷공간),before(요소의 앞공간),selection(드래그된 부분)

<style>
    p::first-letter { font-size: 10em; }
    p::first-line { color: purple; }
    h1::before { content: "!!"; color: red;}
    h1::after { content: "!!"; color: green;}
</style>

<body>
    <h1>Hi Everyone.</h1>
    <p>Css is very delicious!</p>
</body>

출력 결과