본문 바로가기
2023/HTML

[HTML] 포지션 활용

by Or0i쿠 2023. 4. 6. 
    <style>
        .wrap{
            width: 800px; 
            border: 5px solid black;
        }

        .wrap .left{width: 400px;height: 400px; background-color: antiquewhite;
        float: left;}
        .wrap .right{width: 400px;height: 400px; background-color: lightblue; 
            float: right;}

    </style>
    <style>
        .clearfix::after, .clearfix::before{content: ""; display: block;clear: both;}
        .wrap{
            width: 800px; 
            border: 5px solid black;
        }

        .wrap .left{width: 400px;height: 400px; background-color: antiquewhite;
        float: left;}
        .wrap .right{width: 400px;height: 400px; background-color: lightblue; 
            float: right;}

    </style>
</head>
<body>
    <div class="wrap clearfix">
        <section class="left"></section>
        <section class="right"></section>
    </div>
</body>
헤더 복습
<!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;}
        #wrap{width: 1200px;height: 100px; margin: 0 auto;}
        .clearfix::after, .clearfix::before{content: ""; display: block; clear: both;}
        #header{width: 1200px; background-color: lavender; }
        #header .logo{width: 200px;height: 100px;background-color: lightblue;
        float: left;}
        #header .nav{width: 600px;height: 50px;background-color: palevioletred; 
            float: right; margin-top: 50px;}

        
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header" class="clearfix">
            <h1 class="logo">로고</h1>
            <div class="nav"></div>
        </div>
    </div>
</body>
</html>
인라인 구조는 넓이가 적용되지 않는다.

  cursor: pointer; 임의로 커서가 손모양으로 바꾸는 명령어  


<!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>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        li{list-style: none;}
        #wrap{width: 1200px;height: 100px; margin: 0 auto;}
        .clearfix::after, .clearfix::before{content: ""; display: block; clear: both;}
        /* header */
        #header{width: 1200px; background-color: beige; }

        #header .logo{width: 200px; height: 100px; background-color: green;
        float: left; }

        #header .nav{width: 600px;height: 50px;background-color: lightgreen; 
            float: right; margin-top: 50px;}
        /* header_.nav_ */
        #header .nav>ul{}
        #header .nav>ul>li{width: 150px;height: 50px;
            background-color: green;color: white; 
            font-size: 18px; text-align: center; line-height: 50px;
            float: left;
            cursor: pointer;
        }
        #header .nav>ul>li:hover{background-color: limegreen;}
        
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header" class="clearfix">
            <h1 class="logo">로고</h1>
            <div class="nav">
                <ul>
                    <li>m1</li>
                    <li>m2</li>
                    <li>m3</li>
                    <li>m4</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
포지션과 서브 메뉴
나머지를 짤라주는 명령어 overflow: hidden;
position: absolute;
 		left: 100px;            top: 0;
화면기준의 자리설정


position: relative;

 

text-transform: uppercase; 대문자변경

position

더보기

static: 기본값으로, 요소는 문서 흐름에 따라 배치됩니다.

relative: 요소를 자신의 정상 위치에서 상대적으로 이동합니다. top, right, bottom, left 속성을 사용하여 이동 거리를 지정할 수 있습니다.

absolute: 요소를 가장 가까운 위치 상위 요소에 상대적으로 배치합니다. 위치 상위 요소가 없으면 문서의 body 요소에 상대적으로 배치됩니다. top, right, bottom, left 속성을 사용하여 위치를 지정할 수 있습니다.

fixed: 요소를 뷰포트의 고정 위치에 배치합니다. 스크롤해도 항상 같은 위치에 남아 있습니다. top, right, bottom, left 속성을 사용하여 위치를 지정할 수 있습니다.

sticky: 요소가 스크롤되는 컨테이너에 대해 상대적인 위치에 고정됩니다. 일정 지점 이하로 스크롤 되면 요소가 고정되어 그 위치에 유지되고, 그렇지 않으면 문서 흐름에 따라 배치됩니다. top, right, bottom, left 속성을 사용하여 위치를 지정할 수 있습니다.

font

