[CSS] Day01 (Note + Code): 백그라운드, block & inline, 폰트, 포지션, float, flexbox

2022/03/02

background 관련 속성
참고 사이트: www.cssreference.io

1. background-image 속성
url(경로나 파일 명)

2. background-repeat 속성
repeat: 디폴트 설정. 넘치면 잘라줌
space: 이미지를 반복해서 채우는데, 처음과 마지막 반복 이미지 양끝에 고정후 나머지를 반복.
round: 이미지를 반복, 이미지가 잘리지 않도록 전체 반복. 이미지 사이즈 재조정됨
no-repeat: 반복 안 함

3. background-size 속성
배경 이미지가 요소의 사이즈보다 작거나 클 때 조정하는 걸 뜻함
auto: 이미지 크기 유지 default
length: px, % 등으로 값 설정
cover: 요소 사이즈 다 채울 수 있게 이미지 확대/축소, 가로/세로 비율 유지
contain: 요소 사이즈를 벗어나지 않는 최대 크기로 이미지 확대/축소, 가로세로 비율 유지.

4. background-attachment 속성
fixed: 스크롤을 해도 계속 화면에 보이도록 배경 이미지 고정 시킴
scroll: (디폴트) 스크롤하면 배경 이미지도 스크롤에 따라 올라간다.

5. background-position 속성
위치 지정
좌측 상단이 default (x, y) 좌표로 지정 가능
left top
left center
left bottom
right top
right center
rught bottom
center top
center center
center bottom

x y : %, px, ex 등으로 좌표값 위치 지정 가능. 0% 0% 좌측 맨 상단. 100% 100% 우측 맨 하단
*background: color image repeat attachment position 이렇게 순서대로 한 줄로 쓸 수도 있음.

