국비지원 교육 8일차

Chaehee Sohn·2022년 9월 1일

국비 개발교육 일지

목록 보기

8/28

오늘은 HTML에 이어 CSS까지 !!

HTML에서의 링크

<a href="" target="">
<!-- 
	<a href="도메인주소">
    <a href="이미지경로">이미지 보기</a>
    <a href="">상단으로 이동</a>
    	<a name="top"></a> 을 설정시에는,
        <a href="#top">상단으로 이동</a> 
        	라고 입력해도 상단으로 이동하게 된다.
            하단으로 이동은 #bottom 으로 입력.
        
<!--
	target="self" => 현재 브라우저에서 페이지 열림
    target="blank" => 새로운 브라우저에서 페이지 열림 ("new")
    target="parent" => 부모 프레임에서 문서 열림
    target="blank" => 창의 전체 본문에서 문서 열림
  default 는 self 로 설정되어 있다. -->

테이블 만들기

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
</head>

<body>
    <h3>테이블 만들기</h3>
    <table width="200" height="200" border="1" bgcolor="gray" background="img01.jpg" align="center" cellpadding="0"
        cellspacing="0">
        <tr>
            <td width="50" height="50" align="center" valign="top" bgcolor="red">1</td>
            <td width="50" height="50" align="right" valign="top">1</td>
            <td width="50" height="50" align="center" valign="middle">1</td>
            <td width="50" height="50" align="left" valign="bottom">1</td>
        </tr>
        <tr>
            <td width="50" height="50" align="right" valign="top">2</td>
            <td width="50" height="50" align="center" valign="bottom">2</td>
            <td width="50" height="50" align="right" valign="bottom">2</td>
            <td width="50" height="50" align="center" valign="top">2</td>
        </tr>
        <tr>
            <td width="50" height="50">3</td>
            <td width="50" height="50">3</td>
            <td width="50" height="50">3</td>
            <td width="50" height="50">3</td>
        </tr>
        <tr>
            <td width="50" height="50">4</td>
            <td width="50" height="50">4</td>
            <td width="50" height="50">4</td>
            <td width="50" height="50">4</td>
        </tr>
    </table>

    <br><br>
    <h3>colspan을 활용해 가로행 merge</h3>
    <table width="200" height="200" border="1" bgcolor="gray" background="img01.jpg" align="center" cellpadding="0"
        cellspacing="0">
        <tr>
            <td width="50" height="50" align="center" valign="top" bgcolor="red">1</td>
            <td width="50" height="50" align="right" valign="top">1</td>
            <td width="50" height="50" align="center" valign="middle">1</td>
            <td width="50" height="50" align="left" valign="bottom">1</td>
        </tr>
        <tr>
            <td width="50" height="50" align="right" valign="top" colspan="2">2</td>
            <td width="50" height="50" align="right" valign="bottom">2</td>
            <td width="50" height="50" align="center" valign="top">2</td>
        </tr>
        <tr>
            <td width="50" height="50">3</td>
            <td width="50" height="50" colspan="3">3</td>
        </tr>
        <tr>
            <td width="50" height="50">4</td>
            <td width="50" height="50">4</td>
            <td width="50" height="50">4</td>
            <td width="50" height="50">4</td>
        </tr>
    </table>

    <br><br>
    <h3>rowspan을 활용해 세로열 merge</h3>
    <table width="200" height="200" border="1" bgcolor="gray" background="img01.jpg" align="center" cellpadding="0"
        cellspacing="0">
        <tr>
            <td width="50" height="50" align="center" valign="top" bgcolor="red" rowspan="2">1</td>
            <td width="50" height="50" align="right" valign="top" rowspan="3">1</td>
            <td width="50" height="50" align="center" valign="middle">1</td>
            <td width="50" height="50" align="left" valign="bottom">1</td>
        </tr>
        <tr>


            <td width="50" height="50" align="right" valign="bottom">2</td>
            <td width="50" height="50" align="center" valign="top">2</td>
        </tr>
        <tr>
            <td width="50" height="50">3</td>

            <td width="50" height="50">3</td>
            <td width="50" height="50">3</td>
        </tr>
        <tr>
            <td width="50" height="50">4</td>
            <td width="50" height="50">4</td>
            <td width="50" height="50">4</td>
            <td width="50" height="50">4</td>
        </tr>
    </table>
</body>

</html>

cellpadding - specifies the space between the cell content and its borders.
cellspacing - specifies the space between the cells.
colspan - to merge columns
rowspan - to merge rows

스타일시트 선언

<!--내부 스타일시트 선언-->
<style type="text/css">
	선택자 {
    	속성: 속성값;
        속성: 속성값;
    }
</style>

<!--외부 스타일시트 선언-->
<link rel="stylesheet" type="text/css" href=/css/style.css/>
또는,
@import url(파일경로)

<!--인라인 스타일시트 선언-->
<태그 style='속성: 속성값; 속성: 속성값;' />

스타일시트의 구성요소

선택자
- html 문서에서 스타일을 정의할 대상을 의미
- 하나 또는 그 이상의 선택자 지정 가능
- 선택자 나열은 ","로 구분한다
선언
- 선택자에게 지정한 스타일을 의미
- 속성과 속성값으로 구성되어있고 그 사이에 ":"로 구분한다.
- 선언은 반드시 ";"로 끝나야한다