더보기
<!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>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+Sinhala:wght@100;200;300;700&display=swap" rel="stylesheet">
</head>
<style>
    *{margin: 0;padding: 0; box-sizing: border-box;}
    li{list-style: none;}
    a{color: #333; text-decoration: none; }
    .clearfix::after, .clearfix::before{content: ""; display: block; clear: both;}

    #wrap{
        width: 1200px; margin: 0 auto;
    }
    #header{width: 100%; height: 100px;}
    #header .logo{
        width: 200px; height: 100px; background-color: pink;
        line-height: 100px; font-family: 'Noto Serif Sinhala', serif; text-align: center
    }
    #header .nav{
        width: ; height: 50px;
    }
    #header .nav{margin-top: -50px;}
    #header .nav>ul{ float: right;}
    #header .nav>ul>li{
        width: 150px; height: 50px; background-color: pink;
        text-transform: uppercase; float: left; position: relative;
    }
    #header .nav>ul>li>a{
        display: block; text-align: center; line-height: 50px;
    }
    /* nav_sub */
    #header .nav>ul>li> .sub{position: absolute; left: 0;  z-index: 10;}
    #header .nav>ul>li> .sub>li{
        width: 150px; height: 50px; background-color: lightcoral;
        text-align: center; line-height: 50px;
    }
    #header .nav>ul>li> .sub>li>a{}
</style>
<body>
    <div id="wrap">
        <div id="header" class="clearfix">
            <h1 class="logo"><Label>LOGO</Label></h1>
            <nav class="nav">
                <ul class="clearfix">
                    <li><a href="#">menu1</a>
                    <ul class="sub">
                        <li><a href="#">서브메뉴_1</a></li>
                        <li><a href="#">서브메뉴_2</a></li>
                        <li><a href="#">서브메뉴_3</a></li>
                        <li><a href="#">서브메뉴_4</a></li>
                    </ul>
                    </li>
                    <li><a href="#">menu2</a>
                        <ul class="sub">
                            <li><a href="#">서브메뉴_1</a></li>
                            <li><a href="#">서브메뉴_2</a></li>
                            <li><a href="#">서브메뉴_3</a></li>
                            <li><a href="#">서브메뉴_4</a></li>
                        </ul></li>
                    <li><a href="#">menu3</a>
                        <ul class="sub">
                            <li><a href="#">서브메뉴_1</a></li>
                            <li><a href="#">서브메뉴_2</a></li>
                            <li><a href="#">서브메뉴_3</a></li>
                            <li><a href="#">서브메뉴_4</a></li>
                        </ul></li>
                    <li><a href="#">menu4</a>
                        <ul class="sub">
                            <li><a href="#">서브메뉴_1</a></li>
                            <li><a href="#">서브메뉴_2</a></li>
                            <li><a href="#">서브메뉴_3</a></li>
                            <li><a href="#">서브메뉴_4</a></li>
                        </ul></li>
                </ul>
            </nav>
        </div>
        <section id="banner"><img src="./images/slide1.png" alt=""></section>
    </div>
</body>
</html>
더보기
<!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>
</head>
<link rel="stylesheet" href="./CSS/style.css">
<body>
    <div id="wrap">
    <header id="header" class="clearfix">
        <h1 class="logo"><a href="#"><img src="./images/logo.png" alt="logoimg"></a></h1>
        <nav class="nav">
            <ul class="clearfix">
                <li><a href="#">탑</a>
                <ul class="sub">
                    <li><a href="#">블라우스</a></li>
                    <li><a href="#">티</a></li>
                    <li><a href="#">셔츠</a></li>
                    <li><a href="#">니트</a></li>
                </ul>
                </li>
                <li><a href="#">아우터</a>
                    <ul class="sub">
                        <li><a href="#">자켓</a></li>
                        <li><a href="#">코트</a></li>
                        <li><a href="#">가디건</a></li>
                        <li><a href="#">머플러</a></li>
                    </ul></li>
                <li><a href="#">팬츠</a> <ul class="sub">
                    <li><a href="#">청바지</a></li>
                    <li><a href="#">반바지</a></li>
                    <li><a href="#">긴바지</a></li>
                    <li><a href="#">레깅스</a></li>
                </ul></li>
                <li><a href="#">악세사리</a> <ul class="sub">
                    <li><a href="#">귀걸이</a></li>
                    <li><a href="#">목걸이</a></li>
                    <li><a href="#">반지</a></li>
                    <li><a href="#">팡찌</a></li>
                </ul></li>
            </ul>
        </nav>
    </header>
    <section id="banner"><img src="./images/slide1.png" alt="ss urban"></section>
    </div>
