[TIL #2-1 WECODE] 내가 몰랐던 CSS

210216 - WECODE #2

▶금일은 CodeKata 코딩훈련 2일차에 관련한 문제들을 풀어보았다.

▶나름 꼼꼼히 공부했다고 생각했던 CSS였지만, 내가 부족했던 부분이나 확장이 되는 개념들을 정리해 보았다.

text-decoration: underline vs border-bottom

• text-decoration: underline은 밑줄의 두께나 색깔 등, 완벽하게 커스터마이징 하기가 어렵다.
• 이럴 때는 border-bottom으로 내가 원하는 스타일로 밑줄이 가능하다
• css 문법으로 볼 때는 밑줄이 아니라 아래쪽 테두리이지만, 웹 사이트에서 밑줄 스타일은 대부분 border-bottom로 구현한다고 한다.

복수 태그에 동일한 클래스가 있을때 구분하려면

<p class="target">1</p>
<div class="target">2</div>
<span class="target">3</span>

.target{ } -> 1,2,3 모두 적용
div.target{ } -> 2만 적용

▶class나 id가 selector일때, 태그와 결합할 수 있다.

cascading 우선순위

style=" " > TagId > id > TagClass > class > tag

이미지를 삽입하는 코드는 두가지가 있다

<img src="" alt="">
<div class="picture">배경그림</div>

1) width, height 지정안하면

<style>
.picture{ background-image: url(); }
</style>

• 가로크기 : 전체화면 너비(block level element)
• 세로크기 : 자식태그나 태그 내부에 있는 내용의 세로크기(글자크기와 같다)
• 즉, 텍스트가 없다면 자동으로 가로세로가 0px*0px되어 picture 클래스는 사라진다

2)width, height 지정시

<style>
.picture{ background-image: url();
          width : 300px; 
          height : 300px;
         }
</style>

• 이미지를 담는 영역의 크기(300px*300px)만큼만 짤려서 보여진다.
• 배경이미지의 실제 크기는 원본크기 그대로! (변경되지 않는다)

3)배경 이미지 크기를 실제 picture 크기만큼 줄이려면

<style>
.picture{ background-image: url();
          width: 300px; 
          height: 300px;
          background-size: 100%;
        }
</style>

background-size: 100%;

display: none의 활용 예시

요소를 안보이게 하는 방법에는 display: none가 있다.

이를 활용한 예시로는 우리가 자주 사용하는 검색사이트에서 볼 수 있다.

1. display: none에서 검색창에 텍스트를 입력한 순간,
2. display: block 으로 변경해주어 관련 검색어 목록을 띄우는 용도로 활용이 된다.

margin & padding 인자 정리

<style>
p { margin : 20px; }
div { margin : 10px 20px 10px 20px; }
span { margin : 10px auto; }
</style>

• 1개 값일 때: 사방 모두 같은 margin
• 4개 값일 때: 위/오/아래/왼 margin
• 2개 값일 때: 첫 번째는 위/아래 margin, 두 번째는 왼/오 margin

div와 같이 block 요소일 때 width 값을 주면 더이상 늘어나지 않는다.

• 이 때 margin : auto로 설정해주면 가로 중앙에 오게 할 수 있다.
• margin : 00px auto;도 동일하다. 결국 좌우 auto가 중요!