본문 바로가기
2023/HTML

[HTMl] 이미지 / 리스트

by Or0i쿠 2023. 4. 4.
더보기

 

@charset "utf-8";
*{margin: 0; padding: 0;}
body{background-color: azure;font-size: 24px; text-align: center; }
#wrap{width: 1200px; margin: 0 auto; background-color: black;}
#header{width: 100%; background-color: cadetblue;}
#banner{width: 100%; height: 300px; background-color: aquamarine; clear: both;line-height: 300px;}
#contents{width: 100%;  background-color: darkcyan;}
#footer{width: 100%;  background-color: cornflowerblue;}
/* header */
#header div, #header nav{height: 100px; font-size: 24px; text-align: center; line-height: 100px;
float: left;}
#header .logo{width: 200px; background-color: #b1c4e9; }
#header .nav{width: 1000px; background-color: #b39ddb;}
/* contents */
#contents div{width: 400px; height: 200px; float: left;
    font-size: 24px; text-align: center; line-height: 100px;}
#contents .cont1{background-color: aliceblue;}
#contents .cont2{background-color: #b1c4e9;}
#contents .cont3{background-color: #b39ddb;}
/* footer */
#footer div{height: 100px; float: left; font-size: 24px; text-align: center; line-height: 100px;}
#footer .foot1{width: 200px; background-color: gray;}
#footer .foot2{width: 800px; background-color: cadetblue;}
#footer .foot3{width: 200px; background-color: darkcyan}

 

<!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>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div id="wrap">
        <header id="header">
            <div class="logo">로고</div>
            <nav class="nav">네비</nav>
        </header>
        <section id="banner">banner</section>
        <section id="contents">
            <div class="cont1">1</div>
            <div class="cont2">2</div>
            <div class="cont3">3</div>
        </section>
        <footer id="footer">
            <div class="foot1">1</div>
            <div class="foot2">2</div>
            <div class="foot3">3</div>
        </footer>
    </div>
</body>
</html>
#header div, #header nav{]
→위와 같이 2개의 태그를 같이 쓸 수 있다.
font-weight: ();
→ 폰트 두께
이미지 넣기
#wrap{} 
#wrap #header{} → id는 한 번만 쓰기로 약속했기 때문에 '#wrap' 생략.
background-image: url(../)  background: url(../)  
→ 이미지 넣기
./ → 상위
./ → 현재
#contents div{} → 컨텐츠 바로 밑 자식만 속성 변경
#contents > div{} → 모든 자식
 

 

#contents .cont1{background-image: url(../images/gallery1.png); }

→ 
#contents .cont1{background-image: url(../images/gallery1.png); background-repeat: no-repeat; }

→ 반복 X
#contents .cont1{background-image: url(../images/gallery1.png); background-repeat: no-repeat; background-size: cover;}

→ 

 

더보기
<!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>
    <link rel="stylesheet" href="./CSS/style.css">
</head>
<body>
    <div id="wrap">
        <header id="header">
            <div class="logo">로고</div>
            <div class="nav">네비</div>
        </header>
        <section id="sec">
            <section id="banner"></section>
            <section id="contents">
                <div class="cont1"></div>
                <div class="cont2"></div>
                <div class="cont3"></div>
            </section>
            <footer id="footer">
                <div class="foot1">하단메뉴</div>
                <div class="foot2">copyrihgt</div>
                <div class="foot3">SNS</div>
            </footer>
        </section>
    </div>
</body>
</html>
@charset "utf-8";
*{margin: 0;padding: 0; font-size: 24px; font-weight: bold;}
#wrap{width: 1000px; height: 650px; margin: 0 auto;}

/* header */
header{width: 300px; height: 650px; background-color: antiquewhite;float: left;}
header .logo{width: 300px; height: 150px;background-color: rgb(179, 211, 211);}
header .nav{width: 300px; height: 500px; background-color: rgb(220, 245, 235);}
/* section */
#sec{width: 700px; height: 650px; background-color: aliceblue; float: left;}
/* banner */
#banner{width: 700px; height: 350px; background-image: url(../images1/slide01.png);}
/* contents */
#contents{width: 700px; height: 200px; background-color: aliceblue; clear: both;}
#contents div{width: 33.33%; height: 200px; float: left;}
#contents .cont1{background-image: url(../images/gallery1.png); background-repeat: no-repeat; background-size: cover;}
#contents .cont2{background-image: url(../images/gallery2.png); background-repeat: no-repeat; background-size: cover;}
#contents .cont3{background-image: url(../images/gallery3.png); background-repeat: no-repeat; background-size: cover;}
/* footer */
#footer{width: 700px; height: 100px; clear: both;}
#footer>div{width: 600px; height: 50px;float: left;}
#footer .foot1{background-color: rgb(231, 220, 220); }
#footer .foot2{background-color: rgb(235, 180, 180);}
#footer .foot3{background-color: rgb(226, 121, 121); width: 100px;height: 100px; margin-top: -50px;}
ahrfhrxprm
순서 없음
더보기
<body>
    <h1>내가 점심에 먹은 메뉴</h1>
    <ul>
        <li>볶음밥</li>
        <li>김밥</li>
        <li>제육볶음</li>
    </ul>
</body>
순서있음
더보기
<body>
    <h1>내가 점심에 먹은 메뉴</h1>
    <ul>
        <li>볶음밥</li>
        <li>김밥</li>
        <li>제육볶음</li>
    </ul>
    <ol>
        <li>닭가슴살</li>
        <li>샌드위치</li>
        <li>돈까스</li>
    </ol>
</body>
링크 걸기
 <a href="https://www.naver.com/">네이버</a>

 


 text-decoration: none;
_blank : 새창 _self : 기존창
 list-style: none;
