[HTML & CSS] class와 id / 상·하위 엘리먼트 크기 / border-radius

[class와 id]

• 태그에 이름(별칭)에 지어 선택자로 활용할 수 있다.

 

[class와 id의 차이점]

• 1. class는 같은 이름을 사용할 수 있다.
• 2. html에서 class 작성은 class=""와 같이, css에서는 .을 붙혀 선택자 속성을 작성한다.
• 3. id는 같은 이름을 여러번 사용할 수 없다.
• 4. html에서 id 작성은 id=""와 같이, css에서는 #을 붙혀 선택자 속성을 작성한다.

 

[이름(별칭) 지을 때 주의사항]

• 영문부터 시작해야한다.
• 숫자만 사용할 수 없다.
• 누구나 구분질 수 있도록 간단하고 직시적인 이름을 짓는게 좋다.

 

[이름 짓기 예시]

• 두 단어 이상일 때 -을 쓴다. (best-item)
• 뒷 단어에 대문자 활용이 가능하다. (best-Item)
• "~안에 있는 ~"로 표현 가능하다. (best-item_test-box)
• 띄어쓰기는 사용하지 않는다.

 

https://cdpn.io/pen/debug/GRdKRrd/02f1b3007cfdfb009565d1d1383f9ea0

CodePen - Class와 ID

 

 

[class 선택자 그룹]

• 젠코딩을 이용하여 태그와 해당 태그의 클래스까지 자동완성하는 방법이다.

 

예시) div.text-${텍스트$}*6 를 작성하고 탭을 누르게 되면

         <div class="text-1">텍스트1</div>
         <div class="text-2 red">텍스트2</div>
         <div class="text-3">텍스트3</div>
         <div class="text-4 red">텍스트4</div>
         <div class="text-5">텍스트5</div>
         <div class="text-6 red">텍스트6</div> 와 같이 자동생성된다.

 

• 예시에서 텍스트2, 텍스트4, 텍스트6에만 color 속성을 적용하고 싶다면 css에서 .text-2 / .text-4 / .text-6 와 같이 선택자를 하나씩 선택해서 속성을 줘도 되지만, 코드가 길어진다.
• 선택자를 그룹짓는 새로운 선택자를 추가하여 html에 적용하면 된다.
• css에서 그룹 선택자를 .red { color: red; } 로 작성하고 html에서 원하는 태그에 추가하면된다.
• 이 때 기존에 쓰여진 text-1 속성과 구분이 되도록 class=" "안에 띄어쓰기를 하여 작성한다.

See the Pen class 선택자 그룹 by psm817 (@psm817) on CodePen.

 

 

[상위엘리먼트와 하위엘리먼트의 크기]

• width, height를 적용하지 않을 때 눈으로 확인할 수 없는 이유는 모든 태그는 height의 기본값(auto)이 0이기 때문이다.
• width, height를 적용했을 때 눈으로 확인할 수 없는 이유는 텍스트가 없거나, 배경 색상 등의 속성을 적용하지 않았기 때문이다. 또는 태그의 display 속성이 inline일 경우이다.
• div가 width를 100%로 상속받는 이유는 div태그는 display 속성값이 block이기 때문이다.
• block은 width가 기본값(auto)일 때 100%으로 동작한다.
• width: auto = 100%일 때는 상위엘리먼트 너비를 100% 상속받겠다는 뜻이다. (100%라는 수치는 반응형 값은 아니다.)
• 상위엘리먼트의 width가 500px이고 하위엘리먼트는 상위엘리먼트의 width를 100% 상속받기 때문에 width가 500px이다. (하위엘리먼트의 width 값을 따로 주지 않았을 경우)
• 상위엘리먼트는 하위엘리먼트보다 밑에 배치되고, 하위엘리먼트는 상위엘리먼트보다 위에 배치된다.
• 상, 하위엘리먼트는 서로 겹치게 보인다.
• 하위엘리먼트의 width가 상위엘리먼트보다 작다면 상위엘리먼트의 좌측 상단부터 배치가 시작된다.

See the Pen 상위엘리먼트와 하위엘리먼트 크기(부모엘리먼트>자식엘리먼트) by psm817 (@psm817) on CodePen.

 

 

[모서리 둥글게 만들기]

• border-radius는 모서리를 둥글게 만들어주는 속성이다.
• px값이 클수록 모서리가 더 많이 둥글어진다.
• 4개의 방향을 동시에 같은 100px값으로 적용하는 코드는 border-radius: 100px;
• border-radius는 4개의 방향이 서로 다른 px값을 가지도록 작성할 수도 있다.
• 4방향이 서로 다른 px값을 가지도록 적용하는 코드는 border-radius: 100px 200px 300px 400px; 이다.
• 4방향의 순서는 좌측상단, 우측상단, 우측하단, 좌측하단이다. (시계방향)
• border-radius: 좌측상단 우측상단 우측하단 좌측하단; 과 같이 작성하면 된다.
• 상, 하위엘리먼트의 관계를 이루어 봤을 때 하위엘리먼트는 항상 상위엘리먼트 위에 배치되기 때문에 상위엘리먼트는 전체 구조를 잡아주는 역할을 하고 하위엘리먼트로 실질적인 커스텀을 한다고 생각하면 된다.

See the Pen 모서리 둥글게 (border-radius) by psm817 (@psm817) on CodePen.

 

 

[복습]

See the Pen 4일차 복습 by psm817 (@psm817) on CodePen.