</body>
</html>
@charset "utf-8";
*{margin: 0;padding: 0; box-sizing: border-box; font-size: 13px;}
li{list-style: none;}
a{color: #333; text-decoration: none;}
img{display: block;}
h1,h2,h3,h4,h5,h6{font-size: 13px; font-weight: normal;}
.clearfix::after, .clearfix::before{content: ""; display: block; clear: both;}
@font-face {
    font-family: 'TheJamsil5Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

#wrap{width: 1200px; margin: 0 auto;}

/* header */
#header{width: 100%; background-color: lightgray;}
/* logo */
#header .logo{width: 200px; height: 100px; float: left;}
#header .logo>a{}
#header .logo>a>img{padding-top: 30px;}

/* nav */
#header .nav{background-color: white; 
    float: right; margin-top: 30px;}
#header >.nav>ul{}
#header >.nav>ul>li{background-color: black; width: 150px; height: 50px; float: left;
position: relative;}
#header >.nav>ul>li>a{font-size: 16px; font-family: 'TheJamsil5Bold';
    color: white; text-align: center;line-height: 50px; display: block;
}
#header >.nav>ul>li:hover{background-color: darkslategrey;}
#header >.nav>ul>li>.sub{position: absolute; left: 0; float: left;}
#header >.nav>ul>li>.sub>li{background-color: #424242; width: 150px; height: 50px;}
#header >.nav>ul>li>.sub>li>a{color: whitesmoke; display: block ;
text-align: center; line-height: 50px; font-weight: bold; font-size: 15px;}
#header >.nav>ul>li>.sub>li>a:hover{color: black;}
#header >.nav>ul>li>.sub>li:hover{background-color: white;}
#banner{width: 100%;}

 

더보기
<!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>Document</title>
    <link rel="stylesheet" href="./CSS/style.css">
</head>
<body>
    <div id="wrap">
        <header id="header" class="clearfix">
            <h1 class="logo"><a href="#"><img src="./img/logo.gif" alt="logo"></a></h1>
            <nav class="nav">
                <ul>
                    <li><a href="#">재단소개</a>
                        <ul class="sub">
                            <li><a href="#">설립취지</a></li>
                            <li><a href="#">연혁</a></li>
                            <li><a href="#">찾아오시는 길</a></li>
                        </ul>
                    </li>
                    <li><a href="#">후원하기</a>
                        <ul class="sub">
                            <li><a href="#">국내후원</a></li>
                            <li><a href="#">국외후원</a></li>
                            <li><a href="#">맞춤후원</a></li>
                        </ul></li>
                    <li><a href="#">자료실</a>
                        <ul class="sub">
                            <li><a href="#">서식자료싷</a></li>
                            <li><a href="#">사진자료실</a></li>
                            <li><a href="#">후원양식</a></li>
                        </ul></li>
                    <li><a href="#">스토리</a>
                        <ul class="sub">
                            <li><a href="#">웹진</a></li>
                            <li><a href="#">보고서</a></li>
                            <li><a href="#">나의 후원</a></li>
                        </ul></li>
                </ul>
            </nav>
        </header>
        <section id="banner" class="clearfix"><img src="./img/slider3.jpg" alt=""></section>
    </div>
</body>
</html>
@charset "utf-8";
*{margin: 0;padding: 0;}
li{list-style: none;}
a{color: #333; text-decoration: none; display: block;}
.clearfix::after, .clearfix::before{content: ""; display: block; clear: both;}

#wrap{width: 1200px; margin: 0 auto; box-sizing: border-box;}

#header{width: 100%; background-color: antiquewhite;}
#header>.logo{width: 300px; height: 100px; background-color: white; float: left;}
#header>.logo>a{line-height: 110px; text-align: center;}
/* nav */
#header>.nav{background-color: #2e7d32; float: right; margin-top: 50px;}
#header>.nav>ul{}
#header>.nav>ul>li{width: 200px; height: 50px; background-color: #388e3c ;
float: left; position: relative;}
#header>.nav>ul>li>a{text-align: center; line-height: 50px; color: white; display: block;}
#header>.nav>ul>li:hover{background-color: #33691e;}
#header>.nav>ul>li>.sub{position: absolute; float: left; left: 0; display: none;}
#header>.nav>ul>li>.sub>li{width: 200px; height: 50px; background-color: #c8e6c9  ;
     }
