/* ----------HTML부분--------- */

 

<nav class="menu-box-2">
  <ul>
    <li>
      <a href="#">메뉴 아이템 1</a>
    </li>
    <li>
      <a href="#">메뉴 아이템 2</a>
    </li>
    <li>
      <a href="#">메뉴 아이템 3</a>
    </li>
    <li>
      <a href="#">메뉴 아이템 4</a>
    </li>
  </ul>
</nav>

 

 

/* ----------CSS부분--------- */

 

/* 바디 노말라이즈 */
body {
    margin:0;
}

/* ul, li 노말라이즈 */
ul, li {
    margin:0;
    padding:0;
    list-style:none;
}

/* a 노말라이즈 */
a {
    color:inherit;
    text-decoration:none;
}

/* 커스텀 */
/* 타이틀 */
.title {
    text-align:center;
}

/* 메뉴 박스 */
.menu-box {
    margin-top:50px;
    text-align:center;
}

/* 메뉴 */
.menu-box > .menu {
    display:inline-block;
    padding:0 10px;
    background-color:#dfdfdf;
    border-radius:10px;
}

/* 메뉴 아이템 */
.menu-box > .menu > .menu-item {
    display:inline-block;
}

/* 메뉴 아이템 텍스트 */
.menu-box > .menu > .menu-item > .text {
    padding:10px;
    cursor:pointer;
    display:block;
}

/* 마우스로 선택된 메뉴 아이템의 텍스트 */
.menu-box > .menu > .menu-item:hover > .text {
    color:white;
    background-color:black;
}

/* 메뉴 박스 2 */
.menu-box-2 {
    margin-top:50px;
    text-align:center;
}

/* 메뉴 */
.menu-box-2 > ul {
    display:inline-block;
    padding:0 10px;
    background-color:#dfdfdf;
    border-radius:10px;
}

/* 메뉴 아이템 */
.menu-box-2 > ul > li {
    display:inline-block;
}

/* 메뉴 아이템 텍스트 */
.menu-box-2 > ul > li > a {
    padding:10px;
    cursor:pointer;
    display:block;
}

/* 마우스로 선택된 메뉴 아이템의 텍스트 */
.menu-box-2 > ul > li:hover > a {
    color:white;
    background-color:black;
}

'기초코드' 카테고리의 다른 글

★기본 CSS노말라이즈★  (0) 2022.10.21
인라인 그리드, 이미지 박스  (0) 2022.10.21
주석표  (0) 2022.10.19
부트스트랩 시작템플릿(JQuery 포함)  (0) 2022.10.19
★자주 사용하는 기초태그 모음★  (0) 2022.10.14

HTML <!-- -->
CSS /* */
자스 /* */    AND //

'기초코드' 카테고리의 다른 글

★기본 CSS노말라이즈★  (0) 2022.10.21
인라인 그리드, 이미지 박스  (0) 2022.10.21
메뉴박스 노말라이즈  (0) 2022.10.20
부트스트랩 시작템플릿(JQuery 포함)  (0) 2022.10.19
★자주 사용하는 기초태그 모음★  (0) 2022.10.14

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
</head>

<body>

</body>

</html>

 

'기초코드' 카테고리의 다른 글

★기본 CSS노말라이즈★  (0) 2022.10.21
인라인 그리드, 이미지 박스  (0) 2022.10.21
메뉴박스 노말라이즈  (0) 2022.10.20
주석표  (0) 2022.10.19
★자주 사용하는 기초태그 모음★  (0) 2022.10.14

< 친구한테 배운거>

posision:fixed; [메뉴박스 고정하고 싶을때]

line-height : 150%; [글자간격]width: calc(100% - 150px); [비율에서 고정값 빼기]

 

<폰트어썸>

<script src="https://kit.fontawesome.com/f1e32eaf40.js" crossorigin="anonymous"></script>

 

< CSS 노멀라이징 >

*{
  margin:0;
}
html, body {
  height:100%;
}

<배경3종세트> 

background-image: url("#"); [배경 이미지]
background-size: cover; 
background-position: center;


<정렬4종세트> 

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

 <이미지 사이즈 맞추기>

img {
  width: 300px;
  height: 150px;
  object-fit: cover;
}

 

<이미지에 그림자 주기>

img:hover{
    box-shadow:0 10px 10px rgba(0,0,0,0.3),
    0 14px 28px rgba(0,0,0,0.3);
}

 

box-sizing:border-box; [박스사이징]

 

 

div, section, article, nav [엘리먼트]

 

color : rgba(255,0,0,0.5); [글자색 변경]

background-color : red; [배경색 변경]

 

font-weight : bold; [폰트 변경]

font-size : 10rem; [글자크기 변경]

letter-spacing : 10px [글자자간 변경]

 

dispaly : inline-block; [글자화, 블럭화]

width : 500px; [너비] 

height : 500px; [높이]

border : 10px solid red; [테두리 만들기]

 

<a href = "#" target="_blank"> </a> [링크걸기]

 

div : hover [커서를 올렸을때 변화]
transition : width 1s; [변하는 속도]
&nbsp; [띄어쓰기, 공백문자]
text-decoration : none; [글자효과]
text-align : center; [글자 정렬]

object-fit:cover; [이미지 비율맞춤]
vertical-align:  top; [위로 정렬]
padding : 10px; [패딩(안) 넣기] (top, bottom, left, right)
margin : 10px; [마진(밖) 넣기]
div: nth-last-child(3) [순서정하기]
div: nth-of-type(3) [같은 타입중 순서정하기]

 

 

 

<JS>

console.clear(); [지운다]

console.log(1); [기록을 남김]

 

 

 

 

 

 

 

 

 

 

 

 

 

'기초코드' 카테고리의 다른 글

★기본 CSS노말라이즈★  (0) 2022.10.21
인라인 그리드, 이미지 박스  (0) 2022.10.21
메뉴박스 노말라이즈  (0) 2022.10.20
주석표  (0) 2022.10.19
부트스트랩 시작템플릿(JQuery 포함)  (0) 2022.10.19

+ Recent posts

티스토리툴바