본문 바로가기
2023/HTML

[HTML] 기본 이해하기

by Or0i쿠 2023. 3. 31.

 

230331.zip
0.00MB

 

1.시작

 

 

더보기

파일명이 HTML이 아닌경우 나오지 않는다.

viewport=반응형
더보기
한글로

#wrap +tap

더보기

id는 한번만 사용

2. 다중 div 한번에 속성넣기

 
div를 통해 모두 적용할수 있다

 

레이어 

3. 레이아웃 01

 

더보기

/*주석*/ =  style

<!--주석--> = 

ctrl + / 한줄 주석

 

m0-auto = margin: 0 auto;

주석/*주석*/ =  style   ctrl + / 한줄 주석
<!--주석--> = body
m0-auto margin: 0 auto;
더보기

*  (universal selector)은 전체 모든 요소를 선택하는 CSS선택자이다.

<style>
        *{
            margin: 0; /*바깥쪽 여백*/ 
            padding: 0; /*안쪽여백*/
        }
        #wrap{
            width: 1000px; /*넓이*/
            height: 1300px; /*높이*/
            background-color: beige; /*배경색*/
            /* margin: 100px 200px 300px 400px; 위 오 아 왼 */
            /* margin: 100px; 4면이 모두 100px */
            /* margin: 100px 200px; 
                     위,아래 | 왼, 오*/
            margin: 0 auto; /*위아래 0 | 왼,오 자동 설정*/
             
        }
    </style>

wrap 높이값 맞추기

더보기

wrap 높이값 맞추기

가장 기본이되는 틀의 높이값은 주지 않으면 된다.

→자동으로 가장 긴 높이값을 찾아서 줌 

<!DOCTYPE html>
<html lang="ko">
<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>레이아웃 01</title>
    <style>
        *{
            margin: 0; /*바깥쪽 여백*/ 
            padding: 0; /*안쪽여백*/
        }
        #wrap{
            width: 1000px; /*넓이*/
            height: 1300px; /*높이*/
            background-color: beige; /*배경색*/
            /* margin: 100px 200px 300px 400px; 위 오 아 왼 */
            /* margin: 100px; 4면이 모두 100px */
            /* margin: 100px 200px; 
                     위,아래 | 왼, 오*/
             /* margin: 0 auto;  위아래 0 |왼,오 자동 설정 */
        }
        #header{width: 1000px; height: 100px; background-color: burlywood;}
        #banner{width: 1000px; height: 400px; background-color: red;}
        #content_1{width: 1000px; height: 100px; background-color: yellow;}
        #content_2{width: 1000px; height: 250px; background-color: yellowgreen;}
        #footer{width: 1000px; height: 100px; background-color: black; color: white;}

    </style>
</head>
<body>
    <div id = "wrap">
        <div id="header">헤더</div><!--//header-->
        <div id="banner">배너</div><!--//banner-->
        <div id="content_1">컨텐츠1</div><!--//content_1-->
        <div id="content_2">컨텐츠2</div><!--//content_2-->
        <div id="footer">푸터</div><!--//footer-->

    </div><!--//wrap-->
</body>
</html>

글씨 정리
*  margin: 0;  /*바깥쪽 여백*/ 
 padding: 0; /*안쪽여백*/

 

더보기
<!DOCTYPE html>
<html lang="ko">
<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>레이아웃 01</title>
    <style>
        *{
            margin: 0; /*바깥쪽 여백*/ 
            padding: 0; /*안쪽여백*/
        }
        #wrap{
            width: 1000px; /*넓이*/
            /* height: 1300px; 높이 */
            background-color: beige; /*배경색*/
            /* margin: 100px 200px 300px 400px; 위 오 아 왼 */
            /* margin: 100px; 4면이 모두 100px */
            /* margin: 100px 200px; 
                     위,아래 | 왼, 오*/
             /* margin: 0 auto;  위아래 0 |왼,오 자동 설정 */
        }
        #header{width: 1000px; height: 100px; background-color: burlywood; line-height: 100px;}
        #banner{width: 1000px; height: 400px; background-color: red; line-height: 400px;}
        #content_1{width: 1000px; height: 100px; background-color: yellow;line-height: 100px;}
        #content_2{width: 1000px; height: 250px; background-color: yellowgreen;line-height: 250;}
        #footer{width: 1000px; height: 100px; background-color: black; color: white;line-height: 100px;}
        div{
            text-align: center;
            font-size: 24px;

        }
    </style>
</head>
<body>
    <div id = "wrap">
        <div id="header">헤더</div><!--//header-->
        <div id="banner">배너</div><!--//banner-->
        <div id="content_1">컨텐츠1</div><!--//content_1-->
        <div id="content_2">컨텐츠2</div><!--//content_2-->
        <div id="footer">푸터</div><!--//footer-->

    </div><!--//wrap-->
</body>
</html>

mission

 

더보기
wrap : w1200 h  배경 베이지
header : w1200 h100 배경 연두
banner : w1200 h500 배경 빨강
contents : w1200 h300 배경 핑크
footer : w1200 h100 배경 파랑


