[CSS] CSS관련 Tip 정리

 

 

 

< block 요소 / inline 요소 / inline-block 요소 >

block 요소 특징

• 자동 줄개행이 된다. (수직정렬) (float나 flex를 이용하지 않는한 자동 개행된다.)
• width를 지정하지 않아도 부모의 width 100% 채운다. (block요소에 width100%는 바보같은 짓)
• block 태그 안에는 inline요소와 block요소를 모두 가질 수 있다.

inline 요소의 특징

• 줄개행이 되지 않는다. 옆으로 쭉 붙어 올 수 있다. (수평정렬)
• width와 height를 지정할 수 없다. inline요소의 크기는 글자의 크기가 된다.
• inline 태그 안에는 inline요소는 포함할 수 있지만 block요소는 포함할 수 없다.

inline block 요소의 특징

• block요소와 inline요소의 특징을 모두 갖는다.
• block요소처럼 width와 height를 지정할 수 있다.
• 그러면서도 inline요소처럼 수직정렬되지 않고 옆으로 붙어 올 수 있으며 (수평정렬)
• inline요소의 특징도 갖기 때문에 text-align을 통한 inline요소 정렬도 할 수 있다.

 

 

< 요소들을 정렬하는 다양한 방법 >

inline 요소내에서 정렬하는 방법

• 수평정렬 방법) text-align: center | right | left | justify(양쪽정렬)
• 수직정렬 방법) vertical-align: middle | right | left ..
• block 요소를 정렬하는 방법)
• 수평정렬 방법) margin : 0px(위,아래여백) auto
• 수직정렬 방법) line-height: (block요소의 height값) px
• position:absolute로 배치되어 있는 block요소를 정렬하는 방법)

수평, 수직 정렬 방법

• top:50%;
• left:50%;
• margin-left : -(block요소의 넓이/2)px;
• margin-top: -(block요소의 높이/2)px;

 

 

< 배경 이미지 관련 속성 정리 >

background-color : rgba(255,255,255,0.5) 

• 맨 마지막 값은 alpha(투명도...) #HEX로 지정할 수도 있다. 투명도지정은 rgba로 해야한다.

background-repeat :

• no-repeat(default) | repeat-x(x축으로반복) | repeat-y(y축으로반복) | repeat(x,y축으로 반복)

 

background-position :

• center(가로) center(세로)
• : 10px 10px
• : 50% 50%

background-size :

• cover(가득채우기) | contain(가득채우되 이미지 비율을 유지하며 가득채우기)

background-attachment :

• fixed | scroll(default) fixed로 지정시 스크롤시에도 이미지가 해당 위치에 그대로 유지된다. (이미지 스킨만 바끼는 듯한 효과줄 때 유용하다.)
• 축약형) background: #666 url(...) no-repeat center center

 

 

< 그림자 효과 >

box-shadow :

• +-(가로방향)px +-(세로방향)px (번짐정도)px #666(그림자색상) // block요소 그림자 효과

 

text-shadw :

• 동일 // 텍스트 그림자 효과

 

 

< Full Screen 제작 하기 >

• 영역을 풀스크린으로 잡을 때 block요소의 width는 아무때나 %로 줄 수 있지만, height값은 자식요소가 없을 경우 %로 지정할 수가 없다.
• 따라서, width, height 모두 풀스크린으로 100%를 주기 위해서는 position:fixed로 지정해 주어야 한다.
• 그렇게 가장 바깥 block요소를 fixed로 지정시 그곳에 붙는 모든 자식요소는 이후부터 width, height모두 %로 크기를 지정할 수 있다.

ex)
.outerArea{
position:fixed;
width:100%;
height:100%;
background : url(...) no-repeat center center;
background-size: cover;
}

 

 

 

 < 컨텐츠 넘침 처리 >

CSS로 제어하다보면 컨텐츠가 영역을 넘어갈 경우 어떻게 처리해야 될지 결정지어야 할 경우가 있다.

이때, 1. 보이게 할지 2. 안보이게 할지 3. 스크롤이 생기게 할지 등을 지정할 수 있다.

