도룩이의 개발일기
CSS 이론 본문
CSS
CSS는 Cascading Style Sheets의 약자이다.
CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어
HTML만으로 웹 페이지를 제작할 경우 HTML 요소의 세부 스타일을 일일이 따로 지정해 주어야만 하기 때문에
매우 많은 시간이 걸리며, 완성한 후에도 스타일의 변경 및 유지 보수가 매우 힘들어진다.
이러한 문제점을 해소하기 위해 CSS를 사용한다.
CSS는 웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해주므로 사이트의 전체 스타일을 손쉽게 제어할 수 있다.
또한, 웹 사이트의 스타일을 일관성 있게 유지할 수 있게 해주며, 그에 따른 유지 보수 또한 쉬워진다.
Selector 와 property
CSS는 기본적으로 두가지 파트로 구성되어있따 첫번째로 selector 파트, 두번째로 property파트이다.
property 기본구성은 아래와 같이되어있다. ;(따옴표)를 넣어주어야 오류가 생기지 않는다.
property-name: value;
selector를 구성하기위해 예를들어 property를 html의 h1에 연결하고싶다면 아래와같이 작성하면된다.
h1 {
property-name: value;
}
property를 원하는 만큼 넣을 수도 있다.
selector는 태그, 링크, 문단, 헤더, 푸터 등 모든 태그 이름이 해당된다.
selector에 자리의 id, class를 쓸 수 도 있는데
id의 경우 #을 사용하여 아래와 같이 작성하며
#id {
property-name: value;
}
class의 경우 .을 사용하여 아래와 같이 작성한다.
.class{
property-name: value;
}
두가지를 동시에 사용할수도 있는데 예를들어 태그+ class를 사용할경우 아래와 같이 작성한다.
h1 .class {
property-name: value;
}
기본적인 selector의 구성은 아래처럼 구성된다.
selector (id, class, tag name) {
property-name: value;
property-name: value;
property-name: value;
property-name: value;
property-name: value;
}
CSS 파일과 HTML 파일 연결
css파일과 html파일을 연결시키는 작업에는 두가지가 있다.
첫번째 방법은 inline으로 html 문서 내부에서 style을 작성하는 방법이다.
하지만 이 방법은 html문서마다 계속 수정해줘야하는 번거로움이 있으므로 비효율적이다.
예시)
<style>
p { text-align : center; }
</style>
두번째 방법으로는 external 방법으로 태그를 이용하여 css 파일을 읽어 와서 스타일을 적용하는 방법이다.
연결한 css파일에서 수정하면 바로 자동으로 모든 html 문서에 적용되므로 효율적이다.
예시)
<linkhref=“css파일경로” rel=“stylesheet” type=“text/css”>
Box Model
css에서는 많은 element 들이 박스로 이루어져 있다.주로 4개의 박스로 이루어져있는데
첫번째는 컨텐츠(contents), 두번째는 박스의 보더(border/경계),
세번째는 패딩(padding/보더에서 안쪽으로 있는 간격), 네번째는 마진(margin/박스의 보더에서 바깥쪽으로 있는 간격)
padding 명령어 옵션에서
padding: 첫숫자(상하), 두번째숫자(좌우)
를 의미한다.
padding을 상-우-하-좌 방향으로 주고싶다면
padding: 20px(상), 10px(우), 5px(하), 2px(좌); 순으로 시계방향으로 설정하면된다.
이와 마찬가지로 마진(margin) 도 동일하게 적용된다.
margin: 20px(상), 10px(우), 5px(하), 2px(좌);
border는 border-width(폭), border-style(경계의 스타일), border-color(색상) 이 있다. 차례대로 사용하면되는데
명령어를 단축하기위해 사용하려면
border: 5px(폭) dashed(스타일) red(색상); 순서대로 작성하면된다.
Display( block, inline-block, inline)
블록(block)은 폭, 높이가 존재하지만 element가 크기와 상관없이 그옆에 다른 element가 위치하는 것을 허용하지 않는 형태로 박스들이 밑에 붙는 형태
display: block;
ex)
인라인블록(inline-block)은 폭이나 높이를 고려하고 박스들이 서로 옆에 붙는 형태
인라인과 같은 설정값을 원하면서 동시에 박스 형태를 유지하고 싶을때 사용한다.
*
inline-block 은 반응형 디자인을 지원하지 않아서 대신에 flex를 많이 사용함
display: inline-block;
ex)
인라인(inline)은 서로옆에 붙는 형태이나 폭이나 높이, 박스가 없는 형태로 텍스트처럼 적용된다.
*
inline에서 padding은 상하좌우 전부 적용되지만 margin은 좌우만 적용된다.
왜냐하면 inline은 height 나 width가 없기 때문이다.
display: inline;
ex)
Position property(static, fixed, absolute, relative, sticky)
position: static(default) = 왼쪽에서 오른쪽으로 위에서 아래로 쌓임
absolute = static이 아닌 상위 박스를 기준으로 이동, 다 static일 경우 body 태그를 기준으로 한다.
relative = 기존 static의 위치에서 이동
fixed = 웹 페이지 기준(뷰포트)으로 이동
sticky = 처음에 자신의 위치를 가지고 있지만 스크롤을 할 경우 scroll box(overflow 속성)의 영역으로
넘어감 반드시 top,left,right,bottom 속성을 이용하여 기준을 잡아주어야 함.
fixed랑 sticky랑 햇갈리신다면 https://jsfiddle.net/daehwan/xk0od1av/28/ 여기서 바로 이해하실 수 있다.
포지션에는 4가지 종류의 포지션이 있다.
*상하좌우 옵션은 모든 포지션에서 동일하게 사용가능하다.
static은 디폴트 설정값으로 마우스를 스크롤하거나 하면 해당 위치의 요소가 사라진다.
ex)스크롤을 하면 해당 요소가 사라진다.
fixed는 고정으로, 어디든 오버랩해서 계속 해당 위치에 고정시키기 위해서 사용한다.
fixed를 사용하면 레이어를 부수고 다른 모든 레이어보다 위에 위치한다.
ex)스크롤을 해도 고정되어 있는 것을 확인할 수 있다.
absolute는 포지션 relative에 상대적으로 포지션을 잡는것으로 relative 포지션이 없을 경우, absolute는 문서의 본문 body에 맞춰서 포지션이 잡힌다. 그러므로 absoulte 포지션을 부모 element에 상대적으로 사용하려면 부모 element 에게 relative 포지션을 먼저 설정해줘야 한다.
ex)첫번째 사진에서는 relative 포지션이 설정되어있어 노란색 박스안에 초록색 박스가 상대적으로 포지션이 잡혔지만
두번째 사진에서는 relative 포지션이 설정되어있지 않아 본문인 body에 맞춰서 포지션이 잡혔다.
relative는 absolute 포지션을 상대적으로 적용하기위해 부모 element에게 설정해주는 포지션
Flex
flex는 element들의 크기나 위치를 쉽게 잡아주는 도구이다. 레이아웃과 관련된 다양한 속성들이 있지만 그리 효과적이지 않기 때문에 flex를 이용하면 레이아웃을 매우 효과적으로 표현할 수 있다.
display:flex;
flexbox에서 부모컨테이너(father)를 플렉스(flex)로 선언하면, 그 안에 종속된 칠드런 박스들을(children) 움직일 수 있다. 그렇기 때문에, 각각 박스에게 일일히 명령할 필요가 없다. 그리고 flexbox는 그안의 요소들도 움직일 수 있다.
justify-content: flex 요소들을 가로선 상에서 정렬
flex-start: 요소들을 컨테이너의 왼쪽으로 정렬
flex-end: 요소들을 컨테이너의 오른쪽으로 정렬
center: 요소들을 컨테이너의 가운데로 정렬
space-between: 요소들 사이에 동일한 간격 / 양사이드 공간의 여백이 없다.
space-around: 요소들 주위에 동일한 간격 / 양사이드 공간의 여백이 있다.
*flex의 방향의 column일 경우 justify-content의 방향이 세로로 align-items의 방향이 가로로 바뀐다.
align-items: flex 요소들을 세로선 상에서 정렬
flex-start: 요소들을 컨테이너의 꼭대기로 정렬
flex-end: 요소들을 컨테이너의 바닥으로 정렬
center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬
baseline: 요소들을 컨테이너의 시작 위치에 정렬
stretch: 요소들을 컨테이너에 맞도록 늘림
*flex의 방향의 column일 경우 justify-content의 방향이 세로로 align-items의 방향이 가로로 바뀐다.
flex-direction: 정렬할 방향을 지정
row: 요소들을 텍스트의 방향과 동일하게 정렬
row-reverse: 요소들을 텍스트의 반대 방향으로 정렬
column: 요소들을 위에서 아래로 정렬
column-reverse: 요소들을 아래에서 위로 정렬
* column-reverse / row-reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀜
order:Flex의 요소의 순서를 지정한다.(우선순위와 비슷)
order의 기본 값은 0이며, 양수나 음수로 바꿀 수 있음
align-self:
- 개별 요소에 적용할 수 있는 또 다른 속성
- 이 속성은 align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용
* 지정된 align-items 값을 무시하고 Flex 요소를 세로선 상에서 정렬
flex-wrap:
nowrap: 모든 요소들을 한 줄에 정렬
wrap: 요소들을 여러 줄에 걸쳐 정렬
wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬
flex-flow:
- flex-direction과 flex-wrap이 자주 같이 사용되기 때문에, flex-flow가 이를 대신할 수 있음
- 이 속성은 공백문자를 이용하여 두 속성의 값들을 인자로 받음
- 예를 들어, 요소들을 가로선 상의 여러줄에 걸쳐 정렬하기 위해 flex-flow: row wrap을 사용할 수 있음.
align-content:
flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬
flex-end: 여러 줄들을 컨테이너의 바닥에 정렬
center: 여러 줄들을 세로선 상의 가운데에 정렬
space-between: 여러 줄들 사이에 동일한 간격
space-around: 여러 줄들 주위에 동일한 간격
stretch: 여러 줄들을 컨테이너에 맞도록 늘림
*align-content는 여러 줄들 사이의 간격을 지정, align-items는 컨테이너 안에서 어떻게 모든 요소들이 정렬하는 지 지정함. 따라서 한줄만 있는 경우 효과를 보이지 않는다.
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
flexbox를 이해하는데 도움이 되는 사이트
Pseudo-selector(가상셀렉터)
element별로 클래스를 만들어서 스타일을 설정할때는 문제가 없지만 팀으로 설정해주어야 할때 class를 이용하지 않고 가상셀렉터를 통해서 선택할 수 있다.
태그 이름이나 class, id를 쓰지 않고 선택하는 방법이 바로 가상셀렉터이다.
가상셀렉터란 셀렉터인데 element가 아닌 것을 뜻한다.
여러가지 요소들중에 한가지만 따로 설정하고 싶을경우에는 가상셀렉터를 한번 더사용하면 된다.
ex)
.element:first-child{} : 요소들중 첫번째 요소를 선택
.element:last-child{} : 요소들중 마지막 요소를 선택
.element:nth-child{n/2n/2n+2 }: 요소들중 n번째 요소를 선택
.element + span : 서로가 같은 형제(한묶음)이라는 뜻 , 자식요소가 아니여도 같은형제태그일때 사용
.element > span : 직계(바로 아래 자식)라는 뜻, 직계받는 요소값만 선택됨
.element ~ span : 직계 자식이아니어도 부모 아래 자식중 span이라는 요소가 있다면 선택됨
:: 콜론이 2개인 pseudo-selector
1) :: placeholder (0:46)
: placeholder의 특성만 바꾸고 싶을 때 사용합니다.
2) :: selection (1:31)
: 클릭해서 긁을 때(1:58) 발생합니다.
3) :: first-letter
: 첫 글자에만 적용됩니다.
4) ::first-line
: 첫 줄에만 작용합니다.
이 외에도 여러가지가 있다.
* 참고 URL: poiemaweb.com/css3-selector
CSS States (hover , active , focus , visited, focus-within)
hover: 요소 상태가 hover 인 경우 박스의 마우스를 가져다대거나 하면 해당 설정값이 나타난다.
active: 요소 상태가 active 인 경우 박스를 클릭하면은 해당 설정값이 나타난다.
focus: 요소 상태가 focus 인 경우 다른상태보다 우선순위로 해당 설정값이 나타난다. (마우스나 키보드 Tap을 사용하여 선택되었을 때)
visited: 링크에서 사용할 수 있는 states로 해당 링크가 클릭(방문)되었다면 해당 설정값이 나타난다.
focus-within: 부모-자식간에 관계에서 사용할수 있는 states로 부모가 focus-within 인 경우 자식 엘리먼트 안에 어떤 것이든 focus 되면 해당 설정 값이 나타난다.
Colors and Variables
# 색상 체계 (color system)
1) hex code
: #2ecc71와 같은 색상 코드
2) rgb
: 각각 red, green, blue를 의미합니다.
가령, rgb(0,140,200)의 경우엔 red 값이 0, green 값이 140, blue 값이 200이라고 이해할 수 있습니다.
3) rgba
: 2와 동일하지만 a가 포함된 형태입니다. 'a(alpha)'는 투명도를 담당합니다.
0(투명)~1(불투명) 사이의 값으로 조절할 수 있습니다.
# variable(변수)
(custom property라고도 합니다. variable이라고도 함)
div {color: #2ecc71}
p {color: #2ecc71}
상태에서, 둘 모두의 색을 바꾸고 싶다면 div와 p의 색상 코드를 지우고, 또 다시 입력해야 합니다. 그러나 variable을 이용하면 더 간단해짐