배운내용 :
- <nav bar>, <ul>, <li> 태그로 상단메뉴 만들기
- 태그 셀렉터 활용하기 (자식 셀렉터)
1. 태그들
2. 셀렉터와 부모, 자식 태그
2-1 셀렉터 문법 공백
2-2 셀렉터 문법 >
(5) nav bar로 상단 메뉴 만들기
1. 태그들
딱히 기능은 없지만, 의미있어보일려고 존재하는 태그들이 있다.
<section></section> : 섹션 표현하고 싶을 때
<footer></footer> : 하단의 정보(footer) 표현하고 싶을 때
<span></span> : 의미없는 문자들 감싸기
<nav></nav> : div 같은 애
...
얘네들 말고도 더 많다.
2. 셀렉터와 부모, 자식 태그
이중에서 맨 마지막의 nav 태그가 제일 대표적인 애인데,
기능은 div와 똑같음. 근데 이게 네비게이션 바인지 직관적으로 알 수 있으려고 쓰는거이다.
...html
<body>
<nav>
<ul class="navbar">
<li><a href="#">영화</a></li>
<li><a href="#">맛집</a></li>
<li><a href="#">IT</a></li>
<li><a href="#">컴퓨터</a></li>
</ul>
</nav>
</body>이렇게 <nav>태그 안에다가 <ul>,<li> 태그들로 리스트를 만들 수 있다.
이제 이 리스트를 CSS로 꾸밀건데, 태그들이 많기 때문에, 일일히 class 를 입력해주면 정신없다.
그래서 부모 태그 셀렉터로 자식 태그들을 꾸밀 것이다.
...css
.navbar li{
display: inline-block;
width: 60px;
text-align: center;
background: #eee;
padding: 10px;
}이렇게 코드를 짜면, 모든 li 블록들이 해당 태그를 가질 수 있다.
2-1 셀렉터 문법 공백
~ 안에 있는 모든 자식 이라는 뜻이다.
그니까 얘는 navbar 안에 있는 모든 li 자식들+a 태그+span 태그+....+기타등등 태그들 에게 {특징}을 적용해줄 수 있다.
2-2 셀렉터 문법 >
~ 안에 있는 직계 자식 이라는 뜻이다.
얘는 navbar 안에 있는 li 자식들에게만!! {특징}을 적용해줄 수 있다.
코딩애플 온라인 강좌 - 개발자도 단기완성!
단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절
codingapple.com
* 이 사이트의 HTML 강의를 수강하고 적는 강의노트이다.
* 개인공부용이다.
* 쌤 말투 시크해서 넘 좋다.
* 강의 예제 노출이 안되게 조심하자
'컴퓨터 > Front' 카테고리의 다른 글
| [JavaScript] DOM 의 뜻, 자바스크립트가 html 을 해석하는 원리 (0) | 2022.07.24 |
|---|---|
| [html] Google fonts icons (material-icons)삽입하기 + Outlined, Rounded, Sharp, Twotone 추가하기 (2) | 2022.02.06 |
| [html] 코딩애플 HTML/CSS All-in-one 강의노트 : (4) div랑 float (0) | 2021.11.22 |
| [html] 코딩애플 HTML/CSS All-in-one 강의노트 : (3) CSS로 html 꾸미기_CSS 셀렉터 별 우선순위 (0) | 2021.11.18 |
| [html] 이미지 margin 과 padding 의 차이점 (2) | 2021.11.17 |
댓글