coderbear's log

#float 속성 : 부유하는 대상을 만들기 위해 개발되었으나, 현대에 웹 페이지 레이아웃을 잡을 때 많이 사용

주요 키워드	설명
left	태그를 왼쪽으로 붙임
right	태그를 오른쪽으로 붙임

ex)

<!DOCTYPE html>
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>

</style>
</head>
<body>
<img src="bear.jpg"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
</body>
</html>

코드를 실행하면 이미지와 글이 분리된 결과 화면이 출력되는데,
img는 inline 형식의 태그이고 p는 block 형식의 태그이기 때문이다.

- img 태그에 float 속성 적용

ex) float after 예시

<!DOCTYPE html>
<html>
<head>
    <title>Coderbear's CSS Practice</title>
    <style>
        img {
            float: left;
        }
    </style>
</head>
<body>
    <img src="bear.jpg"/>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
</body>
</html>

ex) float after 예시

<!DOCTYPE html>
<html>
<head>
    <title>Coderbear's CSS Practice</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
            padding: 10px;
            float: left; // 오른쪽인 경우 right로 바꿔주면 된다
        }
    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
</body>
</html>

img 태그에 float 속성 적용 시 이미지와 글이 어우러진 형태로 출력된다.

//Tip : float을 사용할 때는 반드시 부모태그에 overflow 속성을 적용한다.

(대개는 overflow:hidden 사용)

이는 자식태그에서 float를 사용했을 때, 부모태그의 공간을 확보하기 위해서이다.

(block formatting context를 만들어 주는 것!)

# shadow : 태그에 그림자 부여

속성	설명
text-shadow	글자 그림자 부여
box-shadow	박스 그림자 부여

ex) text-shadow 예시

<!DOCTYPE html>
<html>
<head>
    <title>Coderbear's CSS Practice</title>
    <style>
        h1 {
            text-shadow: 5px 5px 5px black; // 오른쪽 아래 흐림도 색상
        }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor amet</h1>
</body>
</html>

ex) box-shadow 예시

<!DOCTYPE html>
<html>
<head>
    <title>Coderbear's CSS Practice</title>
    <style>
        div {
            border: 3px solid black;
            box-shadow: 10px 10px 30px black; // 오른쪽 아래 흐림도 색상
            text-shadow: 5px 5px 5px black; 
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>Lorem ipsum dolor amet</h1>
    </div>
</body>
</html>

- 흐림도와 색상 사이에 inset 키워드 넣으면 그림자가 태그 안쪽에 생성된다.

- 쉼표를 사용하여 여러 개의 그림자 속성을 적용할 수 있다.

ex) 중첩 그림자 예시

<!DOCTYPE html>
<html>
<head>
    <title>Coderbear's CSS Practice</title>
    <style>
        .box {
            border: 3px solid black;

            box-shadow: 10px 10px 10px black, 10px 10px 20px orange, 10px 10px 30px red; 
            text-shadow: 10px 10px 10px black, 10px 10px 20px orange, 10px 10px 30px red; 
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>Lorem ipsum dolor amet</h1>
    </div>
</body>
</html>

// Tip : CSS3 Generator 에 접속하면 box-shadow와 text-shadow 속성을 쉽게 생성할 수 있다.

# gradient : 2가지 이상의 색상 혼합하는 채색 기능

- Ultimate CSS Gradient Generator

ㄴ 해당 페이지의 왼쪽에서 원하는 형태의 gradient 생성 후,

오른쪽에 생성된 CSS 코드를 복사하여 사용하면 더 편리하다.

종류	문법
선형 그래디언트 (linear gradients)	background: linear-gradient(각도 또는 위치, 시작색, 종료색); ex) linear-gradient(to top, green, yellow);
원형 그래디언트 (radial gradients)	background: radial-gradient(위치, 모양, 시작색, 종료색);

ex) 선형 gradient 예시 - 브라우저별 벤더 프리픽스

<style>
    #gradient {
        background: red;
        background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
        background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
        background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
        background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, purple);
    }
</style>

# CSS cursor

