[Day2] CSS 2 - selector, 색상, 테두리, margin, padding(border-box), width/height, box model, 링크, 텍스트, 아이콘, 글꼴, active처리

[Day2] CSS 2 [11/10]

1. CSS 선택자(selector)

1) 단순 선택자 - 태그명 < 클래스명 < ID명(숫자로 시작 X)

선택자 점수 높으면 우선 순위가 높다. ( 점수 계산 )

2) 결합자 선택자 - div p, div > p, div + p, div ~ p

후손 직계자식 형제레벨

특정 관계를 가진 요소

3) 유사 클래스 선택자 - 특정 상태를 기반으로 요소 선택

p:hover{}

:의사 클래스

4) 유사 요소 선택자 - 요소의 지정된 부분에 스타일을 지정하는 데 사용.

::의사요소

요소의 내용 앞 , 뒤에 내용 삽입

<div id="section">
  float:left
  <div></div>
  <div></div>
</div>                                     
#section::after{
  content:"";
  clear:both;
  display:table;
}
<!-- <div style="clear: both"></div> -->
<div id="footer"></div>

5) 속성 선택자 - [속성=속성값]

[type='button']             ->           :button(jquery selector)
[class*='col-']
[class|='col-']
[class^='col-']
[class$='col-']
[class~='col-']

2. CSS 적용하는 방법

1) 내부(Internal) css 적용방법 - 해당 페이지

2) 인라인( Inline)css 적용방법 - 해당 요소

내,외 css 적용방법 + 인라인 ( 장점 X )

3) 외부( External) css 적용방법 - 웹 사이트 전체( 여러 페이지 )

ㄱ. 외부파일명.css

ㄴ. <link href="~.css" rel="stylesheets">

3. 참고

속성값과 단위 사이에 공백 추가 X

font-size : 20 px

스타일 순서

인라인 > 내부 = 외부 (이건 순서대로) > 없으면 브라우저 기본값 적용

주석처리

html 주석처리 
css 주석처리 /*   */
javascript(js) 주석처리   //     /*   */
jsp 주석처리     <%--  --%>

색상

1) 미리 정의된 색상명 ( 표준 색상 이름 - 140개 )

background-color: Tomato;

2) RGB(0~255, 0~255, 0~255) red/green/blue 색의 3원소

background-color: rgb(0, 0, 0);

color:rgb(255,255,255);

3) #16진수 == #fff

color:#ffffff;

color:#0000ff;

4) RGBA(0~255, 0~255, 0~255, Alpha 투명도 0.0 ~ 1.0 )

background-color: rgb(0, 0, 0, 0.4);

5) HSL() hue(색조) Saturation(채도) Lightness(밝기)

background-color: hsl( 0, 100%, 50%);

6. HSLA()

[ css 배경 ]

1. 배경색

  body{
     /* 1. 배경색 */
     background-color: lightblue;
  }
  
  h3{
    background-color: yellow;
  }
  
  div{
    border:1px solid gray;
    width:200px;
    padding: 10px;
    background-color: rgba(0, 255, 0,  0.1);
  }
  
  div.first{
     /* opacity 속성으로 투명도를 설정하면 자식(하위)요소도 동일한 투명도를 상속한다. */
     opacity: 0.5;
  }

2. 배경 이미지 ex04_02.html

3. 배경 반복( repeat )

4. 배경 첨부

5. 배경 위치

<style>
body {
	background-color: red;
	/* paper.gif  67 * 56 */
	/* 이미지는 전체 요소(body)를 자동 가로/세로 반복  */
	/* (주의) 배경 이미지- 텍스트 색상 고려 */
	/* 배경색  X */
	/* background-image: url('../images/paper.gif'); */
	background-image: url('../images/img_tree.png');
	/* background-repeat: repeat-x; */
	/* background-repeat: repeat-y; */
	background-repeat: no-repeat;
	background-position: right top;
	
	background-attachment: fixed;
}
</style>

6. 배경 약식 속성

<style>
body {
	/* 6. 배경 약식 속성  color image repeat attachment  position */
	/* background: red  url('../images/img_tree.png')  no-repeat fixed right top ; */
	background:  url('../images/img_tree.png')  no-repeat fixed right top ;
	
	/* 
	background-color: red;
	background: red;
	 */
}
</style>

top - 페이지 제일 위로

