여러분은 이제 저랑 같이 차근차근 따라 하시면서 위와 같은 웹페이지를 만드시게 될 것입니다.
상단헤더 만들기
- 웹사이트 헤더란 무엇인가?
헤더는 웹사이트 상단에 위치에 있는 영역을 말합니다. 이 영역에 들어가는 정보는 브랜드명, 로고, 내비게이션, 로그인 등이 있습니다.
헤더 정보들은 본인의 웹사이트 목적에 따라 달라집니다.
웹사이트 목표에 맞게 헤더를 디자인하고 코딩하면 되겠습니다.
- 뼈대 만들기
먼저 index.html과 style.css 가 필요합니다~
먼저 뼈대를 위한 index.html부터 만들어볼까요?
<html>
<head>
<title>헤더만들기</title>
</head>
<body>
<header class="my-header">
<div class="my-header-logo">
<a id="my-logo" href="#">LogoType</a>
</div>
<div class="my-header-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">생활</a></li>
<li><a href="#">인테리어</a></li>
<li><a href="#">금융</a></li>
<li><a href="#">IT</a></li>
</ul>
</div>
</header>
</body>
</html>여기서 잠깐!
class 와 id 가 있는데 왜 class를 썼는지 알고 싶으신 분이 계실 거라 생각해요
그래서 준비했습니다.
- class 와 id 차이점!!
class는 여러개 이름을 가질 수가 있어요
예시)
<header class="my-header">
이 태그에 또 다른 클래스가 mytest라는 클래스가 들어가야 된다면
<header class="my-header mytest">라고 써주면 됩니다.
id는 어떨까요?
id는 고유 이름 같은 거라고 생각하시면 돼요
한 태그에 한 개만 들어갈 수 있어요
예시)
<a id="my-logo"> 에는 my-logo라는 id 한 개만 들어가게 됩니다.
안 돼요!! =>>> <a id="my-logo mytest"> 이렇게 안된다는 거죠
위에 코드 대로 작성하셨으면 아래와 같이 될 겁니다.
여러분은 웹사이트를 만드셨어요
단 헤더만요~ ㅋㅋ
이제 여기서 예쁘게 꾸며줘 볼까요?
- 스타일 꾸미기
style.css파일을 만들어주세요
css가 무엇인지 알아야겠죠??
css는 Cascading Style Sheets라고 하고 이것을 사용하면 멋진 웹사이트를 만들 수가 있어요.
css를 사용하면 HTML 태그의 모양을 바꾸고 원하는 디자인을 표시할 수 있어요
#my-logo{
color: pink;
}
.my-header{
text-align: center;
height: 4.375rem;
width: 73.375rem;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.my-header::after{
content: "";
top: 4.375rem;
position: absolute;
width: 73.375rem;
height: 1px;
background-color: #e5e5e5;
}
.my-header-menu{
width: 24.375rem;
}
.my-header-menu ul{
display: flex;
justify-content: space-between;
list-style: none;
}
a{
text-decoration: none;
color: black;
}
<header class="my-header">를 볼까요?
text-align 속성이 뭔지 알아야겠죠?? 영어 그대로 텍스트 정렬을 뜻해요
그래서 center는 텍스트를 가운데 정렬시킨다는 의미예요.
height는 my-header 클래스 높이를 지정하는 거고요
width는 너비를 지정하는 거고요.
margin 은 여백을 나타내는데요
여기서 여백을 나타내는 게 두 가지가 있어요
margin과 padding이라는 속성인데요~
margin과 padding 차이점
margin을 줬을 때 모습이고요
padding을 줬을 때 모습이에요
border는 검은색 테두리를 말해요 기본값으로는 테두리가 없어요
margin은 border 즉 테두리 바깥쪽의 여분을 주는 거고요
padding은 border 즉 테두리 안쪽 콘텐츠 여분을 주는 거예요
display 속성을 알아볼까요?
display는 어떻게 보여줄지 지정해 주는 속성이에요
속성 값들로 none, block, inline, inline-block, flex 등 있다.
none은 아예 영역에서 빼버리는 역할을 한다.
inline 은 콘텐츠 크기만큼만 영역을 차지한다. 또한 줄 바꿈이 되지 않아서 한 줄 세우기가 가능하다. width : 300px 등 아무리 줘도 변함없이 컨텐츠 크기만큼만 차지합니다..
block 은 한 줄을 다 차지해 버린다. 기본적으로 width: 100%이나 마찬가지입니다.
inline-block 은 설정했을 때 inline 기능을 기본적으로 갖고 있다 하지만 사용자가 height와 width를 주면
준 만큼 영역을 차지하게 됩니다.
flex는 동적으로 요소들을 정렬시켜주는 속성이다. 이때 선언한 태그에서는 flex-container가 되고 그의 자식 태그들은 flex-item 속성을 갖게 됩니다.
justify-content는 콘텐츠 주위 공간이나 콘텐츠 사이사이 공간을 설정해 주는 속성입니다.
여기서 내가 사용한 space-between은 컨텐츠 사이 공간을 부여해 주는 기능을 합니다.
. my-header::after 대해서 알아볼까요?
::after는 css에서 쓰는 요소로 부여한 속성뒤에 가상요소를 추가시켜 줍니다.
content 속성은 꼭 들어가야 합니다. 안 들어가면 화면에 시각적으로 나타나지 않습니다.
그래서 제가 왜 ::after 가상요소 썼냐면요 하단 줄 만들려고 했습니다. ㅎㅎㅎ
여기서 position에 대해서 알아보죠
position은 요소의 위치를 결정하는 데 사용하는 속성입니다. 이 속성을 이용해서 어떻게 배치하는지 정의할 수 있어요
absolute는 가장 가까운 상위 요소의 기준으로 위치가 결정됩니다.
속성 값들로는 static, relative, absolute, fixed, sticky 가 있어요
다 작성하게 되면 요렇게 됩니다.
다음에는 main 세션을 들어가겠습니다 main이 뭐냐고요?? 다음에 보시면 됩니다.
footer 부분을 보고 싶으시다면 아래의 버튼을 눌러주세요
'IT' 카테고리의 다른 글
| 여러분도 이제 웹사이트를 만들 수 있습니다 - footer편 (1) | 2024.10.01 |
|---|---|
| 여러분도 이제 웹사이트를 만들 수 있습니다 - main편(컨텐츠부분) (2) | 2024.09.30 |
| 대학생을 위한 Microsoft Word 무료 다운로드 방법 및 설치 가이드 (6) | 2024.09.25 |
| 파워포인트 템플릿 선택및 추천사이트 (2) | 2024.09.23 |
| 그림판에서 사진 합치는 방법에 대해서 (1) | 2024.09.23 |