#header>.nav>ul>li>.sub>li>a{text-align: center; line-height: 50px;}
#header>.nav>ul>li>.sub>li>a:hover{background-color: #e6ee9c ;}
#banner{ }
생략하기전
투명도 (낮으면 낮을수록 투명해짐)
opacity: (0~1);

border-radius: 20px 60px 40px 80px; 시계방향  border-radius: 20px 80px 대각선 border-radius: 80px;전체

 

갤러리
그림 사이 간격 설정 #contents>.gallery>ul>li{float: left; margin-right: 16px;}
오른쪽 16px 간격을 설정

 #contents>.gallery>ul>li:last-child{margin-right: 0;}
마지막 사진의 오른쪽 간격을 0설정해 

그림 사이 간격 설정
바로가기
사진 오른쪽으로 조금 이동 #contents>.link>ul{padding-left: 12px;}
 #contents>.link>ul{padding-left: 12px;}
더보기
<!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>contents</title>
    <link rel="stylesheet" href="./CSS/style.css">
</head>
<body>
    <div id="wrap">
        <section id="contents" class="clearfix">
            <div class="notice">
                <h3>공지사항</h3>
                <ul>
                    <li></li>
                </ul>
            </div>
            <div class="gallery">
                <h3>갤러리</h3>
                 <ul class="clearfix">
                    <li><img src="./img/thumb1.jpg" alt="g1"></li>
                    <li><img src="./img/thumb2.jpg" alt="g2"></li>
                    <li><img src="./img/thumb3.jpg" alt="g3"></li>
                </ul>
            </div>
            <div class="link">
                <h3>바로가기</h3>
                 <ul>
                    <li><img src="./img/banner.jpg" alt="바로가기 이미지"></li>
                </ul>
            </div>
        </section>
    </div>
</body>
</html>
@charset "utf-8";

*{margin: 0;padding: 0; box-sizing: border-box;}
li{list-style: none;}
a{color: #333; text-decoration: none; }
img{display: block;}
.clearfix::after, .clearfix::before{content: ""; display: block; clear: both;}
 #wrap{width: 1200px; margin: 0 auto; }

 #contents{width: 100%; }
 #contents>div{width: 400px; height: 200px; background-color: #f5f5f5 ;
    float: left; padding: 10px;
}
#contents>div>h3{width: 120px; height: 40px; 
     color: white; background-color: black;
text-align: center; line-height: 40px;}
#contents>div>ul{
    border-top: 2px solid black; padding-top: 10px;
}

#contents>.notice>ul{}
 #contents>.gallery>ul{}
 #contents>.gallery>ul>li{float: left; margin-right: 16px;}
 #contents>.gallery>ul>li:last-child{margin-right: 0;}
 #contents>.gallery>ul>li>img{}
 #contents>.link>ul{padding-left: 12px;}
