'publishing/css'에 해당되는 글 3건

  1. 2017.02.25 cascading, position, z-index,
  2. 2017.02.24 css, float . 스프라이드기법, multiple background, vendor prefix css0120
  3. 2017.02.24 css, class, id, boxmodel, margin, padding, background, gradation

cascading, position, z-index,

publishing/css
2017. 2. 25. 23:22
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

케스캐이딩

3가지규칙  -저작자

           -명시도(1.id 2.클래스 3.p태그안의 a태그 4.a태그, !important(아주 강함)

           -우선순(같은조건에 마지막이 우선)






overflow_float


위드 오토는 부모만큼

헤이트 오토는 컨텐츠만큼


overflow: hidden(넘어가면 안보여줌 주어진영역만큼만 보여줌)

          visible(넘어가도 보여줌)







position

 -static: 기본

 -relative: 상대적(현재위치로부터.)(한번에 두값만 사용, 레프트탑. )

    left:50%는 브라우저 창의 50%이동,

    margin:0 auto;, left:50px;은 0 auto중간에서 50px이동

 -absolute: 절대적(네가지 값사용 가능)

    right:0; bottom:0;은 맨왼쪽 맨아래

    right:50px; 맨 왼쪽에서 50px 이동(float은 밀지만 absolute는 밀지않고 그냥 이동)

 -fixed: 고정적


position을 사용해야만 쓸수 있는 속성: top, right, bottom, left, z-index


<head>

  <meta charset="UTF-8">

  <title>Document</title>


  <style>

[class^="box"]{border:1px #f00 solid; position:absolute;}

.box1{background: #F00; left:0; right:50%; top:0; bottom:50%;}

.box2{background: #0F0; left:50%; right:0; top:0; bottom:50%;}

.box3{background: #00F; left:0; right:50%; top:50%; bottom:0;}

.box4{background: #000; left:50%; right:0; top:50%; bottom:0;}

  </style>

</head>


<body>


<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

<div class="box4"></div>


</body>


z-index 높낮이 결정.

z-index:1; z-index:2;  릴렉티브 앱솔루트 픽스드 다 가능


<cite></cite>

상품 제목같은경우에 쓰임. h1,h2쓰기에 맞지않을때


선택상자로 영역잡은후 포토샵 알트s t-> 개별로 조정가능

엔터치고 컨트롤 쉬프트 c-> 컨트롤 엔-> 컨트롤 v 

'publishing > css' 카테고리의 다른 글

css, float . 스프라이드기법, multiple background, vendor prefix css0120  (0) 2017.02.24
css, class, id, boxmodel, margin, padding, background, gradation  (0) 2017.02.24
,

css, float . 스프라이드기법, multiple background, vendor prefix css0120

publishing/css
2017. 2. 24. 23:40
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

background-attchment       //모바일에서는 작동하지않는다.

                                                  'local' 기본값

background-size: w h;        //호환성으로 인해서 벤더프리픽스를 해줘야한다.

                                              cover는 가로값을 기준으로 화면을 맞춤.

벤더프리픽스       //css3속성이 어떠한 브라우저에서 적용이 안될때... 사용

     -ms-              //익스플로러

     -webkit-        //크롬 사파리

     -moz-            //파이어폭스

     -opera-          //오페라




멀티백그라운드       //css3속성

                              한 요소에 여러 이미지를 한번에 불러올수 있다.

                              백그라운드 개수는 상관없다.

                              ,(콤마)로 구분해준다.




스프라이트 기법


     네이버 뉴스스탠드(개발자모드) - top my뉴스 - style #lnb background url() 우클릭 - open link in new tap - 이미지저장

     백그라운드 이미지를 활용, 버튼을 만든다.

     다수의 이미지를 같은 페이지에 생성, 활용

     이미지를 각개로 사용한다면 일일이 찾아서 바꿔야한다.

     유지보수에 용이

     리소스가 적게 사용된다

     이미지 변형에 용이

     이미지만 바꾸면 한번에 바뀐다.



1.float: 공중에 붕뜨다

2.float이 선언된 element는 컨텐츠가 피해간다.

3.float이 선언된 element는 먼저 작성된 element위로 뜰수없다.

'publishing > css' 카테고리의 다른 글

cascading, position, z-index,  (0) 2017.02.25
css, class, id, boxmodel, margin, padding, background, gradation  (0) 2017.02.24
,

css, class, id, boxmodel, margin, padding, background, gradation

publishing/css
2017. 2. 24. 23:36
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

html 구조와 설계(뼈대)

css 스타일 디자인(살)



선택자

캐스케이딩


박스모델

디스플레이

위치제어:float, 

         position


overflow

vertical-align

line-height



css 주석방식

/*주석*/


  <div style="border:1px #f00 solid; width:200px; height:200px;"></div>

              속성:값; 속성:값;


id=주민등록번호같은

class=직업군


width값을 넣지않으면 width:auto

auto는 나의 부모만큼.

현재 박스의 부모는 바디


#box{width:100%; height:100px; border:1px red solid; margin-left:200px;}

--> 100%+100px(스크롤생김)

#box{width:auto; height:100px; border:1px red solid; margin-left:200px;}

--> 100px+auto 



<style>

     .menu{width:400px; height:200px, border:1px #f00 solid;}

     .inner{border:1px f00 solid; width:auto; margin:10px;}

</style>


<body>


    <div class="menu">

       <div class="inner">메뉴리스트</div>

    </div>


</body>


menu에 넓이는 절대값이고 값이 바뀔때마다 inner넓이를 auto로 하면 inner의 넓이가 margin10px로 자동으로 맞춰짐 


=

height는 auto로 맞추면 컨텐츠만큼.(글씨를 넣거나하면 그만큼 늘어남)

height는 값을 주지않으면 오그라듬 (없음)

<head>

  <style>

    html{height:100%;}

    body{height:100%;}

    .box{border:1px #f00 solid; height:; height:100%;}

  </style>

</head>

<body>

   <div class="box"></div>

</body>


auto모르면

유지보수성이 덜어진다. 깨진다.


margin은 바깥여백. 위치이동X

margin:10px 20px 30px 40px; 시계방향으로 값이 들어감

      :10px 20px-->2진수.  10 20 10 20 시계방향으로.

      :10px 20px 30px-->마지막 left는 20px 

왼쪽에 여백주고싶을때 margin-left10px 또는 margin:0 0 0 10

패딩과 규칙이 똑같음.


.box{border:1px #f00 solid; width:600px; height:100px; margin:0 auto;}

width값 절대값600에 margin 0 auto 0 auto 알아서 가운데 정렬.(브라우저 줄일때 margin이 변함)


.box{border:1px #f00 solid; width:auto; height:100px; margin:10px;}

width값 오토에 margin 10px 가운데 정렬.(브라우저 줄일때 margin10은 안변하고 width값이 변함)


border

border:1px #f00 solid

border-width:1px; border-color:#f00; border-style: solid;

border-width:1px 2px 3px 4px; border-color:red blue green orange; border-style: solid dotted dashed groove;

선을 없애려면 width값 0을 주거나 선은있는데 안보이게 할때 color에 transparent로 투명.


border:1px #f00 solid; border-bottom:0;

밑에만 없앨때


padding은 auto개념 X

/*css3*/

border-radius:10px(사각모서리에 라운드)

호환성이 낮다. css3라



http://www.w3schools.com/css/css_border.asp

.은 class를

#은 id를 


max width 1024px; 1024이상으론 안커지고 이하로는 자유롭

min width 1024px; 1024부터는 크기 자유롭. 1024이하부턴 먹혀들어감

max height 200px; 텍스트에 맞춰늘어남. 최대200까지

min height 200px; 텍스트가 없어도 최소200. 그이상으로 늘어남


background

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

                    #ff 00 00

                 0~9 A~F 16*16=256 

255가 16진수로하면 ff


background-color:rgba(255,255,0,0.3);

                 a는 알파값  0.3 반투명--> css3에서밖에안됨

background-repeat:yes

                  no-repeat

                  repeat-x 가로로

                  repeat-y 세로로

background-position:50px 50px;

                     x    y   절대값,상대값,지정값이 들어갈수도있다.

                    가로로 세로로 이동

background-position:right-top

                    right-botoom

                    left-top

                    left-bottom

                    centercenter

background-position:right 10px bottom 10px;

                     오른쪽에서10 밑에서 10떨어짐


gradation 

http://www.colorzilla.com/gradient-editor/

'publishing > css' 카테고리의 다른 글

cascading, position, z-index,  (0) 2017.02.25
css, float . 스프라이드기법, multiple background, vendor prefix css0120  (0) 2017.02.24
,
< 1 >

티스토리툴바