<style>
   #top{
     /* 
      border-width:1px;
      border-style: solid;
      border-color: gray;
       */
       
       /* 테두리 약식 속성 */
       border:1px solid gray;
       width: 25px;
       height: 25px;
       
       position: fixed;
       right:5px;
       bottom: 5px;
  }
  
  /* :의사클래스  - 특정상태 */
  #top:hover{
    background-color: black;
    color:yellow;
    font-weight: bold;
    cursor: pointer;    /* 손가락 모양 */
  }
</style>

body

	<!-- #top>{top}+(h3>{css 배경 이미지})+lorem+p*50>{.} -->
	<div id="top"  onclick="top_click();">top</div>
	<h3>css 배경 이미지</h3>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel inventore
	vitae molestias tenetur quam minus perferendis ea ratione perspiciatis
	aut. At delectus cumque voluptatem dolorum iste error quasi quia
	doloremque.
	<p>.</p>
	<p>.</p>
	<p>.</p>
	<p>.</p>
	<p>.</p>
	<p>.</p>
	<p>.</p>
	<p>.</p>

<script>
   function top_click(){
	   // alert("이벤트 확인!!!@")
	   // 브라우저 종류에 따라 다름 -> 크로스 브라우징
	   document.body.scrollTop = 0;
	   document.documentElement.scrollTop = 0;
   }
</script>

테두리 스타일

<style>
   h3{
       /* 테두리 색상 */
       /* border-color: red;       */ 
       /* 테두리 너비 */
       /* border-width: 1px; */       
       
       /* 테두리 스타일 ( 필수 ) 을 지정하지 않으면 width, color 적용되지 않는다. */
       /* border-style: solid; */
       
      background-color: #ddffff;
      /* border */
      /* border-top: */
     border-left:6px solid #2196f3;  
      /* border-right:  */
      /* border-bottom:  */
      padding: 15px;
      
      /* 둥근 테두리 */
      border-radius: 5px;
   }
</style>

<style>
   div{
     border:2px solid red;
     padding: 10px;
     
    /*  border-radius: 7px; */
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
   }
</style>

<p style="border-style: dotted;">점선 테두리</p>
<p style="border-style: dashed;">점선 테두리</p>
<p style="border-style: solid;">실선 테두리</p>
<p style="border-style: double;">이중 테두리</p>
<p style="border-style: groove;">3D 홈 테두리</p>
<p style="border-style: ridge;">3D 융기된 테두리</p>
<p style="border-style: inset;">3D 삽입 테두리</p>
<p style="border-style: outset;">3D 아웃셋 테두리</p>
<p style="border-style: hidden;">숨겨진 테두리</p>
<p style="border-style: none;"> 테두리 정의 X</p>

margin

1. 테두리 외부 - 마진(여백)

테두리 내부 - 패딩

2. margin 속성

margin-top

margin-right

margin-bottom

margin-left

margin

3. 여백 속성값

1) auto - 브라우저가 여백을 자동 계산

2) 길이 단위 - px, pt, cm 등등

3) % - 요소를 포함하는 부모요소의 너비의 %

4) 상속 - 부모 요소 ( 여백) -> 자식 요소 (여백)

<style>
  body{
     padding: 0;
     margin: 0;
  }
  div{
     border: 1px solid black;
     /*
     margin-top: 25px;
     margin-right: 50px;
     margin-bottom: 75px;
     margin-left: 100px;
     */
     /* 약식 속성  top right bottom left 순서   시계방향 */
     /* margin:  25px 50px  75px  100px; */
     /* 
     margin:25px 25px 25px 25px;
     margin:25px;
     */
     /* 
            t/b  l/r
     margin:25px 100px;
     */
     /* 가운데 정렬 */
     /* margin: 0     auto; */
       
     /*         top  l/r   bottom */
     /*  margin:25px 75px  100px; */
  }
</style>

*주의) margin 중복됨 (따로 계산되지 않음)

[ 여백 축소된 경우 ]
bottom 여백 75px
top 여백 25px
100px (X) -> 75px (O)

여백 margin ( inherit 상속 )

<style>
  div{
    border: 1px solid red;
    margin-left: 50px;
  }
  
  p.ex1{
     border:1px solid blue;
     margin-left: inherit;
  }
</style>

padding

1. 테두리 -[간격]- 내용(conetnt)

padding-top

padding-right

padding-bottom

padding-left