더보기
<!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>
</head>
<link rel="stylesheet" href="./CSS/style.css">
<body>
    <div id="wrap">
    <header id="header" class="clearfix">
        <h1 class="logo"><a href="#"><img src="./images/logo.png" alt="logoimg"></a></h1>
        <nav class="nav">
            <ul class="clearfix">
                <li><a href="#">탑</a>
                <ul class="sub">
                    <li><a href="#">블라우스</a></li>
                    <li><a href="#">티</a></li>
                    <li><a href="#">셔츠</a></li>
                    <li><a href="#">니트</a></li>
                </ul>
                </li>
                <li><a href="#">아우터</a>
                    <ul class="sub">
                        <li><a href="#">자켓</a></li>
                        <li><a href="#">코트</a></li>
                        <li><a href="#">가디건</a></li>
                        <!-- <li><a href="#">머플러</a></li> -->
                    </ul></li>
                <li><a href="#">팬츠</a> <ul class="sub">
                    <li><a href="#">청바지</a></li>
                    <li><a href="#">반바지</a></li>
                    <li><a href="#">긴바지</a></li>
                    <li><a href="#">레깅스</a></li>
                </ul></li>
                <li><a href="#">악세사리</a> <ul class="sub">
                    <li><a href="#">귀걸이</a></li>
                    <li><a href="#">목걸이</a></li>
                    <li><a href="#">반지</a></li>
                    <li><a href="#">팡찌</a></li>
                </ul></li>
            </ul>
        </nav>
    </header>
    <section id="banner"><img src="./images/slide1.png" alt="ss urban"></section>
    <section id="contents" class="clearfix">
        <div class="notice">
            <h4>공지사항</h4>
            <ul>
                <li><a href="#">2021 봄 이벤트 30% sale !!! 특가</a></li>
                <li><a href="#">2021 봄 이벤트 30% sale !!! 특가</a></li>
                <li><a href="#">2021 봄 이벤트 30% sale !!! 특가</a></li>
                <li><a href="#">2021 봄 이벤트 30% sale !!! 특가</a></li>
                <li><a href="#">2021 봄 이벤트 30% sale !!! 특가</a></li>
            </ul>
        </div>
        <div class="c_ban">
            <h4>배너</h4>
            <ul>
                <li><img src="./images/gallery1.png" alt="1"></li>
                <li><img src="./images/gallery2.png" alt="2"></li>
                <li><img src="./images/gallery3.png" alt="3"></li>
            </ul>
        </div>
        <div class="link">
            <h4>바로가기</h4>
            <ul><li><img src="./images/link.png" alt=""></li></ul>
        </div>
    </section>
</div>
    
</body>
</html>
@charset "utf-8";
*{margin: 0;padding: 0; box-sizing: border-box; font-size: 13px;}
li{list-style: none;}
a{color: #333; text-decoration: none;}
img{display: block;}
h1,h2,h3,h4,h5,h6{font-size: 13px; font-weight: normal;}
.clearfix::after, .clearfix::before{content: ""; display: block; clear: both;}
@font-face {
    font-family: 'TheJamsil5Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

#wrap{width: 1200px; margin: 0 auto;}

/* header */
#header{width: 100%; background-color: lightgray;}
/* logo */
#header .logo{width: 200px; height: 100px; float: left;}
#header .logo>a{}
#header .logo>a>img{padding-top: 30px;}

/* nav */
#header .nav{background-color: white; 
    float: right; margin-top: 30px;}
#header >.nav>ul{}
#header >.nav>ul>li{background-color: black; width: 150px; height: 50px; float: left;
position: relative;}
#header >.nav>ul>li>a{font-size: 16px; font-family: 'TheJamsil5Bold';
    color: white; text-align: center;line-height: 50px; display: block;
}
#header >.nav>ul>li:hover{background-color: #ffd600  ;}
#header >.nav>ul>li>a:hover{color: black;}
#header >.nav>ul>li>.sub{position: absolute; left: 0; float: left; height: 200px; 
    display: none; background-color: yellowgreen;}
#header >.nav>ul>li>.sub>li{background-color: #424242; width: 150px; height: 50px;}
#header >.nav>ul>li>.sub>li{}
#header >.nav>ul>li>.sub>li>a{color: whitesmoke; display: block ;
text-align: center; line-height: 50px; font-weight: bold; font-size: 15px;}
#header >.nav>ul>li>.sub>li>a:hover{color: black;}
#header >.nav>ul>li>.sub>li:hover{background-color: white;}

/* //header */

/* content */
#contents{width: 1200px;}
#contents>div{width: 33.33%; height: 200px; background-color: #bdbdbd ;
float: left; padding: 10px;}
#contents>div>h4{width: 120px; height: 40px; background-color: #212121 ;
text-align: center; line-height: 40px; color: white; 
font-family: 'TheJamsil5Bold'; letter-spacing: 4px; font-weight: 100; }
#contents>div>ul{border-top: 5px solid black; 
    padding-top: 8px; left:0px; right: 0px;}
#contents>div>ul>li{float: left;}
#contents>.c_ban>ul>li>img{margin-left: 4px;}
#contents>.c_ban>ul>li:last-child{margin-right: 0px;}
#contents>.link>ul{
    width: 380px; height: 180px; overflow: hidden;
}
#contents>.notice>ul{padding-left: 30px; }
#contents>.notice>ul>li{list-style: disc;padding-bottom: 5px;}
저작자표시 비영리 동일조건 (새창열림)

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

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

관련글

티스토리툴바