탭 메뉴 만들기
html
<!DOCTYPE html>
<html>
<head>
<title>로그인 UI</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/title.css">
<link rel="stylesheet" href="css/font.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
<body>
<div>
<ul>
<li><a href=""><span class="material-symbols-outlined" >code</span>CODE</a></li>
<li><a href=""><span class="material-symbols-outlined">filter_none</span>ABOUT</a></li>
<li><a href=""><span class="material-symbols-outlined">grouped_bar_chart</span>SERVICES</a></li>
<li><a href=""><span class="material-symbols-outlined">mail</span>CONTACT</a></li>
</ul>
<h2>This is code section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error<br> neque saepe commodi blanditiis fugiat nisi aliquam ratione porro <br> quibusdam in, eveniet accusantium cumque. Dolore officia<br> reprehenderit perferendis quod libero omnis.
</p>
</div>
</body>
</html>1. div
하나의 박스를 만듦
https://developer.mozilla.org/ko/docs/Web/HTML/Element/div
<div>: 콘텐츠 분할 요소 - HTML: Hypertext Markup Language | MDN
HTML <div> 요소는 플로우 콘텐츠를 위한 통용 컨테이너입니다. CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않습니다.
developer.mozilla.org
2. ul
정렬되지 않는 목록 만듦
https://developer.mozilla.org/ko/docs/Web/HTML/Element/ul
<ul> - HTML: Hypertext Markup Language | MDN
HTML <ul> 요소는 정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현합니다.
developer.mozilla.org
3.li
목록의 항목을 만듦
https://developer.mozilla.org/ko/docs/Web/HTML/Element/li
<li> - HTML: Hypertext Markup Language | MDN
HTML <li> 요소는 목록의 항목을 나타냅니다. 반드시 정렬 목록(<ol>), 비정렬 목록(<ul>, 혹은 메뉴(<menu>) 안에 위치해야 합니다. 메뉴와 비정렬 목록에서는 보통 불릿으로 항목을 나타내고, 정렬 목
developer.mozilla.org
4. a
다른 페이지나 같은 페이지로 이동할 수 있는 링크
https://developer.mozilla.org/ko/docs/Web/HTML/Element/a
<a> - HTML: Hypertext Markup Language | MDN
HTML <a> 요소(앵커 요소)는 href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다. <a> 안의 콘텐츠는 링크 목적지
developer.mozilla.org
5. span 아이콘
1. https://fonts.google.com/icons
Material Symbols and Icons - Google Fonts
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.
fonts.google.com
2. 원하는 임티 선택
3. head에 추가
4. h2
html 구획 제목 요소
https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading_Elements
<h1>–<h6>: HTML 구획 제목 요소 - HTML: Hypertext Markup Language | MDN
HTML <h1>–<h6> 요소는 6단계의 구획 제목을 나타냅니다. 구획 단계는 <h1>이 가장 높고 <h6>은 가장 낮습니다.
developer.mozilla.org
5. p
하나의 문단
https://developer.mozilla.org/ko/docs/Web/HTML/Element/p
<p> - HTML: Hypertext Markup Language | MDN
HTML <p> 요소는 하나의 문단을 나타냅니다. 시각적인 매체에서, 문단은 보통 인접 블록과의 여백과 첫 줄의 들여쓰기로 구분하지만, HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무
developer.mozilla.org
@charset "UTF-8";
div{
margin: 0 auto;
display: block;
width: 439px;
height: 300px;
border-radius:20px;
background-color: #fff;
box-shadow: 2px 2px 10px 2px #999;
padding: 40px;
}
div>ul{
display: flex;
text-align: center;
}
div ul li{
width: 100%;
height: 52px;
}
div ul li:nth-child(1){
}
span{
width: 100%;
}
div ul li:hover{
border-bottom: 3px solid skyblue;
}
div ul li:hover span{
color: skyblue;
}
div ul li:hover a{
color: skyblue;
}
div h2{
font-weight: bolder;
font-size: 25px;
margin:40px 0;
}
div p{
line-height: 1.5;
}border- radius:
: 모서리 둥글게 만듦
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
border-radius - CSS: Cascading Style Sheets | MDN
The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
developer.mozilla.org
box-shadow:
: 상자 그림자
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
box-shadow - CSS: Cascading Style Sheets | MDN
The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.
developer.mozilla.org
dispaly: flex;
: 왼쪽에서 오른쪽으로 순서대로 정렬
https://developer.mozilla.org/en-US/docs/Web/CSS/display
display - CSS: Cascading Style Sheets | MDN
The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
developer.mozilla.org
text-align:center;
: 텍스트 센터
https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
text-align - CSS: Cascading Style Sheets | MDN
The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box. This means it works like vertical-align but in the horizontal direction.
developer.mozilla.org
:hover
: 마우스 포인터로 요소를 가리킬 때 css 추가
https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
:hover - CSS: Cascading Style Sheets | MDN
The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).
developer.mozilla.org