코딩테스트/HTML

HTML, CSS, JS 연습

Rabet 2024. 9. 4. 00:11

 

데모 사이트

 

HTML, CSS and JavaScript demo - Liveweave

 

liveweave.com

 

- 삼각형 만들기

 #triangle{ 
            width: 0;
            height: 0;
            border-top: 10px solid yellow;
            border-bottom: 10px solid red;
            border-left: 10px solid blue;
            border-right: 10px solid green;
        }

 

<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>
    <div id = "triangle"></div>
</body>

 

 

- 한줄로 만들기

ul {
    display: flex; /*한줄로*/
    list-style-type: none; /*리스트표시 없애기*/
    padding: 0;
}
li {
    margin-right: 10px; 
}

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline List Example</title>
</head>
<body> 
    <ul> <!-- <ul>에 적용 -->
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</body>
</html>

 

 

- 기본 CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    margin-right: 10px; 
    list-style: none;
}

 

 

 

- Header 만들기

.container{
  width:1140px;
  margin:0 auto; /*중앙에 오도록*/
}

header{
  position:absolute; /* 13.3.3 absolute -> fixed */
  color:black; /* 13.3.3 black -> white */
  top:0;
  z-index:1;
  width:100%;
  padding:1rem;
}

header .container{
    display: flex; /*수직으로*/
    justify-content: space-between; /*사이간격*/
    align-items: center; /*중앙에*/
    width: 100%;
}

header button{
  background: transparent;
  border:0;
  cursor: pointer;
  /* color:white;  */
}

header h1 button{
    font-size: 2rem;
    font-weight: bold;
}
header nav ul{
    display: flex;
}
header nav ul li{
    padding: 10;
}
header nav ul li button{
    font-size: 1.2rem;
}

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Header</title>
    <link rel="stylesheet" href="../style.css">
    <link rel="stylesheet" href="../css.header.css">
</head>

<body>
    <header>
        <div class="container">
            <h1>
                <button>RABAT</button>
            </h1>
            <nav>
                <ul>
                    <li>
                        <button>About</button>
                    </li>
                    <li>
                        <button>Features</button>
                    </li>
                    <li>
                        <button>Portfolio</button>
                    </li>
                    <li>
                        <button>Contact</button>
                    </li>
                </ul>
        </div>
    </header>
</body>

</html>

 

 

- main 만들기

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    margin-right: 10px; 
    list-style: none;
}

main{
  width:100%;
  height:100vh;
  color:white;
  background:linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('images/me.jpg') center center;
  background-size:cover;
  display:flex;
  justify-content:center; /*컨테이너 가로방향 중앙*/
  align-items:center; /*위아래*/
  text-align:center; /*글짜 인라인 가로방향 중앙*/
}

main h4{
  font-size:2rem;
}

main h2{
  font-size:3.5rem;
  margin:2rem 0;
  letter-spacing:3px;
  font-family:'Varela Round', sans-serif; /* 웹 폰트 추가 */
}
main p{
  max-width:500px;
  margin:0 auto;
  font-size:1.25rem;
}

main button.download{
  background-color:transparent;
  border:3px solid white;
  border-radius:20px;
  padding:1rem 2rem;
  margin-top:3rem;
  color:white;
  font-weight:bold;
  cursor:pointer;
}

main button.mouse{
  background-color:transparent;
  border:none;
  color:white;
  font-size:2rem;
  position:absolute;
  bottom:1rem;
  left:50%;
  transform:translateX(-50%);
  animation:upDown 1s ease-in-out infinite;
  cursor:pointer;
}

@keyframes upDown{
  0%{
    bottom:1rem;
  }
  50%{
    bottom:1.5rem;
  }
  100%{
    bottom:1rem;
  }
}

main h2 span::after{
  content:"";
  height:40px;
  width:3px;
  background-color:#fff;
  display:inline-block;
  animation: blink .7s ease-in-out infinite;
}

@keyframes blink {
  0%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

 

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

<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Header</title>
    <link rel="stylesheet" href="../style.css">
    <link rel="stylesheet" href="../css.header.css">
</head>

<body>

   <main id="main">

    <div class="container">
      <h4>Welcome</h4>

      <h2>I`M A <span>Front-End Developer</span></h2>

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolor quas nulla unde ea officiis?</p>

      <button class="download">DOWNLOAD CV</button>

      <button class="mouse"><i class="fa-solid fa-computer-mouse"></i></button>

    </div>
  </main>

</body>
</html>