<!DOCTYPE html>
<html>
<head>
    <style>
        .alias {
            cursor: alias; // 커서의 모양 직접 지정 가능
        }

        .all-scroll {
            cursor: all-scroll;
        }

        .auto {
            cursor: auto;
        }

        .cell {
            cursor: cell;
        }

        .context-menu {
            cursor: context-menu;
        }

        .col-resize {
            cursor: col-resize;
        }

        .copy {
            cursor: copy;
        }

        .crosshair {
            cursor: crosshair;
        }

        .default {
            cursor: default;
        }

        .e-resize {
            cursor: e-resize;
        }

        .ew-resize {
            cursor: ew-resize;
        }

        .grab {
            cursor: -webkit-grab;
            cursor: grab;
        }

        .grabbing {
            cursor: -webkit-grabbing;
            cursor: grabbing;
        }

        .help {
            cursor: help;
        }

        .move {
            cursor: move;
        }

        .n-resize {
            cursor: n-resize;
        }

        .ne-resize {
            cursor: ne-resize;
        }

        .nesw-resize {
            cursor: nesw-resize;
        }

        .ns-resize {
            cursor: ns-resize;
        }

        .nw-resize {
            cursor: nw-resize;
        }

        .nwse-resize {
            cursor: nwse-resize;
        }

        .no-drop {
            cursor: no-drop;
        }

        .none {
            cursor: none;
        }

        .not-allowed {
            cursor: not-allowed;
        }

        .pointer {
            cursor: pointer;
        }

        .progress {
            cursor: progress;
        }

        .row-resize {
            cursor: row-resize;
        }

        .s-resize {
            cursor: s-resize;
        }

        .se-resize {
            cursor: se-resize;
        }

        .sw-resize {
            cursor: sw-resize;
        }

        .text {
            cursor: text;
        }

        .url {
            cursor: url(myBall.cur), auto;
        }

        .w-resize {
            cursor: w-resize;
        }

        .wait {
            cursor: wait;
        }

        .zoom-in {
            cursor: zoom-in;
        }

        .zoom-out {
            cursor: zoom-out;
        }
    </style>
</head>

<body>

    <h1>The cursor Property</h1>
    <p>Mouse over the words to change the mouse cursor.</p>

    <p class="alias">alias</p>
    <p class="all-scroll">all-scroll</p>
    <p class="auto">auto</p>
    <p class="cell">cell</p>
    <p class="context-menu">context-menu</p>
    <p class="col-resize">col-resize</p>
    <p class="copy">copy</p>
    <p class="crosshair">crosshair</p>
    <p class="default">default</p>
    <p class="e-resize">e-resize</p>
    <p class="ew-resize">ew-resize</p>
    <p class="grab">grab</p>
    <p class="grabbing">grabbing</p>
    <p class="help">help</p>
    <p class="move">move</p>
    <p class="n-resize">n-resize</p>
    <p class="ne-resize">ne-resize</p>
    <p class="nesw-resize">nesw-resize</p>
    <p class="ns-resize">ns-resize</p>
    <p class="nw-resize">nw-resize</p>
    <p class="nwse-resize">nwse-resize</p>
    <p class="no-drop">no-drop</p>
    <p class="none">none</p>
    <p class="not-allowed">not-allowed</p>
    <p class="pointer">pointer</p>
    <p class="progress">progress</p>
    <p class="row-resize">row-resize</p>
    <p class="s-resize">s-resize</p>
    <p class="se-resize">se-resize</p>
    <p class="sw-resize">sw-resize</p>
    <p class="text">text</p>
    <p class="url">url</p>
    <p class="w-resize">w-resize</p>
    <p class="wait">wait</p>
    <p class="zoom-in">zoom-in</p>
    <p class="zoom-out">zoom-out</p>

</body>
</html>

ex) 사용자 정의 커서 예시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body, html {cursor: url('d3.cur'), auto} // 이미지 커서 뒤에 반드시 auto를 줘야 한다. 브라우저가 이미지 커서 지원을 하지 못할 수 있으므로
        a {cursor: url('8kwang.cur'), auto} // aute = 기본 커서를 의미
    </style>
</head>
<body>
    <a href="http://www.naver.com">네이버</a>
</body>
</html>

// 참고 : webkimsora.tistory.com/61

[css] 마우스 커서 이미지 바꾸기 - 브라우저별 이미지 확장자 유의

https://jsfiddle.net/Kimara/nnj7L0xc/ Custom Cursors 커서 모양을 이미지로 바꿀 수 있다. 모바일용 브라우저, 오페라 에서는 적용 X 익스 6이상 O body, html {cursor: url(smiley.gif), url(myBall.cur), au..

webkimsora.tistory.com

728x90

저작자표시

'Web > CSS' 카테고리의 다른 글

[필기정리] Day40 - white space, 초기화코드, 구글 웹폰트 등 (0)	2020.08.05
[필기정리] Day39 - CSS 문제 및 해답 (0)	2020.08.04
[필기정리] Day38 - CSS 문제 및 해답 (0)	2020.08.03
[필기정리] Day38 - CSS 선택자, overflow, position 등 (0)	2020.08.03
[필기정리] Day37 - CSS 문제 및 해답 (0)	2020.07.31

coderbear

[필기정리] Day39 - float, shadow, gradient 등

'Web > CSS' 카테고리의 다른 글

티스토리툴바