.sub_nav ul li:first-child:nth-last-child(1) {
  width: 50%;
}

.sub_nav ul li:first-child:nth-last-child(2),
.sub_nav ul li:first-child:nth-last-child(2) ~ li {
  width: 50%;
}

.sub_nav ul li:first-child:nth-last-child(3),
.sub_nav ul li:first-child:nth-last-child(3) ~ li {
  width: 33.3333%;
}

.sub_nav ul li:first-child:nth-last-child(4),
.sub_nav ul li:first-child:nth-last-child(4) ~ li {
  width: 25%;
}

.sub_nav ul li:first-child:nth-last-child(5),
.sub_nav ul li:first-child:nth-last-child(5) ~ li {
  width: 20%;
}


.sub_nav ul li:first-child:nth-last-child(6),
.sub_nav ul li:first-child:nth-last-child(6) ~ li {
  width:16.6%;
}

 

 

서브페이지 2뎁스에 유용하게 쓰고 있다 

이전엔  스크립트나 제이쿼리 li 요소 개수를 세어서 너비를 변경했는데 

css로도 너비 변경이 가능!!

 

.sub_nav ul li:first-child:nth-last-child(5), /* 개수가 5개일 때 첫번째(뒤에서 부터 5번째) 너비는 20% */
.sub_nav ul li:first-child:nth-last-child(5) ~ li { /* 첫번째 요소 일반형제연산자(~) 뒤에도 모두 20%로  */
  width:20%; 
} 

 

 

 

 

 

구글링 중에 발견

 

https://www.growingwiththeweb.com/2014/06/detecting-number-of-siblings-with-css.html

 

Detecting number of siblings with CSS

I came across a clever CSS technique, originally developed by André Luís in 2009 and later refined by Lea Verou 2 years later; applying a style when the number of siblings is a particular number. It’s definitely worth knowing.

www.growingwiththeweb.com

 

반응형

'HTML&CSS' 카테고리의 다른 글

SEO 메타태그 & 파비콘  (0) 2020.03.11
SEO  (0) 2019.08.13

<meta charset="utf-8">

<meta name="description" content="<?php echo $['site_name']; ?> 홈페이지에 오신 것을 환영합니다.">

<meta name="keywords" content="여기에, 키워드를, 입력해서, 검색되게">

<meta name="Robots" content="index, follow">

<meta name="viewport" content="width=device-width, user-scalable=1">

<meta property="og:type" content="website">

<meta property="og:title" content="<?php echo $['site_name']; ?>">

<meta property="og:description" content="<?php echo $['site_name']; ?> 홈페이지에 오신 것을 환영합니다.">

<meta property="og:url" content="<?=$['url'];?>">

<meta property="og:image" content="<?=$['path']['img']?>openGraph.jpg">

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<link rel="canonical" href="<?=$['url'];?>">

<link rel="shortcut icon" type="image/x-icon" href="<?=$['path']['img']?>favicon.ico">

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">

<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">

<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">

<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">

<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">

<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">

<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">

<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">

<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">

<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<link rel="manifest" href="/manifest.json">

<meta name="msapplication-TileColor" content="#ffffff">

<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">

<meta name="theme-color" content="#ffffff">

<title><?php echo $['site_name']; ?></title>

 

 

 

파비콘은 여기서..

https://www.favicon-generator.org/

반응형

'HTML&CSS' 카테고리의 다른 글

li 개수에 따라서 width값 설정하기  (0) 2020.03.11
SEO  (0) 2019.08.13
1
2
3
4
5
6
7
8
9
<select name="" id="scltList" title="포털 리스트">
 
<option value="x" selected="selected" id="slct">--선택--</option>
<option value="http://www.naver.com">네이버</option>
<option value="http://www.google.co.kr/">구글</option>
<option value="http://www.daum.net/">다음</option>
 
</select>
        
cs
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
 
/* select tab function */
var selectTab = document.getElementById("scltList"); // 셀렉트를 변수에 저장
    
selectTab.addEventListener("change",function(){ // change 이벤트 발생
 
    var val = selectTab.options[selectTab.selectedIndex].value; // option value값 저장
 
    if(val != "x" ){ // value값이 x가 아닐 때 
 
    window.open(val); // 새 창으로 홈페이지 띄움
        
    document.getElementById("slct").selected = true// 선택한 옵션을 제일 처음으로 바꿔줌.    
 
    }    
    
});
    
</script>
cs

 

셀렉트를 이용하여 홈페이지를 이동시키는 기능입니다.

1. 셀렉트 내 옵션을 선택 할 때 value값이 x가 아니면 

    window.open을 이용하여 새 창으로 url로 이동

2. 이동 후 제일 첫번째 옵션으로 재선택됨

반응형

+ Recent posts