선택자

전체 선택자: 현재 문서 안에 전체적으로 공통 스타일 선언할 때 사용. 선택자 기호 "*"
태그 선택자: 특정 태그에 기본값을 선언할 때 사용. 선택자 기호 없이 태그명{}.
id 선택자: 특정 요소 하나만 지정해서 스타일 적용 선택자 기호 "#"
class 선택자: 특정 요소 하나만 스타일을 적용, 또는 여러 요소의 스타일을 동시에 적용. 선택자 기호 "."

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <!--내부스타일시트 선언-->
    <style type="text/css">
        * {
            color: violet;
        }

        p {}

        h2 {}

        span {}

        li {}

        .txt01 {
            color: tomato;
        }

        #txt02 {
            color: olivedrab;
        }
    </style>


</head>

<body>
    <p class="txt01">프론트엔드 개발</p>
    <h2 class="txt01">프론트엔드 개발</h2>
    <span id="txt02">프론트엔드 개발</span>
    <ul>
        <li>프론트엔드 개발</li>
        <li class="txt01">프론트엔드 개발</li>
        <li>프론트엔드 개발</li>
        <li>프론트엔드 개발</li>
        <li>프론트엔드 개발</li>
    </ul>
    
 </body>
 
 </html>

그 외 다양한 text decoration

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <!--내부스타일시트 선언-->
    <style type="text/css">
        .txt01 {
            font-family: '궁서체';
            color: rgb(255, 4, 4);
            font-size: 50px;
            font-weight: 900;
        }

        .name {
            font-variant: small-caps;
        }

        #ttl {
            font-style: italic;
        }

        .txt02 {
            font-size: 20px;
            color: yellowgreen;
            /* line-height: 35px;
            line-height: 100%;  */
            line-height: 1.7;
            letter-spacing: 0;
            word-spacing: 0px;
            /*1.2 ==120%/
            /* text-indent: 200px; */
            text-indent: 0;

        }

        .txt03 {
            font-size: 20px;
            text-decoration: underline;
            text-decoration-color: aquamarine;
            text-decoration-style: dotted;
            text-transform: capitalize;
        }

        .txt04 {
            font-size: 20px;
            text-decoration: overline;
            text-decoration-color: gold;
            text-decoration-style: double;
            text-transform: lowercase;
        }

        .txt05 {
            font-size: 20px;
            text-decoration: line-through;
            text-decoration-color: royalblue;
            text-decoration-style: dashed;
            text-transform: uppercase;
        }

        .txt06 {
            text-align: center;

        }
    </style>


</head>

<body>
    <p class="txt01">프론트엔드 개발01</p>
    <p>CHERI SOHN /// cheri sohn</p>
    <p class="name"> cheri sohn</p>
    <h2 id="ttl">프론트엔드 개발</h2>
    <span id="txt02">프론트엔드 개발</span>
    <address style="font-style: normal ; font-size: 50px; ">address</address>
    <ul>
        <li>프론트엔드 개발</li>
        <li>프론트엔드 개발</li>
        <li>프론트엔드 개발</li>
        <li>프론트엔드 개발</li>
        <li>프론트엔드 개발</li>
    </ul>

    <p class="txt02">
        <span class="txt03">프론트abcd</span>엔드 개발<br>
        <span class="txt04">프론트abcd</span>엔드 개발<br>
        <span class="txt05">프론트abcd</span>엔드 개발<br>
        프론트엔드 개발<br>
        프론트엔드 개발
    </p>

    <p class="txt06">text01</p>
    <span class="txt06">text02</span>

</body>

</html>

.
.
.
.
.
거의 교수님의 화면을 보며 받아적기에 불과했지만 예전에 학교에서 CSS를 잠깐 배운 적이 있는데, 그때 참 어려웠던 기억이 있다. 어렵다기보단.. 뭔가 되게 복잡하던? 그런 기억....그래서 사실 조금 쫄았었다. 그리고 html 로도 색깔 지정 및 간단한 디자인 요소는 할 수 있는데 굳이 복잡한 CSS를 쓰나? 싶었었다.

하지만 오늘 강사님이 몇몇 요소를 가르쳐주시고는 테이블 만드는걸 보여주시면서 이게 어떻게 실제로 웹사이트를 만드는 데 쓰이는 지 잠깐 보여주셨다.
보다보니, 그리고 배우고나서 보니, CSS를 사용하면 훨씬 간편하고 또 다양하게 디자인요소를 넣을 수 있다는걸 깨달았다. 또 w3c school에 설명이 잘 나와있어서 실제로 내 프로젝트를 진행하며 자주 쓰이는 부분은 외우고, 모르는 부분은 찾아봐가면서 하면 충분히 잘 익힐 수 있을 것 같다 :)

HTML과 CSS는 이젠 너무 쉬워서 개발 언어로도 안쳐준다고들 하는데, 그래도 뭔가 VS Code도 사용하고 하니까 이제 진짜 개발 배우는구나! 하고 실감이 난다.
화이팅 :D

Chaehee Sohn

손체리

이전 포스트

국비지원 교육 7일차

다음 포스트