규호의 공부방: CSS

container	item
display	order
flex-direction	flex-grow
flex-wrap	flex-shrink
flex-flow	flex-basis
justify-content	flex
align-items	align-self
align-content	-

속성을 적용하기 전

1) container에 'display: flex;' 속성 주기
2) container에 'flex-direction: row, column, row-reverse, column-reverse' 주기

기타 참고

1) item 선택하기
L .item:nth-child(1) {
....
}

1. container 속성

flex-wrap:

L nowrap = 기본값, item이 container 크기에 맞춘다.

L wrap = 컨테이너보다 아이템들의 함이 크다면 줄바꿈이 된다.

L wrap-reverse = 그 반대순서

align-items:(모든 아이템 각각에 대해서 적용)

L flex-start = 각각 item의 크기를 갖게 되고, 시작점에 붙는다.

L flex-end = 각각 item의 크기를 갖게 되고, 끝점에 붙는다.

L center = 각각 item의 크기를 갖게 되고, 중간에 붙는다.

L baseline = 가상의 줄에 맞춰 정렬한다.

L stretch =기본값, direction 속성의 값에 따라 item들이 크기를 꽉 채운다.

justify-content:

L flex-start

L flex-end

L space-between

L center

L space-around

align-content:(아이템 그룹별로 적용)

L flex-start

L flex-end

L center

L space-between

L space-around

L stretch

2. item 속성

flex-basis:

L 해당 item의 기본 크기(direction 속성에 따라 결정)

align-self:

L auto, flex-start, flex-end, center, baseline, stretch

L align-items를 각각의 item에 적용할 때 사용

flex-grow:

L 각 엘리먼트에 x 값을 주면, 전체 아이템 n개에 대해서
컨테이너 공간을 x/n으로 나눠가짐

flex-shrink:

L 각 엘리먼트에 x 값을 주면, 전체 아이템 n개에 대해서
컨테이너 공간이 item 크기보다 줄어들 때 공간에 대한 줄어듬의 부담을
x/n 만큼 나눠서 부담한다.

flex:

L grow, shirink, basis 축약.

L .item { flex: flex-grow [flex-shrink] [flex-basis(%)]; }

L ex) .item { flex: 1 0 100% }

order:

L item의 순서를 바꾸고 싶을 때 쓴다.

L 문서상에서 element의 순서를 실제로 바꾸지 않더라도

화면에 표시되는 순서(위치)에 영향을 줄 수 있다.

2016년 12월 8일 목요일

position 속성을 변경 안 하고 offset 값(left, top 등)을 부여하면 반응이 없다. \
이유는 position의 default 값이 static(정적)이기 때문이다.

relative : 원래 자기 위치로부터 상대적으로 이동
absolute : left와 top로 위치지정을 안 해주면 default는 원래 자기의 offset이다.
그러나 부모중에 static이 아닌(relative 등) 부모가 있을 경우,
그 부모의 offset으로부터 기준이 된다.
이 옵션을 쓰는 순간, 부모 element와 무관해져서, 원래는 부모 크기의 100%를
그대로 썼다면, absolute 되는 순간 width 값이 없어져 버린다.
그래서 직접 지정해 줘야 한다.
fixed : 해당 element를 scroll과 완전히 독립시킨다.
absolute와 상당히 비슷한 특징을 가지고 있다.

2016년 12월 7일 수요일

마진 곂침 현상

1. 같은 level의 element인 경우
- margin이 곂쳐진 부분은 더 값이 큰 마진값이 적용 된다.
- top과 bottom을 가진 element가
시각적으로 표현이 될 때는 top+bottom 크기로 표시가 되는데,
시각적으로 표현이 안 된다면 top과 bottom중 큰 값만 적용 된다.
(ex)
<style>
#empty {
margin-top: 50px;
margin-bottom: 100px;
/*border: 1px solid tomato;*/
}
#normal {
background-color: powderblue;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="empty"></div>
<div id="normal">normal</div>
</body>

2. 부모와 자식의 관계로 있고
- 부모 element가 시각적으로 투명한 경우(border 따위 속성이 없으면),
부모 margin과 자식 margin 중 큰 쪽의 margin만 적용 된다.
(ex)
<style>
#parent {
/*border: 1px solid tomato;*/
margin-top: 100px;
}
#child {
background-color: powderblue;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
Hello world
</div>
</div>
</body>

[property] box-sizing

2016년 10월 19일 수요일

CSS 배경 꾸미기

엘리먼트의 배경

엘리먼트의 배경에 색상을 부여하거나 이미지를 표시하고 싶을 때 background 효과를 사용한다. 이 효과를 이용하면 배경에 사용된 이미지의 위치를 지정하거나, 반복 할 수 있다.

배경색

background-color:색상값

Hex	16진수로 색상 값을 표현, #ff0000 (붉은색), #00ff00(초록), #0000ff(파랑)
RGB	붉은색, 초록, 파랑의 값을 조합해서 색상 값을 표현, RGB(255,0,0), RGB(0,255,0), RGB(0,0,255)
별명	red, blue, green등 칼러코드 참고

배경 이미지

background-image: url('이미지의 URL');

배경 이미지의 반복

background-repeat: 반복방식

repeat	수직, 수평 모두 반복함
repeat-x	수평만 반복함
repeat-y	수직만 반복함
no-repeat	반복하지 않음

참고 : w3school.com

배경 이미지의 위치

background-position: 위치값

left top left center left bottom right top right center right bottom center top center center center bottom	배경 위치를 지정
x% y%	x%는 수평위치를 y%는 수직 위치를 의미하고, 이미지의 상대적인 위치를 지정한다.
xpos ypos	이미지의 절대적인 위치를 지정한다.

단축속성

body {background:#00ffff url('image.png') no-repeat right top;}

예제

example1.html - 이미지 대체 기법을 이용해서 <img> 태그 없이 로고 만들기 (github)

-이유 : 이미지는 크롤링 하는 로봇이 이해하기 힘든데, 아래와 같이 하면 의미전달이 가능하다.

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

        <style>

            #logo {

                background: url('https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png') no-repeat;

                width: 200px;

                height: 215px;

            }

            .hidden_text {

                display: none;

            }

        </style>

    </head>

    <body>

        <div id="logo">

            <span class="hidden_text">생활코딩</span>

        </div>​

    </body>

</html>

example2.html - 조각 이미지를 이용해서 그라디언트 효과의 배경 만들기 (github)

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

        <style>

            body{

                background-image:url('https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png');

                background-repeat:repeat-x;

            }

            h1{

                color:white;

            }

        </style>

    </head>

    <body>

        <h1>Hello world​</h1>

    </body>

</html>