3. 단위 : px, %, pt, cm 등등 inherit ( 음수 허용 X )

<style>
    div{
        border: 1px solid black;
        background: lightblue;
        
        /* 
        padding-top: 50px;
        padding-right: 50px;
        padding-bottom: 50px;
        padding-left: 50px;
         */
         /* padding:50px 50px 50px 50px; */         
         /* padding:50px; */
         
                       /* t/b       l/r */
         /* padding:25px 50px; */
         
                        /* t     l/r    b */
         padding:25px 50px 75px;
    }
</style>

4. 주의)

padding 속성 + width 속성 영향을 끼친다.

ex07_02.html

<style>
   div{
      width: 300px;      
   }
   div.ex1{
      border: 1px solid red;
   }
   div.ex2{
      border: 1px solid blue;
      padding: 10px;
      border-width: 20px; 
   }

</style>

<h3>ex07_02.html -   padding & width</h3>

<div class="ex1">div.ex1 - width:300px</div>

실제 너비 = width(300) + padding(10) * 2 + 테두리(20) * 2 = 360px 
<div class="ex2">div.ex2 - width:300px</div>

* padding, border -> width 속성값 유지 , content 너비 축소

   *{
     box-sizing: border-box;
   }

width(너비), height(높이)

1. width, height 속성에는 패딩, 테두리, 여백 이 포함되지 않는다.

2. 단위 : auto( 브라우저 자동 계산)

, px, cm 등등

, %

, inherit 부모값을 상속

, initial - 기본값 설정.

<style>
   div{
      width: 50%;
      max-width:500px;   /* 최대 너비  */
      
      height: 200px;
      background-color: lightblue;
   }
</style>

<div>너비 50%, 높이 200px</div>

* max-width 속성을 설정하지 않은 경우에는 최대 너비가 없음

width, max-width, min-width 속성

div{
    background: lightblue;
    
    /* 
    고정 너비이기에   브라우저 크기 500 보다 작게 하면 자동으로 스크롤바 생기더라.
    width:500px;
     */
    
    /* 브라우저 크기 500 보다 작게 하면 자동으로 div 너비 줄어든다.. */
    max-width:500px;  /* 최대너비 */
    min-width:250px;   /* 최소너비 */
    
    height: 100px;
    /* 
    max-height: ;  최대 높이
    min-height:    최소 높이
     */
}

<div>box</div>

box model

<style>
  pre{
     border: 15px solid green;
     padding: 50px;
     margin: 20px;
     width:300px;
  }
</style>

1. 디자인, 레이아웃..

패딩

여백 + 테 두리+패딩 +내용(content)+패딩+테두리 + 여백

패딩

박스 총 너비 = 여백 + 테두리+패딩 + 내용(content)+ 패딩 + 테두리 + 여백

= 20 + 15 + 50 + 300 + 50 + 15 + 20

= ???

박스 총 높이 = 여백 + 테두리+패딩 +내용(content)+패딩+테두리 + 여백

-> padding, border -> width 속성값 유지 , content 너비 축소 : box-sizing: border-box;

윤곽선(outline) - 요소의 테두리 외부에 그려지는 선.

<style>
   div{
      border: 1px solid red;
      padding: 10px;
      margin:auto;
      
      outline:1px solid blue;
      
      /* border    + 간격 +     outline */
      outline-offset:15px;
      
      /* 
      outline 약식속성
      outline-color
      outline-style           스타일 속성을 지정하지 않으면  아무 효과 없다. 
      outline-width
      outline-offset
       */
   }
</style>

- 테두리와 outline 간격주고자할때 : outline-offset

텍스트(text)

<style>
   body {
	   /* 1. 글자(텍스트) 색상 */
	   color: blue;   /*  # , rgb() , 색상명 */
   }
   
   h3{
       color:green;
       /* 2. 텍스트 정렬 */
       /* text-align: center; */
       text-align: justify;
   }
   
  p#p1{
      border:1px solid gray;
      /* text-align: justify; */
      /* justify : 사전적의미 - 타당성을 보여주다, 정당화시키다, 해명하다.
                    인쇄되는 텍스트의 행의 끝을 나란히 맞추겠다. */
      /* 텍스트의 마지막 줄을 정렬 */              
      text-align-last:right;                
  }
  
  div{
     /* 3. 텍스트 방향 변경 */
     direction: rtl;
  }
   
   /* 4. 텍스트에서 이미지의 수직 정렬 설정 */
   /* algin  수평 정렬 */
   img.a{  vertical-align: baseline; } /*  기본값 */
   img.b{vertical-align: text-top; }
   img.c{vertical-align: text-bottom; }
   img.d{vertical-align: sub; }
   img.e{vertical-align:super; }
