250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags more
Archives
Today
Total
관리 메뉴

개린이 개발노트

국비지원 JAVA(자바) 프로그래밍 (카카오톡 프로필사진만들기) 본문

국비지원(국비교육) 웹 개발자 과정

국비지원 JAVA(자바) 프로그래밍 (카카오톡 프로필사진만들기)

개린이9999 2022. 12. 19. 09:07
728x90

포지션(Position)

absolute

fixed 

sticky

 

호버(hover) 예시

.loginWrap2 div a:hover {
  background-color: #03C75a;
  color: white;
}

네비게이션 바 예시 (navigation)

네비게이션 바 만들기

<!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>
  <link rel="stylesheet" href="css/style2.css">
</head>
<body>
  <ul class="nav">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JAVA</a></li>
    <li><a href="#">JSP</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</body>
</html>
.nav {
  list-style: none;
}

/* 
아래 처럼 전체로 잡는것 보다 아래 두 번째 방법 처럼 구체적으로 하는게 좋다.
a {
  text-decoration: none;
} */

.nav li a {
  text-decoration: none;
}

.nav li {
  float: left;
  text-align: center;
  width: 10%;
}

최상단으로 가는 법

href # transform

 

카카오톡 옛날 프로필 사진 만들어보기!

너무 귀여운 댕댕이다..이름마저 귀엽다.

 

내가 이렇게 만들어버렸다. 댕댕이한테 너무 미안하다... 그래서 선생님이 알려준 코드로 다시한번 만들어보았다.

 

<!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>
  <link rel="stylesheet" href="옛날카톡프사1.css">
</head>
<body>
  <div class="profile">
    <div class="image">
      <img src="../image/bambi.jpg">
    </div>
    <h3>밤비</h3>
    <p>ㅇㅇㅇㅇㅇㅇㅇ</p>
  </div>

  <div class="icons">
    <div>
      <img src="../image/message.png">
      <p>1:1 채팅</p>
    </div>
    <div>
      <img src="../image/call.png">
      <p>통화하기</p>
    </div>
    <div>
      <img src="../image/callvideo.png">
      <p>페이스톡</p>
    </div>
    <div>
      <img src="../image/comma.png">
      <p>카카오스토리</p>
    </div>
  </div>
</body>
</html>
*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body{
  width: 100%;
  height: 100%;
  background-color: yellow;
}

.profile {
  width: 100%;
  padding-top: 50%;
  text-align: center;
  border-bottom: 1px solid black;
  padding-bottom: 10px;
}


.image{
  width: 150px;
  height: 150px;
  margin: auto;
  border-radius: 100%;
  overflow: hidden;
}

.image img{
  width: 100%;
  height: 100%;
}

.icons{
  width: 100%;
  text-align: center;
  margin-top: 20px;
}

.icons div{
  float: left;
  width: 25%;
}

.icons div img{
  width: 25%;
}

 

 

완벽하게는 아니지만.. 네모였던 밤비가 다시 동그라미가 되었다. 귀엽다.

 

애니메이션

 

가상 클래스

hover 동적 의사 클래스 

속성 선택자

[속성]: 해당속성을 가지고 있는 모든 것

p[속성]: p태그중 해당 속상을 가지고 있는 것

[속성="속성값"]: 해당 속성값을 가지고 있는 것

[class="ss"]: 클래스가ss인 모든것

동위선택자(형제선택자)

728x90

'국비지원(국비교육) 웹 개발자 과정' 카테고리의 다른 글

국비지원 JAVA(자바) 프로그래밍  (0) 2022.12.21
국비지원 JAVA(자바) 프로그래밍 (css CSS 인라인, 시맨틱 태그)  (0) 2022.12.20
국비지원 JAVA(자바) 프로그래밍 (박스사이징)  (0) 2022.12.16
국비지원 JAVA(자바) 프로그래밍(CSS)  (0) 2022.12.15
국비지원 JAVA(자바) 프로그래밍( Visaul Studio Code( VS CODE) 비쥬일 스튜디오,  (0) 2022.12.14
'국비지원(국비교육) 웹 개발자 과정' Related Articles more