✅ 가시속성(display)
-
block요소 : 태그가 공간을 한 줄 전체 차지
- 가로,세로 높이 조절이 가능
- 자동으로 한 줄 개행 발생
예) p태그, h태그, div태그
-
inline요소 : 태그가 컨텐츠의 크기 만큼 공간을 차지
- 가로,세로 수정 불가
예) span태그, strong태그, textarea태그 등
- 가로,세로 수정 불가
-
none : 화면상에 태그를 안 보이게 할 때
- 태그를 실제로 삭제하는 개념이 아니다.
예) 안 보이다가 menu 누르면 뜨는 쫘르륵 메뉴바
- 태그를 실제로 삭제하는 개념이 아니다.
참고 정보
개행 : 행이 바뀐다.
크롬 개발자모드에서 여백 : 살구색 표시
크롬 개발자모드에서 내용(컨텐츠) : 블루색 표시
CSS / 01 / 기초-2 中 . . .
- 선택자를 작성할 때, 반드시 마지막 목적지에 집중하자.
<style>
span {
display: none;
}
a:hover + span{
display: inline;
}
</style>
</head>
<body>
<a href="http://www.naver.com">네이버</a>
<span>www.naver.com</span>
</body>네이버 글씨에 마우스를 올리면, url 주소가 뜨는 알고리즘적 순서
1) 처음 계층선택자(span) [1점] 의 값 : span(url주소) 가린다.
2) 형제 선택자(a태그) [1점 ] + span [1점] = 총 2점
3) 총 2점의 작동 값은 : 마우스를 올렸을 때, 보이게 한다.
4) 따라서, 처음에는 안 보이고, 마우스 올리면 우선순위에 따라 보인다.
▪️ 검정 테마를 기준으로 작성되었읍니다.