</style>

<body>
<h3>ex11.html - 텍스트(text)</h3>

<!-- div>lorem5 -->
<div>Lorem ipsum dolor sit amet.</div>

<!-- p#p1>lorem -->
<p id="p1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 Praesentium architecto a explicabo nobis quaerat veritatis 
 quia autem placeat inventore magnam ad provident nesciunt
  excepturi ea officia aliquid aut dolorum recusandae!
</p>

<!-- p*5>lorem5 -->
<p>Lorem <img src="../images/sqpurple.gif" class="a" style="width: 9px;height: 9px;"> ipsum dolor sit amet.</p>
<p>Totam <img src="../images/sqpurple.gif" class="b" style="width: 9px;height: 9px;">beatae officia voluptas a.</p>
<p>Iste <img src="../images/sqpurple.gif" class="c" style="width: 9px;height: 9px;">consectetur minima eos quod.</p>
<p>Aliquam <img src="../images/sqpurple.gif" class="d" style="width: 9px;height: 9px;">culpa inventore eum repellendus.</p>
<p>Hic <img src="../images/sqpurple.gif" class="e" style="width: 9px;height: 9px;">dolores dicta ab suscipit.</p>

<script>
</script>
</body>

* <p style="text-align:justify; width:200">자동 줄바꿈시 오른쪽 경계선 부분이 정리됩니다.

링크태그

텍스트간의 간격

<style>
   /* 
   a{}
   a:hover{}         :의사클래스
   */
   
   /* 링크태그 4가지 상태  (주의: 순서 지켜서 코딩.)  */
   a:link{     /* 방문지 않은 상태의 링크 */
     color:black;
     text-decoration: none;
   }
   a:visited{   /* 방문한 상태의  링크 */
      color:green;
   }
   a:hover{   /* 마우스 링크에 올린 상태 */
      color:hotpink;
      /* text-decoration: underline overline line-through; */
      
      /* text-transform: uppercase;  대문자 변환*/
      /* text-transform: lowercase;  소문자 변환*/      
      text-transform: capitalize;  /*  각 단어의 첫 글자를 대문자로 변환 */
   }
   a:active{     /* 링크를 클리하는 순간의 상태 */
   }
</style>

<body>
<h3>ex11_02.html - css 텍스트 장식 : text-decoration </h3>
<h3>ex11_02.html - css 텍스트 변환 :text-transform </h3>