• overflow: visible // 영역을 넘어도 무조건 보이게 한다.
• overflow: hidden // 넘어가는 영역은 짤라서 안보이게 한다.
• overflow:hidden의 경우는 이런 용도 말고도 float처리를 위해 사용되기도 한다. 다음 7번에서 설명...
• overflow: scroll // 넘어가지 않아도 처음부터 무조건 스크롤이 생겨있게 됨
• overflow: auto // 넘어가지 않으면 스크롤이 안생기고 넘어갈 경우만 스크롤이 생기게 됨.

 

 

 

< float 속성에 관하여 >

최근에는 flex를 이용해서 자식 컨테이너들을 배치할 수 있어 float의 사용을 최소화할 수 있지만

예전에만들어진 웹사이트에서는 float를 많이사용하고 있다. 유지보수를 해야한다면 사용해야 하는 경우가 존재한다.

float는 block요소를 가로로 이어 붙일 수 있도록 해주는 방법을 제공하는데

한번 적용한 float의 속성을 해제하기 위해서는 clear:both같은 방법으로 해제하곤 했다. 아니면 전후 처리자 :after 등을 이용하기도 하는데 이는 많은 문제가 발생할 수 있어 권장되지 않는다.

 

float가 지정된 자식들을 포함하는 부모에 overflow:hidden 속성을 주면 된다.
* 참고)
-> 반응형 제작을 위해서는 자식들에 float 속성을 지정시 해당 부모 안에 있는 모든 자식요소에 float속성을 줘야
    미디어 쿼리로 제작시 틀어짐 없이 반응형을 제작할 수 있게됨을 알아야 한다.

 

 

 

< padding은 box-sizing:border-size 를 반드시 넣어줘야한다. >

block요소의 박스모델에 관해 이야기할 때 이 박스란 녀석들은

margin(외부여백), border(선두께), padding(내부여백), 컨텐츠 로 구성된다고 알고 있을 것이다.

따라서 우리가 block요소의 넓이, 높이를 생각할 때 그 넓이 = margin + border + content 가 된다.

이때, 우리가 해당 요소에 width, height를 지정한 상태에서 padding값을 지정하면 어떻게 될까?

-> 기존 width, height에 해당 padding값이 더해지게 된다. 난 다 더해서 100px width를 의도햇는데

10px 내부 여백을 줌으로써 전체 크기가 120px이 되어 버린다는 점이다.

 

-> 그럼 이럴땐 어떻게 해결해야할까? 다시 100px의 크기가 되려면?

1) padding으로 지정할만큼 width값을 빼주면 된다. -> 하지만... 귀찮다.(비추천)

2) box-sizing:border-box를 이용하자. 이것을 이용하면 width와 height로 지정한 크기 내에서

사이즈를 자동으로 조절해서 크기를 맞춰주게 된다.

보통 글로벌스타일에 속성값을 넣어두면 편리하다.

 

 

< position에 관하여 >

최근에는 반응형으로 제작시 외부 layout에 영향을 주는 container들을 제외하고

그 각 container안에 들어가는 요소들은 position:absolute를 통해 배치하는 것이 효율이 좋은데

이때 알아야 하는 position 속성에 관해 설명한다.

 

position : fixed

• scroll을 해도 화면 특정 위치에 계속 보이도록 배치할 때 사용한다.

ex) aside영역에 뜨는 광고, 메뉴 nav 등...

top : ()px

left : ()px ...

 

position : absolute

• position:relative가 지정된 부모를 기준으로 절대좌표로 대상을 배치한다.(정말 많이 쓰인다...)
• 만약, position:relative가 지정된 부모가 없을시 최상단 body까지 찾아가 body를 기준으로 배치하게 된다.

position : relative

2가지 부분에서 사용이 되는데

1) position:absolute의 기준점이 된다.
2) 레이아웃에 영향을 주지 않으면서 일부 움직이고 싶을 때 사용된다.

 

-> 만약 레이아웃에 영향을 주지 않으면서 살짝 다른 영역을 침범하게 구성하고 싶다면?

position:relative; top:-20px; 이런식으로 주면 주변 영역에 영향을 주지 않고 구성할 수 있다.

만약, CSS3의 transform을 사용해서도 할 수 있는데 -> transform:translateY(-20px)으로 할 수 있다.

(현재 기준점에서 Y축으로 이동)

 

 

 

 

