21.Dec.15 HTML & CSS // Selector
Clear : both를 다음 구성이 오는 div문이 아닌 그냥 완전 단독의 div에 넣어서 해줘도 float 리스크 헷지 가능함.
또한 이로인해 아래 선언되는 div문에 대해 margin등을 줄 수 있음.
그러므로 그냥 float 준 다음에 clear : both를 선언하는 단독 div문을 주는 것을 추천
Navigation bar = 노션의 왼쪽 메뉴바 같은 존재
*참고 <div> = <nav> = <selection> = <footer> 기능은 div와 완전히 같다. 다만 너무 div만 쓰면 이게 어떤 역할인지 모르니, 명명 다르게 해주는 같은 역할을 선언하므로써 식별하기에 도움 됨.
.navbar li{ display: inline-block; }
selector 문법 중 공백 : ~안에 있는 이라는 뜻 그러므로 navbar 선언된 함수 안에 li태그가 있는 애들한테만 적용하라는 의미의 함수가 됨.
navbar와 li 사이에 스페이스바를 넣어주는게 바로 그 역할이되는것임
또는 navbar>li{
}
이것도 같은 역할임. 하지만 다른 점은 이것은 바로 밑에 있는 '직계 자식'만 적용되고, 자식의 자식들에 있는 li는 적용이 되지 않는다.
<a> 태그 사용시 늘 텍스트 아래에 밑줄이 쳐지게 되는데, 이때 text-decoration: none 을 넣어주면, 밑줄이 사라지게 된다.
한 태그에 클래스 여러개 동시 선언 가능!
이런경우 <a class="navbar blog-img"> 이런식으로 한 칸 띄면 두개 이상도 동시 클래스 선언가능하다.
셀렉터를 너무 많이 타고 들어가면, 직관적이지 않다.(아래 그림)
그렇기에 셀렉터 적용해야 될 친구가 되게 많이 감싸져 있다면, 그냥 그 감싸진 친구 직전 태그에 새로운 클래스 부여해서 직관적으로 보이게 해줄 수 있다.(아래 그림)
또한 이로인해 아래 선언되는 div문에 대해 margin등을 줄 수 있음.
그러므로 그냥 float 준 다음에 clear : both를 선언하는 단독 div문을 주는 것을 추천