<style>
        body{
            width: 400px;
            height: 700px;
            background-image: url(backgd.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;
        }


    </style>
</head>
<body>
    <div>Background image div</div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam ad, quisquam quae doloribus vero iste distinctio? Laudantium eos autem beatae recusandae suscipit, aut non, quis quibusdam ipsa accusamus ducimus explicabo?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam ad, quisquam quae doloribus vero iste distinctio? Laudantium eos autem beatae recusandae suscipit, aut non, quis quibusdam ipsa accusamus ducimus explicabo?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam ad, quisquam quae doloribus vero iste distinctio? Laudantium eos autem beatae recusandae suscipit, aut non, quis quibusdam ipsa accusamus ducimus explicabo?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam ad, quisquam quae doloribus vero iste distinctio? Laudantium eos autem beatae recusandae suscipit, aut non, quis quibusdam ipsa accusamus ducimus explicabo?</p>

CSS block과 inline
모든 html 태그는 각 태그마다 디폴트로 block 또는 inline 특성을 가짐.
display 속성을 통해 변경 가능

1. block 특성
: 한 줄 다 차지함. width, height, margin, padding 속성 설정 가능
block 안에 inline 포함 가능
div, h, p, ol, ul, li, hr, table, form, etc.

2. inline 특성
: content 너비만큼 가로폭 차지 (한 줄 다 차지 x)
width, height, margin, padding 속성 설정 불가능
상하 여백은 line-height로 지정 가능.
inline 안에 block요소 포함 불가능
span, a, strong, img, br, input, select, textarea, button 등

<style>
        a{padding: 10px;}
    </style>
</head>
<body>
    <div style="background-color: red; width:200px;"> 블럭 div
        <span>인라인 span</span>
    </div>

    <span style="background-color: lightcyan; width:200px;display: inline-block;">인라인 span
    <div>블럭 div</div>
    요소
    </span> 
    <a>naver</a>

3. CSS display 속성
block -> inline / inline -> block 변경 가능
block: block 레벨로 지정
inline: inline 레벨로 지정
inline-block: 양쪽 모두의 속성을 섞어서 갖는 형태
none: 화면에 표시하지 않음 (차지하는 공간까지 사라짐)

4. visibility 속성
요소를 보일지 말지 설정
visible: 보이게 한다. 디폴트
hidden: 안 보이게 한다. (차지하는 공간은 유지)
collapse: table에서 사용, 행이나 열을 보이지 않게 함
none: table 요소의 행 열을 보이지 않게 함.

5. inline-block
한 줄 차지하지 않지만, width/ height/ margin/ padding 등의 속성 지정 가능

CSS font 관련 속성

1. font-size 문자 크기
medium: 웹 브라우저에서 정한 기본 글자 크기 (디폴트)
xx-small, x-small, small, large, x-large, xx-large
length: px % em rem 등 css 단위를 사용한 글자 크기 설정

2. font-family
일반적으로 font-family에 여러 폰트를 설정하는 경우가 많음.
font-family: 첫 번째 폰트, 두 번째 폰트, 세 번째 폰트……;
@font-face: 웹폰트 사용

<style>
        .font{
            font-size: 3rem;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            font-style: italic;
            font-weight: bolder;
            background-color: lavender;
            line-height: 64px;
            text-align: justify;
            text-decoration: dashed;
        }
    </style>
</head>
<body>
    <p class="font">hello css14</p>
    <p>hello css14</p>
</body>

3. font-weight
글씨 굵기
notmal/ bold/ bolder/ lighter/ 100/200/… (normal == 400)

4. font-style
normal/ italic/ oblique

5. line-height
(인라인) 라인 높이 설정: 상/하 여백 조절
normal
pw, em, rem

6. text-overflow 속성
아래 조건이 설정되어 있는 상태에서 설정 가능
-width 속성
-white-space: nowrap (자동 줄 바꿈 x) //normal(자동 줄 바꿈 o)인 상태에선 불가
-overflow 속성이 visible 이외의 값 (hidden)으로 되어있을 때. //hideen으로 하면 튀어나가는 문자는 보이지 않게 됨.

값
-clip: 텍스트 잘라냄
-ellipsis: 텍스트가 잘렸다는 것을 . . .으로 표시.

<style>
        p{
            background-color: lavenderblush;
            width: 50%;
            
        }
        .cut{
            background-color: lightyellow;
            white-space: nowrap; /*자동 줄바꿈 안하기*/
            overflow: hidden;
            text-overflow: ellipsis;
        }

    </style>
</head>
<body>
    <p class="cut">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi omnis fugiat fuga cupiditate tempora facere suscipit id eos. Doloremque vel neque non tempora et praesentium quasi sequi quae facilis porro?</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi omnis fugiat fuga cupiditate tempora facere suscipit id eos. Doloremque vel neque non tempora et praesentium quasi sequi quae facilis porro?</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi omnis fugiat fuga cupiditate tempora facere suscipit id eos. Doloremque vel neque non tempora et praesentium quasi sequi quae facilis porro?</p>

</body>
</html>

position 속성

html 요소 위치를 결정하는 방식 지정으로 크게 4가지 방식 있음

1. 정적 위치 static position (default)

2. 상대 위치 relative position

3. 절대 위치 absolute position

4. 고정위치 fixed position

<style>
        div{
            display: inline-block;
            width: 200px;
            height: 200px;
            border: 2px solid mediumvioletred;
            border-radius: 10px;
        }
        .box1{
            background-color: lavenderblush;
        }
        .box2{
            background-color: darkblue;
            position: relative; /*원래 있어야할 곳 기준으로 이동*/
            top: 50px;
            left: 50px;
            z-index: 100;
        }
        .box3{
            background-color: aquamarine;
            position: absolute; /*부모 기준으로 top left 이동*/
            top: 50px;
            left: 50px;
            z-index: 1;
        }
        .box4{
            background-color: chocolate;
            position: fixed; /*고정 좌표값으로 지정*/
            top: 50px;
            left: 400px;
        }


    </style>

z-index
큰 숫자 값을 지정할수록 화면 전면에 출력

CSS float
요소를 띄우는 속성으로 웹페이지에서 텍스트와 함께 이미지 배치를 위해 고안되었지만, 수평 정렬을 위해 사용되었다.

1. float 속성
none: defalut
right: 오른쪽으로 띄우기
left: 왼쪽으로 띄우기

2. clear 속성을 이용해 없앨 수 있다
none: float 사용, default
right: 오른쪽 flaot 해제
left: 왼쪽 float 해제
both: 양쪽 float 해제

 <style>
        div{
            width: 100px;
            height: 100px;
        }
        .box1{
            background-color: blanchedalmond;
            float: left;
        }
        .box2{
            background-color: goldenrod;
            float: right;
        }
        .box3{
            background-color: lightblue;
            float: left;
        }
        .box4{
            background-color: darkcyan;
            float: right;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>

CSS flexbox

1. flex container
flexbox는 상위 요소인 container와 하위(자식) 요소인 item들로 구성함
*속성
display: flex 컨테이너 정의: flex(블록 특성이라 블록처럼 사용), inline-flex(인라인 특성, 수평 정렬)
flex-direction: 주 측(main-axis) 설정: row 좌-> 우, column 위-> 아래. 각각 뒤에 reverse 붙여 반대로 바꿀 수 있음.
flex-wrap: 한 줄, 여러 줄…… 몇 줄 할지 지정. nowrap(디폴트), wrap, wrap-reverse.
flex-flow: direction + flow 한 번에 지정: flex-flow: direction wrap;
justify-content: 주 측 기반 수평 정렬 방법
align-content: 수직 정렬 (각 행마다 적용)
align-times: 수직 정렬 (복수의 행을 하나의 그룹처럼 적용)

*정리*
수평 가운데 정렬: justify-content: center;
수직 가운데 정렬: align-content: center;

<style>
        .container{
            display: flex;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: blanchedalmond;
            border: 2px solid red;
        }
     
    </style>
</head>

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

order 속성
배치 순서: default = 0, 정수로 값 설정, order 값이 낮은 순서대로 배치

*유용한 사이트: https://www.outpan.com/app/1b970b008f/flexbox-playground

티스토리툴바