< 박스들이 복잡하게 margin값을 갖는 것처럼 구성될 때 >

이때 상자들 사이에 margin이 있는 그림처럼보이더라도 margin으로 상자들 사이를 띄워서 구성하면 안된다.

why? -> 반응형 제작시 죄다 틀어져 버릴테니까...

따라서 상자들의 padding값과 box-sizing:border-box를 이용해서 박스들의 배치를 구성지어야 한다.

 

 

 

 

< nth-child와 nth-of-type의 차이점? >

nth-child는 부모태그 안에 모든 태그의 순서를 카운팅.

(ex:

1)<p>

2)<p>

3)<p>

4)<p>

nth-of-type은 부모태그 안에 있는 같은태그만 카운팅.

1)<p>

2)<span>

3)<div>

2)<p>

 

 

 

 

 < semantic Tag로 사용할 수 있는 영역은 semantic Tag로 구성하자>

- <header>헤더 영역</header>

- <nav>네비게이션 메뉴 영역</nav>

- <figure>멀티미디어 요소들이 오는 영역(중앙광고등...)</figure>

- <section>

<article>세부 영역</article>

<article>세부 영역2</article>

   </section>

- <footer><address>주소영역</address>푸터</footer>

- <aside>오른쪽 사이드 광고 등처럼 부수적인 영역</aside>

 

 

 

 

제일 중요!! < 자식의 높이가 결정되면 부모의 높이값을 반드시 지워주자! >

자식요소의 높이 값이 지정된 상태에서 부모의 높이 값을 해제하면

자식들이 차지하는 영역만큼 부모의 크기가 자동으로 지정된다.

이처럼 자식의 높이가 결정되면 반드시 부모의 높이값을 지워주어야 반응형을 제작할 때 쉽게 반응형으로

제작이 가능하다. (정말... 어떻게 강조를 해야할지 모를 정도로 중요하다...)

 

 

 

 

< 반응형 제작 Tip >

위의 자식높이가 결정되면 부모의 높이값을 지워주는 것,

layout으로 배치된 컨테이너 내에서 position:absolute로 배치를 했다면

-> 실제 반응형으로 웹페이지를 태블릿, 모바일용으로 제작하는 것은 쉽게 제작할 수 있다.

 

- 반응형 제작시 기억해야할 유의사항)

1. 가로 넓이는 고정 px이면 안되고 요소들의 넓이를 다 합쳤을 때 100%가 되어야 함

(margin포함 넓이에 영향주는 모든 요소)

2. 높이와 폰트는 고정 px이어야 한다.

3. 세로 높이는 반응형 제작시 줄일 수 있으면 줄여주자.

- 태블릿 반응형 제작 방법)

1. 웹에서 적용한 CSS코드를 그대로 붙인다.

2. 바로 위의 반응형 제작시 유의사항을 지키면서 컨테이너들의 넓이값을 고쳐나간다.(100%되도록...)

3. 바꾸지 않는 부분들은 삭제한다.(소거법)

4. 필요시 css 코드를 추가해도 된다.

5. 줄일 수 있으면 높이는 줄여준다.

 

- 모바일 반응형 제작 방법)

1. 태블릿에 적용한 CSS코드를 그대로 모바일 미디어 쿼리에 붙여준다.

2. 유의사항에 맞게 고쳐주되!! 중요한 점은 절대 바꾸지 않는 부분들도 삭제하면 안된다.!!

-> 태블릿 코드는 삭제시 웹코드가 적용되서 괜찮았지만, 모바일은 공통 부분을 삭제시 태블릿 코드가 적용되는게 아니라 웹코드가 적용되니까

     만은 차이가 발생하게 된다.

-> 한 컨테이너가 한칸을 차지하기 위해 width:100%로 지정하여 기존 margin-right값들이 필요없게 되었더라도 이를 삭제하면 안되고

    margin-right:0%; 나 margin-right:0px처럼 고쳐주어야 한다.!(매우 매우 중요)

 

 

 

 

< CSS의 state >

- hover : 마우스를 요소 위로 가져갔을 때

- active : 요소를 클릭했을 때

- focus : input 상자나 textarea등을 클릭했을 때

- visited : 주로 a태그에서 한번 눌른적이 있는 경우

div:active{

 background-color:blue;

}