글꼴크기 24px
가로정렬 :가운데
<!DOCTYPE html>
<html lang="ko">
<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>레이아웃02</title>
    <style>
    	*{margin: 0; padding: 0;} /*초기화*/
        #wrap{width: 1200px; height: 1000px;background-color: beige;}
        #header{width: 1200px; height: 100px;background-color: greenyellow; line-height: 100px;}
        #banner{width: 1200px; height: 500px;background-color: red;line-height: 500px; font-size: 30px;}
        #contetns{width: 1200px; height: 300px;background-color: pink; line-height: 300px;}
        #footer{width: 1200px; height: 100px;background-color: blue;line-height: 100px; color: white;}
        div{text-align: center;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">HEADER</div>
        <div id="banner">BANNER</div>
        <div id="contetns">CONTENTS</div>
        <div id="footer">FOOTER</div>
    </div>

</body>
</html>

mission

 

더보기
<!DOCTYPE html>
<html lang="ko">
<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>레이아웃03</title>
    <style>
        *{margin: 0; padding: 0;}
        #wrap{width: 1200px;background-color: aquamarine; margin: 0 auto;}
        div{font-size: 35px;text-align: center; text-transform: uppercase;/*소문자를 대문자로*/}
        #header{width: 1200px; height: 100px;background-color: blue;line-height: 100px;}
        #banner{width: 1200px;height: 200px;background-color: pink; line-height: 200px;}
        #contents{width: 1200px;}
        #side{width: 400px;height: 300px;background-color: brown; float: left;}
        #cont{width: 800px;height: 300px;background-color: green;float: left;}
        #footer{width: 1200px;height: 100px;background-color: blueviolet; line-height: 100px; clear: both;/* float: left를 사용하여 레이어가 2층으로 올라갔을 때 막아주는 명령어 */}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">header</div><!--//header-->
        <div id="banner">banner</div><!--//banner-->
        <div id="contents">
            <div id="side">side</div>
            <div id="cont">cont</div>
        </div><!--//contents-->
        <div id="footer">footer</div><!--//footer-->

    </div><!--//wrap-->
</body>
</html>
div(division)레이아웃을 나누는데 사용되는 태그
- 가장 대표적인 블럭구조
text-transform: uppercase;/*소문자를 대문자로*/
clear: both; /* float: left를 사용하여 레이어가 2층으로 올라갔을 때 막아주는 명령어 */

 

%를 이용한 레이아웃
더보기
<!DOCTYPE html>
<html lang="ko">
<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>넓이값을 퍼센트로 사용했을때</title>
    <style>
        *{margin: 0; padding: 0;}
        #wrap{width: 100%;background-color: beige;}
        #header{width: 100%;height: 100px; background-color: aqua;}
        #banner{width: 100%;height: 300px;background-color: aquamarine;}
        #contents{width: 100%;}
        #cont1{width: 33.33%;height: 200px;background-color: green; float:left}
        #cont2{width: 33.33%;height: 200px;background-color: greenyellow;float:left}    
        #cont3{width: 33.33%;height: 200px;background-color: gray;float: left;}
        #footer{width: 100%;height: 100px;background-color: yellow; clear: both;}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">header</div>
        <div id="banner">banner</div>
        <div id="contents">
            <div id="cont1">cont1</div>
            <div id="cont2">cont2</div>
            <div id="cont3">cont3</div>
        </div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

mission
wrap : w100% h 
header : w100% h100 
banner : w100% h300 
ban1: 50%| ban2 : 50%
contents : w100% h200
1-33%| 2-33 | 3- 33
footer : w100% h100
더보기
<!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>전예서</title>
    <style>
        *{margin: 0;padding: 0;}
        #wrap{width: 100%;background-color: antiquewhite;}
        #header{width: 100%;height: 100px;background-color: rgb(170, 170, 170);line-height: 100px;}
        #banner{width: 100%;}
        #ban1{width: 50%;height: 300px;background-color: rgb(127, 127, 219); float: left;line-height: 300px;}
        #ban2{width: 50%;height: 300px;background-color: blueviolet;float: left;line-height: 300px;}
        #contents{width: 100%;clear: both;}
        #cont1{width: 33.33%;height: 200px;background-color: rgb(255, 202, 252);float: left;line-height: 200px;}
        #cont2{width: 33.33%;height: 200px;background-color: rgb(245, 129, 226);float: left;line-height: 200px;}
        #cont3{width: 33.33%;height: 200px;background-color: rgb(255, 85, 170);float: left;line-height: 200px;}
        #footer{width: 100%; height: 100px;background-color: rgb(163, 75, 75); clear: both;line-height: 100px;}
        div{text-align: center;}

    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">header</div>
        <div id="banner">
            <div id="ban1">ban1</div>
            <div id="ban2">ban2</div>
        </div>
        <div id="contents">
            <div id="cont1">cont1</div>
            <div id="cont2">cont2</div>
            <div id="cont3">cont3</div>
        </div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

너무 졸려서 제정시이 아니랍니다 전날의 저를 죽이고싶어요..

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

'2023 > HTML' 카테고리의 다른 글

[HTML] 스크립트 사용법 & 가상요소 활용  (0) 2023.04.07
[HTML] 포지션 활용  (0) 2023.04.06
[HTML] reset / 네비게이션  (0) 2023.04.05
[HTMl] 이미지 / 리스트  (0) 2023.04.04
[HTML] 간단한 기본 홈페이지 구조  (0) 2023.04.03

관련글

티스토리툴바