BNX 사이트 메뉴바
- 카페24의 템플릿 중 글자로만 구성된 간단한 메뉴의 예시를 참고하여 html과 css의 기초 문법으로 만들어보자
사이트 주소 : bnx.oa.gg
1. html로 메뉴 요소 구성하기
- 로고는 이미지이지만 우선 글자로 대채하기로 했다
- img 태그로 불러와도 되지만 html과 css의 상관관계에 대한 이해와 연습이 주목적이다
사용될 태그 :
div,nav,section,a
html 입력코드 --->
<div>
<a href="bnx.oa.gg">BNX</a>
</div>
<nav>
|
<section><a href="#" target="blank">BRAND</a></section>
|
<section><a href="#" target="blank">VISUAL</a></section>
|
<section><a href="#" target="blank">STYLE</a></section>
|
<section><a href="#" target="blank">MEDIA</a></section>
|
<section><a href="#" target="blank">NEWS</a></section>
|
<section><a href="#" target="blank">STORE</a></section>
|
<section><a href="#" target="blank">CUSTOMER</a></section>
|
</nav>-
우선 상단 로고와 메뉴 아이템의 구성 요소는 만들었다
-
emmet 코드의 예시는 아래와 같다
<div> <a href="bnx.oa.gg">BNX</a> </div> <nav> {|}+((section>a[href="#" target="blank"]{메뉴아이템})+{|})*7 </nav>
2. css로 html의 각 요소 속성 넣기
2-1. 상단 로고 만들기
div로 지정된 영역을 꾸며준다- 작업리스트 :
1. 로고 가운데 정렬
2. 글자 굵게, 자간조절, 고딕으로 변경사용될 명령어 :
font,text,letter,>
css 입력코드 --->
div{
text-align: center; //가운데 정렬
font-family: sans-serif; //고딕으로 변경
font-weight: bold; //폰트 두껍게
font-size: 3rem; //폰트 크기
letter-spacing: -0.07rem; //자간 줄이기
}
div > a{
color: black; //폰트 색상
text-decoration: none; //링크 밑줄 지우기
}- 로고 결과 유사하게 잘 만들어졌다
주의할 점 :
1.a에text-align을 넣어도 안 먹혀 보이는 이유는 bnx라는 글자 범위에서 가운데 정렬을 하는 것이기 때문이다
2.a는display기본값이inline이기 때문에block으로 지정해주면 한 줄 전체를 사용해 가운데 정렬이 가능하다
3. 하지만a에는 너무 많은 요구사항을 적는 것은 옳지 않다 그래서 부모 태그인div는display기본 속성이block이므로text-algn은 물론 그 외의 공통속성을 넣어주도록 하자
!꿀팁 :
코드를 입력했을 때 반응이 없다면 background컬러로 해당 영역이 올바른지 항상 체크해주자
2-2. 메뉴 아이템 가공하기
nav,section,a에 속성을 부여한다- 작업리스트 :
1. css 코드는 위의 로고 만들기와 동일
2. html의 부모 자식간 태그별display의 상관관계를 유의하자
3.hover를 추가해보자추가될 명령어 :
display,width
nav {
text-align:center;
font-size: 0.7rem;
}
nav> section{
display:inline-block; //한 행에 여러 개
font-family:sans-serif;
width: 100px; //메뉴 아이템 영역 크기지정
}
nav> section> a{
color:black;
text-decoration:none;
display: block; //한 행을 전부
}
nav> section> a:hover{
background-color: lightgray;
}- 메뉴가 정상적으로 잘 꾸며졌다
주의할 점:
1.display가 왜section에서는inline-block이고a에서는block인가를 꼭 이해하자 (상단 html 주의점 참고)
2.a의 기본값은inline-block이며 한 행에 여러 개라는 뜻도 있지만 이는 여러 개 중 한 값의 최소한의 영역을 잡는다는 뜻도 포함된다
3. 따라서nav의width값이 변경될 때마다 자동으로a의 영역을 조절하고 싶다면 기본값을block으로 하여 해당 영역을 최대로 사용한다고 명령하면 된다
4. 이를 보아block은 한 행에 하나만 사용할 수 있다는 것은 곧 한 영역의 최댓값을 사용한다고 생각할 수 있다
- 주의할 점에서 3, 4번은 메뉴 클릭 범위를 조절할 때 실무에서 자주 쓰이는 방법 중 하나이므로 꼭 기억해두자
- 무식하게 매번
width값을nav가 바뀔 때마다 해당a를 찾아서width를 삽입해 값을 바꿔주지 말도록 하자
Today Comment :
css의display를 이용하여 메뉴를 만드는 작업에서 속성을 삽입하는 위치가 많이 혼동되었다
우연히 발견한background로 해당 영역을 확인하고 코드를 삽입해야 할 위치를 찾아 나아가는 꿀팁을 몰랐다면 영역에 대한 개념과 코드가 왜 안되는지 이해하지 못했을 수도 있다
보이지 않는 영역을 확인할 때 유추하지 말고 꼭backgound로 영역을 자주 확인하는 습관을 들이자
