[ CSS관련 Tip ]
: 개인 백업용 반응형 제작을 위해 기억하고 있어야할 CSS Tip들을 기록한다.
1) < block 요소 / inline 요소 / inline-block 요소 >
- block 요소 특징)
1) 자동 줄개행이 된다. (float나 flex를 이용하지 않는한 자동 개행된다.)
2) width와 height를 지정하지 않으면 부모의 width와 height를 100% 채운다.
3) 자식으로 inline요소와 block요소를 모두 가질 수 있다.
- inline 요소의 특징)
1) 줄개행이 되지 않는다. 옆으로 쭉 붙어 올 수 있다.
2) width와 height를 지정할 수 없다. inline요소의 크기는 content의 크기가 된다.
3) 자식요소로 inline요소는 포함할 수 있지만 block요소는 포함할 수 없다.
- inline block 요소의 특징)
1) block요소와 inline요소의 특징을 모두 갖는다.
-> block요소처럼 width와 height를 지정할 수 있다.
-> 그러면서도 inline요소처럼 자동개행되지 않고 옆으로 붙어 올 수 있으며
-> inline요소의 특징도 갖기 때문에 text-align을 통한 inline요소 정렬도 할 수 있다.
각 요소 전환 방법)
- display:block // block 요소로...
- display:inline // inline 요소로...
- display:inline-block // inline block 요소로...
2. < 요소들을 정렬하는 다양한 방법 >
- 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;
3. < 배경 이미지 관련 속성 정리 >
- background-color : rgba(255,255,255,0.5) // 맨 마지막 값은 alpha(투명도...) #555 처럼 지정할 수도 있음... 투명도 지정하려면 rgba로해야함..
- background-image : url(이미지 경로); // 이미지 배경 지정
- 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
4. < 그림자 효과 >
- box-shadow : +-(가로방향)px +-(세로방향)px (번짐정도)px #666(그림자색상) // block요소 그림자 효과
- text-shadw : 동일 // 텍스트 그림자 효과
5. < 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;
}
6. < 컨텐츠 넘침 처리... >
CSS로 제어하다보면 컨텐츠가 영역을 넘어갈 경우 어떻게 처리해야 될지 결정지어야 할 경우가 있다.
이때, 1. 보이게 할지 2. 안보이게 할지 3. 스크롤이 생기게 할지 등을 지정할 수 있다.
- overflow: visible // 영역을 넘어도 무조건 보이게 한다.
- overflow: hidden // 넘어가는 영역은 짤라서 안보이게 한다.
-> overflow:hidden의 경우는 이런 용도 말고도 float처리를 위해 사용되기도 한다. 다음 7번에서 설명...
- overflow: scroll // 넘어가지 않아도 처음부터 무조건 스크롤이 생겨있게 됨
- overflow: auto // 넘어가지 않으면 스크롤이 안생기고 넘어갈 경우만 스크롤이 생기게 됨.
7. < float 속성에 관하여... >
최근에는 flex를 이용해서 자식 컨테이너들을 배치할 수 있어 float의 사용을 최소화할 수 있지만 그래도 사용해야 하는 경우가 더러 존재한다.
float는 block요소를 가로로 이어 붙일 수 있도록 해주는 방법을 제공하는데
한번 적용한 float의 속성을 해제하기 위해서는 clear:both같은 방법으로 해제하곤 했다. 아니면 전후 처리자 :after 등을 이용하기도 하는데
이는 많은 문제가 발생할 수 있어 권장되지 않는다.
따라서!! 결론)
float가 지정된 자식들을 포함하는 부모에 overflow:hidden 속성을 주면 된다.!
* 참고)
-> 반응형 제작을 위해서는 자식들에 float 속성을 지정시 해당 부모 안에 있는 모든 자식요소에 float속성을 줘야
미디어 쿼리로 제작시 틀어짐 없이 반응형을 제작할 수 있게됨을 알아야 한다.
8. < 우리가 간과하고 사용하기 쉬운 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로 지정한 크기 내에서 사이즈를 자동으로 조절해서 크기를 맞춰주게 된다.
9. < 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축으로 이동)
10. < 박스들이 복잡하게 margin값을 갖는것처럼 구성될 때 >
이때 상자들 사이에 margin이 있는 그림처럼보이더라도 margin으로 상자들 사이를 띄워서 구성하면 안된다.
why? -> 반응형 제작시 죄다 틀어져 버릴테니까... 따라서 상자들의 padding값과 box-sizing:border-box를 이용해서 박스들의 배치를 구성지어야 한다.
(먼가 자세히 그림넣어 설명하기가 귀찮다... 나만을 위한 백업 용도니까... 대충써야지..)
11. < CSS 선택자에서 nth-of-child를 사용하는 대신 nth-of-type(n)을 사용하자! >
12. < semantic Tag로 사용할 수 있는 영역은 semantic Tag로 구성하자... >
- <header>헤더 영역</header>
- <nav>네비게이션 메뉴 영역</nav>
- <figure>멀티미디어 요소들이 오는 영역(중앙광고등...)</figure>
- <section>
<article>세부 영역</article>
<article>세부 영역2</article>
</section>
- <footer><address>주소영역</address>푸터</footer>
- <aside>오른쪽 사이드 광고 등처럼 부수적인 영역</aside>
13. 제일 중요!! < 자식의 높이가 결정되면 부모의 높이값을 반드시 지워주자! >
-> 자식요소의 높이값이 지정된 상태에서 부모의 높이값을 해제하면 자식들이 차지하는 영역만큼 부모의 크기가 자동으로 지정된다.
-> 이처럼 자식의 높이가 결정되면 반드시 부모의 높이값을 지워주어야 반응형을 제작할 때 쉽게 반응형으로 제작이 가능하다.
(정말... 어떻게 강조를 해야할지 모를 정도로 중요하다...)
14. < 반응형 제작 Tip >
: 위의 자식높이가 결정되면 부모의 높이값을 지워주는 것, layout으로 배치된 컨테이너 내에서 position:absolute로 배치를 했다면
-> 실제 반응형으로 웹페이지를 태블릿, 모바일용으로 제작하는 것은 5분도 걸리지 않고 제작할 수 있다.
- 반응형 제작시 기억해야할 유의사항)
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처럼 고쳐주어야 한다.!(매우 매우 중요)
15. < CSS의 state >
- hover : 마우스를 요소 위로 가져갔을 때
- active : 요소를 클릭했을 때
- focus : input 상자나 textarea등을 클릭했을 때
- visited : 주로 a태그에서 한번 눌른적이 있는 경우
div:active{
background-color:blue;
}
