-
홈페이지로 확인하는 CSS코드카테고리 없음 2023. 7. 29. 18:08반응형
홈페이지로 확인하는 CSS코드
html 코트
<body><div class="container"><div class="header"><h1><a href="#">DESIGN</a></h1><div class="nav"><ul><li><a href="">HOME</a></li><li><a href="">BEDROOM</a></li><li><a href="">DINING</a></li><li><a href="">KITCHEN</a></li><li><a href="">BACKYARD</a></li></ul></div></div><div class="hero"><h2>DECIGN YOUT HOUSE</h2><p>Subscribe Easy Youtube Channel watch more videos,<br>press t he bell icon t</p><button>WATCH VIDEOS</button></div></div></body>css코드
* {margin:0;padding:0;list-style: none; /*list 기본 속석 ● 제거*/text-decoration: none; /*a태그 밑줄제거*/color:black;}
.cantainer {width: 100%;height: 100vh;}
.header {width: 80%;height: 100px;display: flex;margin: 0 auto;align-items: center; /*header안에 있는 텍스트가 header높이 기준으로 정중앙에 온다*/justify-content: space-between; /*header안에 있는 h1태그, div태그를 왼쪽 오른쪽 끝으로 보냄*/border-radius: 20px;border: 2px solid skyblue;}
.nav ul li {display: inline;margin: 10px;}
.nav ul li a:hover {color:aquamarine;}
.hero {position: absolute; /*다음가 같이 설정하면 .hero안에 있는 텍스트는 정중앙으로 온다*/left: 50%;top: 50%;transform:translate(-50%, -50%);text-align: center;}
.hero h2 {font-size: 60px;margin-bottom: 10px;}
.hero p {font-size: 22px;margin-bottom: 20px;}
.hero button {border: 2px solid skyblue;border-radius: 22px;background: none;padding: 20px;cursor: pointer;}
.hero button:hover { /*hover속성 마우스 이동시 나타나는 효과*/background-color: aquamarine;transition: all .4s;}// left, top의 기준으로만 움직인다. transform: translate(-50%, -50%)를 사용하면 페이지 정중앙에 텍스트가 온다.
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
// justify-content 속성은 브라우저가 콘텐츠 항목 사이와 주변 공간을 어떻게 정렬할 것인지를 정의한다.