Jam's story

[CSS] 사원이미지 출력 본문

WEB/CSS

[CSS] 사원이미지 출력

애플쩀 2022. 5. 26. 00:09

자바스크립트로 x 표시(span) 없애기 

 

<!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>
        .chip{
            background-color: #f1f1f1;
            height: 50px;
            line-height: 50px;
            display:inline-block;
            padding: 0 25px;
            font-size: 18px;
            border-radius: 25px;
        }
        .chip img{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-left: -25px;
            margin-right: 10px;
            float:left;

        }
        .closebtn{
            color: #888;
            cursor: pointer;
            font-size: 20px;
            font-weight: bold;
            padding-left:10px ;
        }
        .closebtn:hover{
            color:#000;
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="chip">
           <img src="../images/img_avatar.png" alt="" />
           Hong Gil Dong
           <!-- <span class="closebtn" onclick="chip_close(this)">&times;</span> -->
           <!-- <span class="closebtn" >&times;</span> -->
           <span class="closebtn" onclick="chip_close()">&times;</span> 
        </div>
        <script>

            document.querySelector(".closebtn").onclick=function(){
                this.style.display="none";
            };
            function chip_close(){
/*                 this.style.display="none";
                spn.style.display="none"; */
                event.srcElement.parentElement.style.display="none";
            }
        </script>
</body>
</html>

 

     1번째 방법 : 
    <span class="closebtn" >&times;</span>
     
      <script>
            document.querySelector(".closebtn").onclick=function(){
                this.style.display="none";
            };
            </script>
            
     2번째방법: 
     <span class="closebtn" onclick="chip_close(this)">&times;</span>
        <script>
        function chip_close(){
             this.style.display="none";
           
            }
                 </script>
      3번째방법:
           <span class="closebtn" onclick="chip_close(this)">&times;</span>
        <script>
        function chip_close(spn){
            
                  spn.style.display="none";
 
            }
                 </script>
 4번째방법:
   <span class="closebtn" onclick="chip_close(this)">&times;</span>
           <script>
        function chip_close(){
                  event.srcElement.parentElement.style.display="none";
 
            }
                 </script>

 

 

2.여러개 출력 

<!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>
        .card{
            width:200px;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            border-radius: 5px;
            display: inline-block;
        }
        .card:hover{
            box-shadow: 0 4px 16px 0 rgba(0,0,0,0.2);
        }
        .card img{
            width:100%;
            border-radius: 5px 5px 0 0;

        }
        .container{
            padding:2px 16px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="card">
        <img src="../images/img_avatar.png" alt="" />
        <div class="container">
            <h4><b>Hong Gil Dong</b></h4>
            <p>Java Developer</p>
        </div>
    </div>
    <div class="card">
        <img src="../images/img_avatar.png" alt="" />
        <div class="container">
            <h4><b>Hong Gil Dong</b></h4>
            <p>Java Developer</p>
        </div>
    </div>
    <div class="card">
        <img src="../images/img_avatar.png" alt="" />
        <div class="container">
            <h4><b>Hong Gil Dong</b></h4>
            <p>Java Developer</p>
        </div>
    </div>
    <div class="card">
        <img src="../images/img_avatar.png" alt="" />
        <div class="container">
            <h4><b>Hong Gil Dong</b></h4>
            <p>Java Developer</p>
        </div>
    </div>
    <div class="card">
        <img src="../images/img_avatar.png" alt="" />
        <div class="container">
            <h4><b>Hong Gil Dong</b></h4>
            <p>Java Developer</p>
        </div>
    </div>
    <div class="card">
        <img src="../images/img_avatar.png" alt="" />
        <div class="container">
            <h4><b>Hong Gil Dong</b></h4>
            <p>Java Developer</p>
        </div>
    </div>
    <div class="card">
        <img src="../images/img_avatar.png" alt="" />
        <div class="container">
            <h4><b>Hong Gil Dong</b></h4>
            <p>Java Developer</p>
        </div>
    </div>
</body>
</html>

3 x버튼 누르면 위에 메뉴바 사라지기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
	.card{
		width:300px;
		border-radius: 5px;
		transition:0.3s;
		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	}
	.card:hover {
		box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
	}
	.card img{
	 width: 100%; /* 이거 안주면 이미지 크기 안줄어들고 크게있음 */
	 border-radius: 5px 5px 0 0; /* 위에 두개만 라운드 */
	}
	.container{
		padding: 2px 16px;
	}
</style>

<style>
	.chip img{
		width: 50px;
		height: 50px;
		
		border-radius: 25px;
		float: left;
		
		margin-left: -25px;
		margin-right: 10px;
	}
	.chip{
		display: inline-block;
		padding: 0 25px;
		height: 50px;
		line-height: 50px; /* line-height와 height 같이 맞추면 가운데 정렬 */
		font-size: 18px;
		border-radius: 25px;
		background: #f1f1f1;
	}
	.closebtn{
		color: #888;
		font-size: 20px;
		font-weight: bold;
		padding-left: 10px;
		
		float: right;
	}
	.closebtn:hover{
		color: #000;
		cursor: pointer;
	}
</style>

</head>
<body>

<!-- .chip>img+span -->
<div class="chip">
	<img src="../images/img_avatar.png" alt="Person" />	
hong
	<span class="closebtn" onclick="this.parentElement.style.display='none'">&times;</span> 
				<!--여기서 this는 span이고 chip을 사라지게 해야하니까 parentElement  -->
</div>

<hr>
<!-- .card>img+.container>h4>b^p -->
<div class="card">
	<img src="../images/img_avatar3.png" alt="" />
	<div class="container">
		<h4><b>hong gil dong </b></h4>
		<p>Java Developer</p>
	</div>
</div>
</body>
</html>

저작자표시 (새창열림)

'WEB > CSS' 카테고리의 다른 글

[CSS] 그라디언트  (0) 2022.05.26
[CSS] 배경이미지사이즈 -contain, cover, origin, clip,parallex  (0) 2022.05.26
[CSS] 여러 배경이미지 (다중 배경) 추가  (0) 2022.05.25
[CSS] border-radius  (0) 2022.05.25
[CSS] 아이콘에 스타일+ 막대그래프 +사원 이미지  (0) 2022.05.25
'WEB/CSS' Related Articles more
Comments