리스트 모양 삭제
color: #000;
링크 컬러 변경
text-decoration: none
 링크 밑줄 삭제
<h1>내가 점심에 먹은 메뉴</h1>   ~  <h6>내가 점심에 먹은 메뉴</h6>
로고와 네비게이션
.clearfix::before, .clearfix::after{} 
*{margin: 0;padding: 0;}
li{list-style: none; }
a{color: black; text-decoration: none;}
.clearfix::before, .clearfix::after{clear: both; content: ""; display: block;}​

 
#header .nav > ul > li > a:hover{}
a에 마우스를 올렸을 때
a는 대표적 인라인 구조로 블록 구조로 바꿔야함
더보기
<!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>
    <link rel="stylesheet" href="./CSS/style.css">
</head>
<body>
    <div id="wrap">
        <header id="header" class="clearfix">
            <h1 class="logo">logo</h1>
            <nav class="nav">
                <ul>
                    <li><a href='#'>탑</a></li>
                    <li><a href='#'>아우터</li>
                    <li><a href='#'>팬츠</a></li>
                    <li><a href='#'>악세사리</a></li>
                </ul>
            </nav>
        </header>
        <section id="banner"></section>
        <section id="contents"></section>

    </div>
</body>
</html>
@charset "UTF-8";
*{margin: 0;padding: 0; font-size: 24px; font-weight: bold;}

li{list-style: none; }

a{color: black; text-decoration: none;}

.clearfix::before, .clearfix::after{clear: both; content: ""; display: block;}

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

#header{width: 100%; }
#banner{width: 100%; height: 300px; background-image: url(../images/slide1.png);}

/* header */
#header .logo{width: 200px; height: 100px; background-color: rgb(160, 156, 100); 
text-align: center; line-height: 100px; float: left;}
#header .nav{float: right; background-color: white; margin-top: 45px; margin-right: 5px;}
#header .nav > ul{}
#header .nav > ul > li{width: 150px; height: 50px;background-color: #0f0f0f ;float: left;}
#header .nav > ul > li > a{color: white; text-align: center; display: block; width: 100%; 
line-height: 50px;}

#header .nav > ul > li > a:hover{color: rgb(255, 208, 0);}
로고와 네비게이션 2
인라인 블록
display 로 구조를 바꾼다.
더보기
<!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>로고 네비 만들기2</title>
    <link rel="stylesheet" href="./CSS/style.css">
</head>
<body>
    <div id="wrap">
        <header id="header" class="clearfix">
            <h1 class="logo">
                <a href="#">Green 복지재단</a>
            </h1>
            <nav class="gnb">
                <ul>
                    <li><a href="#">재단소개</a></li>
                    <li><a href="#">후원하기</a></li>
                    <li><a href="#">자료실</a></li>
                    <li><a href="#">스토리</a></li>
                </ul>
            </nav>
        </header>

        <section id="banner"></section>
    </div>
</body>
</html>
@charset "utf-8";
*{margin: 0; padding: 0;}
 li{ list-style: none;}
 a{color: black; text-decoration: none;}
 .clearfix::after, .clearfix::before{ content: ""; display: block; clear: both;}
body{background-color: aliceblue;}
#wrap{}

/* header */
#header{width: 1200px;}
#header .logo{width: 200px;height: 100px; background-color: darkgreen;}
#header .logo>a{font-size: 24px; color: beige ; text-align: center;
display: block; line-height: 100px;
}
/* .gnb */
#header .gnb{float: right; margin-top: -60px;}
#header>.gnb>ul{}
#header>.gnb>ul>li{width: 150px; height: 60px; background-color: darkgreen; 
    float: left; }
#header>.gnb>ul>li>a{color: beige; font-size: 16px; 
    text-align: center; display: block; line-height: 60px;}
#header>.gnb>ul>li>a:hover{background-color: darkorange;}
/* banner */
#banner{width: 1200px; height: 300px;background-image: url(../img/slider1.jpg);}
<img src="./img/slide2.png" alt="2021 s/s SRE;wish">
닫는 태그가 없는 태그
앞뒤에 텍스트 삽입
h1::after{content: "1";}
h1::before{content: "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>Document</title>
    <link rel="stylesheet" href="./CSS/style.css">
</head>
<body>
    <div id="wrap">
        <header id="header">
            <h1 class="logo">
                <a href="#">하이미디어</a>
            </h1>
            <nav class="gnb">
                <ul>
                    <li><a href="#">MENU1</a></li>
                    <li><a href="#">MENU2</a></li>
                    <li><a href="#">MENU3</a></li>
                    <li><a href="#">MENU4</a></li>
                </ul>
                
            </nav>
        </header>
        <section id="banner">
            <img src="./img/slide2.png" alt="2021 s/s SRE;wish">
        </section>
        <section id=""></section>
    </div>
</body>
</html>
@charset "utf-8";
/* reset */
*{margin: 0;padding: 0;}
li{list-style: none;}
a{color: #333; text-decoration: none;}
.claerfix::after, .claerfix::before{clear: both;
     display: block; content: "";}
#wrap{width: 1200px;}
/* header */
#header{}
#header .logo{width: 200px; height: 100px; line-height: 100px; float: left;}
#header .logo>a{display: block; color: darkblue; background-color: rgb(127, 169, 206);
     text-align: center;}
#header .gnb{float: right; width: 600px;}
#header .gnb>ul{}
#header .gnb>ul>li{width: 25%; height: 50px; background-color: darkblue; float: left;}
#header .gnb>ul>li:hover{background-color: black;}
#header .gnb>ul>li>a{color: white; text-align: center; display: block; line-height: 50px; }
/* banner */

 

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

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

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

관련글

티스토리툴바