본문 바로가기
웹개발 기초/html_css

css 마무리 실습

미미_밍 2024. 3. 6. 01:08 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: lightgray;
            color: red; 
            /* 부모요소 상속받긴 하지만 지정값이 먼저 우선순위 가진다.  */
        }
        p{
            color: blue 
            /* !important; */
            /* p 태그의 우선순위는 important 가 붙은게 가장 먼저 */
        }
        
        #myid{
            color: green;
        }
        .myclass{
            color: orange;
        }
        div{
            color: purple;
        }
    </style>
</head>
<body>
    <p>이 문장은 속성값 뒤에 !importante 를 붙인 경우이다. </p>
    <p class="inline" style="color: rebeccapurple;">이 문장은 인라인 스타일을 적용한 경우이다. </p>
    <p id="myid">이 문장은 id 선택자를 사용한 경우이다. </p>
    <p class="myclass">이 문장은 선택자로 class 사용한 경우이다. </p>
    <div>이 문장은 선택자로 태그를 사용한 경우이다. </div>
</body>
</html>

-선택자 우선순위별 css 적용 예제 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>네비게이션 설정</title>
    <style>
        body{
            margin-top: 30px;
            
        }
        nav ul{
            width: 100%;
            background-color: darkgray;
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        nav ul li{
            display: inline-block;
        }

        .home{
            background-color: darkorange;
            width: 100px;
            text-align: center;
            font-weight: bold;
            float: right;

        }

        .home a {
            display: block;
            text-decoration: none;
            color: white;
            padding: 16px 16px;

        }

        .dropdown{
            position: relative;

        }

        .dropdown-menu{
            color: white;
            padding: 16px;
            font-size: 20px;
            cursor: pointer;
        }

        .dropdown-content{
            display: none;
            position: absolute;
            background-color:antiquewhite;
        }
        .dropdown-content a{
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown:hover .dropdown-content{
            display: block;
        }

        .dropdown-content a:hover{
            background-color: pink;
        }

        .dropdown-menu:hover:not(.home){
            background-color: darkblue;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li class="dropdown">
                <div class="dropdown-menu">Menu1</div>
                <div class="dropdown-content">
                    <a href="#">Menu1-1</a>
                    <a href="#">Menu1-2</a>
                    <a href="#">Menu1-3</a>
                    <a href="#">Menu1-4</a>
                </div>
            </li>
            <li class="dropdown">
                <div class="dropdown-menu">Menu2</div>
                <div class="dropdown-content">
                    <a href="#">Menu2-1</a>
                    <a href="#">Menu2-2</a>
                    <a href="#">Menu2-3</a>
                    <a href="#">Menu2-4</a>
                </div>
            </li>
            <li class="dropdown">
                <div class="dropdown-menu">Menu3</div>
                <div class="dropdown-content">
                    <a href="#">Menu2-1</a>
                    <a href="#">Menu2-2</a>
                    <a href="#">Menu2-3</a>
                    <a href="#">Menu2-4</a>
                </div>
            </li>
            <li class="dropdown">
                <div class="dropdown-menu">Menu4</div>
            </li>
            <li class="home"><a href="#">home</a></li>
        </ul>
    </nav>
   
</body>
</html>

dropdown 메뉴 만들기 실습 

display : none; -> hover 시 block 이 되게 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>간단한 양식 예제</h1>
    <form action="" method="">
        <fieldset>
            <legend>개인 정보 입력</legend>               
                    <label for="name" >이름 :</label>
                    <input type="text" id="name" name="name" required>
                    <br/>
                    <br/>
                    <label for="email">이메일 :</label>
                    <input type="text" id="email" name="email" required> 
                    <br/>
                    <br/>
                    <label for="password">비밀번호 :</label>
                    <input type="password" id="password" name="password" required>
                    <br/>
                    <br/>
                
                    <label for="gender">성별 :</label>
                    <input type="radio" id="mail" name="gender" value="mail" >
                    <label for="mail">남성</label>
                   <input type="radio"id="femail" name="gender" value="femail" >
                   <label for="femail">여성</label>
                   <br>
                   <br>

                
                    <label for="country">국가 :</label>
                    <select id="country" name="country">
                        <option value="kr">대한민국</option>
                        <option value="us">미국</option>
                        <option value="jp">일본</option>
                        <option value="j">중국</option>
                    </select>
                    <br>
                    <br>
                    <label for="bio">자기소개 :</label><br>
                    <textarea id="bio" name="bio" cols="30" rows="5"></textarea>
                    <br>
                    <br>

                    <button type="submit">제출</button>
                    <button type="reset">리셋</button>
                </li>

            </ul>
        </fieldset>
    </form>
</body>
</html>

-form 양식 실습 

-label의 for 과 input 의 id 값을 같에 해야 이름 클릭시 커서가 깜빡일 수 있습니다

-required 속성을 넣어주면 안넣고 제출시 경고를 띄움

-radio , name 속성을 같게 해줘야 하나만 선택 가능함, 다르면 여러개 선택됨

결과물

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./../../css/day07/task02.css">
</head>
<body>
    <header>
        <h1>나의블로그</h1>
        <br>
        <div>이 공간은 강민정의 블로그 입니다. 공부한 내용을 정리하고 있습니다.</div>
        <nav>
            <ul class="nav-manu">
                <li class="dropdown">
                    <div class="menu">메뉴1</div>
                    <ul class="menu-link">
                        <li><a href="">메뉴1-1</a></li>
                        <li><a href="">메뉴1-2</a></li>
                        <li><a href="">메뉴1-3</a></li>
                        <li><a href="">메뉴1-4</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <div class="menu">메뉴2</div>
                    <ul class="menu-link">
                        <li><a href="">메뉴2-1</a></li>
                        <li><a href="">메뉴2-2</a></li>
                        <li><a href="">메뉴2-3</a></li>
                        <li><a href="">메뉴2-4</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <div class="menu">메뉴3</div>
                    <ul class="menu-link">
                        <li><a href="">메뉴3-1</a></li>
                        <li><a href="">메뉴3-2</a></li>
                        <li><a href="">메뉴3-3</a></li>
                        <li><a href="">메뉴3-4</a></li>
                    </ul>
                
                </li >
                <li class="dropdown"><div class="menu" id="menu4">매뉴4</div></li>
                <li class="dropdown home"><a href="">홈</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div class="sectionbox">
        <section class="html">
   
            <h1>HTML, CSS 총정리</h1>
            <div>작성일 : 2024년 1월 22일</div>
            <div class="img1">이미지</div>
            <div>텍스트..</div>
            <div>HTML,css 로 공부한것을 작성</div>
        </section>
        <section class="intro">
            <h1>내 소개</h1>
            <div>강민정,2024년 1월 22일</div>
            <div class="img1">이미지</div>
            <div>강민정 소개</div>
            <div>이름: 강민정</div>
            <div>나이 : 25</div>
            <div>전공 : 컴퓨터공학과</div>
            <div>취미 : 딱히없음</div>
        </section>
    </div>
    <aside>
            <div class="comment container">
                <h1>comment</h1>
                <div class="img3">이미지</div>
                <div>comment</div>
            </div>
            <div class="comment best">
                <div>실시간 인기있는 글</div>
                <div class="img">이미지</div>
                <div class="img">이미지</div>
                <div class="img">이미지</div>
            </div>
            <div class="comment follow">
                <div>나를 팔로우 하세요</div>
                <div>텍스트</div>
            </div>
    </aside>
    </main>
    <footer>
        <div>footer</div>
    </footer>
</body>
</html>

-블로그만들기 html 

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: lightgray;
}

nav{
    background-color: black;
    color: white;
    width: 100%;
    height: 30px;
 
}

.nav-manu{
    list-style-type: none;
    height: 30px;
    padding: 10px 0 0 0;
    width: 100%;
    
}

.dropdown{
    display: inline-block;
    position: relative;
    width: 50px;
}


.home {
    background-color: orange;
    width: 50px;
    height: 30px;
    text-align: center;
    float: right;

}

.home a{
    text-decoration: none;
    color: white;
}


.menu{
    color: white;
    cursor: pointer;
    text-decoration: none;
    margin: 0 3px;
    cursor: pointer;

}

li a{
    text-decoration: none;
}

.menu-link{
    position: absolute;
    z-index: 4;
    list-style-type: none;
    background-color: black;
    width: 55px;
}
.menu-link li a{

    color: white;
}


.dropdown ul{
    display: none;
    
}

.dropdown:hover .menu-link{
    display: block;

}

.menu:hover:not(#menu4){
    background-color: orange;
}

section{
    background-color: white;
    margin: 10px;
}

.img{
    background-color: bisque;
    height: 48px;
}
.img1{
    height: 50px;
    background-color: bisque;
}

.img3{
    height: 30px;
    background-color: bisque;

}

main{
    display: flex;
    height: 550px;
}

.sectionbox{
    width: 700px;
    height: 200px;
    z-index: 0;
}

.html,.intro{
    margin: 10px;
    padding: 10px;
}

div{
    font-size: 10px;
    padding: 5px;
}

aside{
    height: 400px;
    width: 300px;
    margin: 30px 0 0 0;
}

.comment{
    background-color: white;
    margin: 10px 5px;

}

.container{
    width: 300px;
    height: 100px;
}

.best{
    width: 300px;
    height: 200px;
}

.follow{
    width: 300px;
    
}

h1{
    padding: 10px 0;
}
.intro{
    height: 300px;
}

footer{
    height: 100px;
}

footer div{
    font-size: 30px;
    font-weight: bold;
}

css

 

결과 화면

-메뉴는 dropdown 적용

-header, section,aside  시멘틱 태그 사용 

-display :flex, float 

-.menu:hover:not(#menu4){

 background-color : orange;

}

=> id menu4 빼고 hover 했을때  background-color : orange; 로 설정

 

드디어 css 끄읏.. 프론트는.. 정말 힘들어요 ~~ 저는 미감이 없기 때문 ~~~ 

근데 백하면 또 백도 힘들겠죠 ? 

그치만 프론트의 섬세한 css... 대충살고싶은 저에겐 지옥 ~~ 

'웹개발 기초 > html_css' 카테고리의 다른 글

반응형웹, 미디어쿼리  (0) 2024.02.13
가상선택자,transform,애니메이션,form  (2) 2024.02.12
position , 고급선택자  (2) 2024.02.12
display: flex  (0) 2024.02.12
css 인라인 ,블록요소 ,박스모델  (0) 2024.02.12

'웹개발 기초/html_css' Related Articles

티스토리툴바