HTML+CSS

[HTML] 기초개념 복습 및 class, id

져니져니95 2021. 3. 15. 18:24

오늘은 지난번에 이해 기초 개념들을 다시 배워보았다....

 

1. HTML은 무조건 '< '요걸로 시작해서' >' 요걸로 끝나야함

열고 닫는 개념이 굉장히 중요중요!!!!

 

2.태그 OR 엘리먼트 개념에 대해서도 들었는데...아직 완전히 잘 이해가 가지는 않는다.

<>안에 태그 OR 엘리먼트 말고 다른 내용이 들어간다면 그것은 속성값이란건 확실히 알았음,,,

EX) <input type> 이 경우에 input은 태그 or 엘리먼트에 속하고, type은 속성값이다.

 

3. 블록, 인라인 개념

블록은 한줄을 다 차지하는거! 블록들도 옆으로 붙고싶어하는 성질은 있지만 이전 블록이 한줄을 다 차지하기 때문에 옆에 붙고싶어도 다음줄에 정보가 입력될 수밖에 없다. 

이전에 세로개념으로 인지했었는데 오늘 설명을 다시 들어보니 세로개념과는 다른거같기도하다...

인라인은 글자수만큼만 자리를 차지한다. 

내가 느끼기에 블록은 무조건 한줄을 차지해서 욕심쟁이같고, 인라인은 자기가 필요한만큼만 자리를 차지하는 착한 친구같다.....

 

<!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>
        *{
            margin:0;
            padding:0;
        }
        .top{
            background:blue;
            width: 400px;
            height: 400px;
            color:#fff;
        }
        #bottom{
            background:red;
            width: 200px;
            height: 200px;
            color:#fff;

        }
    </style>
</head>
<body>
    <DIV class="top">
        <div id="bottom">
            bottom
        </div>
    </DIV>
   
</body>
</html>

 

 

파일1.html
0.00MB

 

 

 

!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>
        *{
            margin:0;
            padding:0;
        }
        #top{
            background:blue;
            float:left;
        }

        #bottom{
            background:red;
            float:left;
        }
        #footer{
            background: yellow;
            float:left;
        }
        #footer2{
            background: purple;
        }
    </style>
</head>
<body>
    <div id="top">
        top
    </div>
    <div id="bottom">
        bottom
    </div>
    <div id="footer">
        footer
    </div>
    <div id="footer2">
        footer2
    </div>
    <div id="footer3">
        footer3
    </div>
    <div id="footer4">
        footer4
    </div>
    <div id="footer5">
        footer5
    </div>
</body>
</html>

 

파일2.html
0.00MB

 

 

 4. class는 .으로!, id는 #으로!
<div class="임의값">
지정되었을때 헤드부분에서 style로 묶어서 효과를 줄때는 --> .임의값 {}
<div id="임의값">
일때는 --> #임의값{}

요렇게 해줘야함!!!

 

<!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>
        #logo{
            float:left;
        }
        #navi{
            float:right;
        }
        #header{
            width: 1200px;
            height:50px;
        }
        ul,li{
            list-style: none;
        }
        #navi > ul > li{
            float:left;
            width: 100px;
        }
    </style>
</head>
<body>
    <div id="header">
        <div id="logo">logo</div>
        <div id="navi">
            <ul>
                <li><a href="http://naver.com">meun1</a></li>
                <li><a href="http://google.com">meun2</a></li>
                <li><a href="http://daum.net">meun3</a></li>
                <li><a href="http://yahoo.com">meun4</a></li>
                <li><a href="http://kakaocorp.com">meun5</a></li>
            </ul>
        </div>
    </div>    
</body>
</html>

 

파일3.html
0.00MB

일단 써보고 개념 들었을때, 확실히 설명은 못하겠지만 용어들이 어떤 용도로 쓰이는지에 대해서는 감각적으로 파악이 가능한듯하다!
여러번 반복학습하다보면 개념도 완전히 숙지가능하겠지!!!