<!-- a[href=#]*3>lorem1 -->
<a href="#">lorem.</a><br>
<a href="#">itaque.</a><br>
<a href="#">illo.</a><br>

<h3  style="letter-spacing: 10px">텍스트 간의 간격</h3>
<pre>
  1. text-indent 속성  : 첫 번째 라인에 들여쓰기
  2. letter-spacing 속성 : 문자와 문자 사이의 간격
  3. line-height 속성      : 라인과 라인 사이의 간격
  4. word-spacing 속성  : 단어와 단어 사이의 간격
  5. white-spacing (공백)속성           - ex11_03.html
  6. word-break 속성               - ex11_04.html
  7. word-wrap 속성
</pre>
<!-- p*3>lorem7 -->
<p style="text-indent: 50px;line-height: 0.5">
Lorem ipsum dolor sit amet, consectetur 
adipisicing elit. Consectetur odio dolores quidem ullam accusamus
 cum ab temporibus assumenda fugiat adipisci. Quos consectetur 
 molestias dignissimos officiis exercitationem recusandae temporibus 
 ratione aperiam.
 </p>
<p style="word-spacing: 10px">Tenetur commodi quam doloribus maiores beatae animi!</p>
<p>Ab culpa provident aut voluptatibus debitis fugit.</p>

<script>
</script>
</body>

5. white-spacing (공백)속성

    p{
       border: 1px solid gray;
       width:500px;
       margin: 0 auto;   /* 가운데 정렬 */
       
       /* white-space 속성 : 요소 내부의 공백을 처리하는 방법을 지정하는 속성 */
       /* nowrap 값:  요소 내부의 텍스트 줄 바꿈을 자동 개행 하지말라( 비활성화 )*/
       white-space:nowrap;
    }

6. word-break 속성

7. word-wrap 속성

   p{
       border: 1px solid gray;
       width:200px;
       
      
        /* 긴 단어를 끊고 다음 라인으로 줄바꿈 */
        word-wrap:break-word;   
                 
        /* 라인 끝에 도달할 때 단어가 끊어지는 방식 지정 */
        word-break:break-all; 
    }

텍스트 그림자

  h1{
    /* 텍스트에 그림자를 추가하는 속성 */
                   /* 가로x위치  세로y위치 */
    /* text-shadow: 2px 2px; */
    
    /* 그림자 색상 */
    /* text-shadow: 2px 2px red; */
    
     /* 그림자에 흐림 효과(5px) */
    /* text-shadow: 2px 2px  5px red; */
    
    
    text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
  }

글꼴

1. css 글꼴(font)은 웹사이트에 적합한 글꼴을 선택하는 것이 중요하다.

2. 읽기 쉬운 글꼴, 색상, 크기 선택 중요..

3. 웹 안전 글꼴 - 모든 브라우저/장치에서 보편적으로 설치되어 있는 글꼴.

   p{
      /* font:  약식 속성 */
      
     font-family: Arial, "Verdana", "Times New Roman";

      */
     font-size: 2.5em;   /* 16px * 2.5 == 35px */
     
     font-weight: bold;
     
     font-style: italic;     /* <i></i> */
     font-variant: small-caps;    /*  모든 소문자들을  작은 대문자 변환*/
     
               /* sytle  variant weight size family */
     /* font:italic small-caps bold 2.5em Arial, "Verdana", "Times New Roman"; */
  }

- 텍스트의 크기 , 절대와 상대 크기(주변 요소 기준, 사용자 브라우저에서 텍스트 크기 변경.)
- 브라우저 메뉴에서 텍스트 크기를 조정할 수 있도록 하기 위해서 개발자가 픽셀 단위 대신에 em 단위를 사용한다.

- 브라우저의 기본 텍스트 크기는 16px 이다.
- 16px == 1em

1. html에서 표준 글꼴을 사용하지 않으려면 "구글 글꼴""을 사용할 수도 있다.

2. 구글 글꼴 - 무료, 1000개 이상 글꼴

<!-- 여러 글꼴을 구글 요청하면 웹 페이지 속도는 떨어진다. -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">

<style>
   body{
       font-family: "Sofia", sans-serif;
   }
</style>

아이콘 추가.

1. 가장 간단한 방법 아이콘 사용. - font awesome 아이콘 라이브러리 사용.

fontawesome.com ( 폰트어썸.컴)

가입 + 무료로 코드 받아서...

메뉴얼 참조.

<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>

2. 구글 아이콘

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

3. 부트 스트랩 아이콘

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- i[class]*5 -->
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"  style="font-size: 36px; color:red"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

<i class="fas fa-clock"></i>
<i class="far fa-clock"></i>

<hr>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

<hr>
<span class="glyphicon glyphicon-cloud"></span>
<span class="glyphicon glyphicon-remove"></span>
<span class="glyphicon glyphicon-user"></span>
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-thumbs-up"></span>

css 링크 태그 꾸미기

<style>
   a:link, a:visited{
       border: 2px solid green;
       text-decoration: none;
       
       color:black;
       background-color: white;
       padding: 10px 20px; /*   t/b  l/r */
   }
   a:hover, a:active{
      background-color: red;
      color:white;
   }
</style>

<a href="#" target="_blank">This is a link</a>

<style>

 body{
    margin: 0;
    padding: 0;
 }
 
 .icon-bar{
   background-color: #555;
   width:90px;
   
   /* 
   position: relative;
   left:-80px;
    */
 }
 
 /* a 인라인모드 */
 .icon-bar a{
   display: block;   /*  width는 부모의 100% */
   text-align: center;
   color:white;
   font-size: 36px;
   padding: 16px;
 }

.icon-bar a:hover{
  background-color: #000;
}

.icon-bar a.active{
  background-color: #4caf50;
}

</style>

<div class="icon-bar">
	<a href="#" class="active"><i class="fa fa-home"></i></a>
	<a href="#"><i class="fa fa-search"></i></a>
	<a href="#"><i class="fa fa-envelope"></i></a>
	<a href="#"><i class="fa fa-globe"></i></a>
	<a href="#"><i class="fa fa-trash"></i></a>
</div>

<style>
  body{
     margin: 0;
     padding: 0;
  }
  .topnav{
    background-color: #333;
    overflow: auto;  /* hidden */
  }
  .topnav a{
    color: #f2f2f2;
    text-decoration: none;
    
    padding: 14px 16px;
    text-align: center;
    
    float: left;
  }
  .topnav a:hover{
     color:black;
     background-color: #ddd;
  }
  
  .topnav a.active{
    background-color: #4caf50;
    color:white;
  }
  
</style>

<body>
<!-- ex14_03.html -->
<!-- .topnav>a[href=#]*4^div>h2#tne+p>lorem5 -->
<div class="topnav">
	<a href="#" class="active">Home</a>
	<a href="#">News</a>
	<a href="#">Contact</a>
	<a href="#">About</a>
</div>
<div>
	<h2 id="tne">Top Navigation Example</h2>
	<p onclick="p_click();">Lorem ipsum dolor sit amet.</p>
</div>

클릭처리

<script>
   // 클릭 이벤트 처리 1 번째 방법 :   <p   on이벤트명="js 함수호출부분();">
   function p_click(){
	   alert("p_click~");
   }
   
   // 클릭 이벤트 처리 2 번째 방법 : 
   var h2element =  document.getElementById("tne");
   //   요소.등록할이벤트 = 익명 함수 선언
   h2element.onclick = function (){
	   alert("h2_click~");
   }
</script>

클릭할때마다 active 속성 추가 및 제거 (js)

<script>
   // 메뉴(a)를 클릭할 때  News 메뉴 클릭 + .active 클래스 속성을 추가
   //                              .active 클래스 속성를 가지고 있던 메뉴는  클래스 속성 제거
   
   // 1. 모든 a 태그를 가져와서 
   /*
   var allA = document.getElementsByTagName("a");
   alert( allA.length );
   */
   
   // document.querySelector(selectors);  1개 요소 반환
   var alist = document.querySelectorAll("div.topnav a");  // NodeList 
   // alert( alist.length );
   
   // 2.  클릭 이벤트 등록...
   for (var i = 0; i < alist.length; i++) {
	 alist[i].onclick = function (){
		   // alert("클릭~~~");
		   // 3.   class="active"  제거,   추가
		   
		   // ㄱ.  active 클래스 속성을 가지고 있던 a 태그는 - > 제거 
		   //    변수 저장 X
		   for (var i = 0; i < alist.length; i++) {
			   alist[i].classList.remove("active");
		   }// for
		   
		   // ㄴ. this : 클릭된 a 태그  +  클래스 속성 추가./ 제거
		   this.classList.add("active");
	   } // 
  } // for
</script>
</body>

클릭할때마다 active 속성 추가 및 제거 (jquery)

<script>
   // jquery 내일 수정.
   // jquery selector
   // jquery method : removeClass(), addClass()
   // this -> $(this)  jquery object 만들어야지
   $("div.topnav a").click(  function (){
	   $("div.topnav a").removeClass("active");
	   $(this).addClass("active");
   } );
</script>

저작자표시

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

[Day4] CSS 4 - overflow, 팝업폼, display, prev\|next, 레이아웃배치(수직수평), css결합자, 의사클래스, 의사요소, 불투명, 탐색모듬, 드롭다운 (0)	2022.11.16
[Day3] CSS 3 - 속성값 설정, button, paging처리, display, 목록,테이블, position, z-index (0)	2022.11.15
[Day1] CSS 1 - 개요, 스타일 적용 방법 (0)	2022.11.10
[Day6] HTML 6 - div 페이지, 반응형웹, form, canvas,svg, 멀티미디어, youtube (0)	2022.11.10
[Day5] HTML 5 - 홈메뉴, button, div float, media, iframe, head tag, 반응형 웹, 이모티콘, 시맨틱 태그, 규칙, form, select, option, get, post (0)	2022.11.08

[Day2] CSS 2 - selector, 색상, 테두리, margin, padding(border-box), width/height, box model, 링크, 텍스트, 아이콘, 글꼴, active처리

[Day2] CSS 2 [11/10]

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

전체 카테고리

블로그 인기글

티스토리툴바

[Day2] CSS 2 [11/10]

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

전체 카테고리

최근 글

최근댓글

블로그 인기글

티스토리툴바