실전이다! 뭘 배웠다고 실전인지는 모르겠지만.. 만드면서 익히는게 가장 빨리 익히는 방법이니까 당장 하나 만들어보자.
웹페이지 구성은 웹페이지 마다 달라진다. 그래도 각 웹페이지 마다 필수적으로 쓰이는 헤더부분과 풋터부분, 그리고 네이게이션바. 이번에 작업해볼 내용은 네비게이션 바이다. 영어로 navigation bar 줄여서 nav bar라고 부른다.
오늘의 목표다. 마우스를 올리면 색상 변하는 것까지 구현하는게 목표다.
먼저 html로 뼈대를 만들어보자.
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Blog</a></li>
</ul>
네비게이션은 우리가 원하는 곳으로 우리를 보내줄 수 있어야 한다. 그래서 전부 a태그를 이용해 하이퍼링크를 걸어준다. 이렇게 뼈대 완성. Css를 아직 적용 안해주었기 때문에 모양은 형편없다.
세상에.. 이게 뭐람.
일단 저 꼴보기 싫은 까만 동그라미부터 없애버리고 싶다. list-style-type이라는 속성에 값을 none으로 주면 된다. 그런데 누구한테?? 어떤 태그에게 이 속성을 먹여야 하는가?
저 동그라미의 주범에게 명령을 내리면 된다. 즉.. ul태그!
ul태그에 명령을 내렸다. ‘list-style-type같은 건 필요없어..’ 라고.
말을 잘 듣는다. 착하다.
그런데 우리는 링크가 걸려있어도 파란색이라거나, 보라색이라거나 밑줄이 그어져있거나 하길 원하지 않는다. 이렇게 만드는 놈에게 명령을 내려야 한다. a태그 너 일루와..
a {
text-decoration: none;
}
이렇게 css파일에 입력해주자. a태그에게 쓸데없이 꾸미지 말라고 명령내리는 부분이다.
깔끔!
그런데 보면 뒤에 상자처럼 색이 입혀져 있는데… 배경색을 줘볼까? 배경색을 주는 속성은 background-color 이다. 그런데.. 이건 누구에게 명령을 내려야하나? 어디 한번 ul에다 줘보자.
ul {
list-style-type: none;
background-color: #f1f1f1;
}
#f1f1f1이런건 색상 코드라고 한다. 이 숫자는 그냥 구글에 색상표라고 검색해서 나오는 웹사이트들을 이용해서 구하자.
억.. 이거 왜이래…
줄 전체가 색칠이 되었다. 이건 ul태그가 block요소 성격을 가지고 있다는 의미이다. 그렇다면 크기를 좀 조정해보자.
ul {
list-style-type: none;
background-color: #f1f1f1;
width: 200px;
}
좌우를 잘라 background-color가 적용되는 부분을 줄이기는 했는데.. 우리가 만들려는 목표에 비해 글씨가 너무 갑갑하게 붙어있는 느낌이다. 저건 어떻게 조절하지?
그러기 위해서 다음 시간에 box모델이라는걸 배우도록 하겠다.
인프런 - https://www.inflearn.com/
코드카데미 - https://www.codecademy.com/