코딩은 어떻게 HTML를 꾸며주는가에 대해서 배웠고, 오늘은 어떻게 디자인을 하는 가다.
1. 박스 모델
대표적으로 글자와 박스 요소가 있는데. 글자는 인라인! 박스 요소는 말 그대로 박스 모델.
실제 컨텐츠를 어떻게 담아서 보여줄 것인가?(레이아웃) 하는 속성들을 보여주기 위함인데.
박스 모델의 대표적인 요소는 <div>
- 가로 세로 너비 (width, height) = 기본값 : auto "오토." (따로 계산하지 않으면 브라우저에서 자동으로 지정값을 정해줌)
오토가 자동으로 잡혀 있음.
백그라운드 컬러의 경우에는 늘어나려는 속성이 있음.
왜냐하면, width의 오토 성질은 늘어나려는 속성이 있고, height 높이는 줄어드려는 속성이 있기 때문
- 단위 : px, em, rem, vh, vw 등 단위를 사용할 수 있음.
스팬 태그의 경우에는 넓이가 줄어들려는 속성이 있음.
그래서 좌우가 넓어지지 않고 고정값으로 유지. 픽셀값을 줘도 의미가 없음.
-최대 너비 (max-width, max-height) : 기본값 none.
넓어질 수 있을 때까지 넓어짐. auto는 거의 사용되지 않음.
단위는 px, em, rem, vh, vw 등 단위를 사용할 수 있음.
-최소 높이 (max-height) : 기본값 0
오토 사용하지 않고, 단위는 : px, em, rem, vh, vw 등 단위를 사용할 수 있음.
-단위
px, 픽셀.
%, 퍼센트
em, 요소의 글꼴 크기. (글자의 크기가 10px이라고 정해졌을 때 1em이라고 단위가 정해짐. 고정값에 두 배씩 커지고 작아진다고 보면 됨)
rem: 루트 (html) 요소의 글꼴 크기
vw, vh : viewport의 가로/세로 너비의 백분율
1vw는 화면 폭에서 1/100 에 해당함.
-외부 여백 (margin) : 기본값 0에 해당하고 auto, 단위, %(x), 음수 지정이 가능함.
단축속성 : margin : [top], [right], [bottom], [left] (시계방향으로 값이 지정 됨)
단축속성 : margin : [top, right], [bottom , left] (함께 지정되는 경우 좌우, 상하 나눠서 지정 됨.)
단축속성 : margin : [top, right, bottom] (3개 단위로도 지정이 가능함.
단축속성 : margin : [top, right, bottom, left] (한 번에 모두 설정이 가능)
개별속성 : amrgin : [margin-top, margin-bottom, margin-left, margin-right]
-내부 여백 (padding) : 기본값은 0이며, 오토, 단위, % 를 활용함. 음수 지정 가능
요소의 크기가 커진다.
단축속성 : padding : [top], [right], [bottom], [left] (시계방향으로 값이 지정 됨)
단축속성 : padding : [top, right], [buttom , left] (함께 지정되는 경우 좌우, 상하 나눠서 지정 됨.)
단축속성 : padding : [top, right, bottom] (3개 단위로도 지정이 가능함.
단축속성 : padding : [top, right, bottom, left] (한 번에 모두 설정이 가능)
-테두리선과 색상 표현
border : 선 - 두께 / 선- 종류 선- 색상
요소의 크기가 커진다.
개별속성
border-width : [top], [right], [bottom], [left] (시계방향으로 값이 지정 됨)
border-width : [top, bottom], [right , left] (함께 지정되는 경우 좌우, 상하 나눠서 지정 됨.)
border-width : [top, right, bottom] (3개 단위로도 지정이 가능함.
border-width : [top, right, bottom, left] (한 번에 모두 설정이 가능)
단축속성
border-style : [top], [right], [bottom], [left] (시계방향으로 값이 지정 됨)
border-style : [top, bottom], [right , left] (함께 지정되는 경우 좌우, 상하 나눠서 지정 됨.)
border-style : [top, right, bottom] (3개 단위로도 지정이 가능함.
border-style : [top, right, bottom, left] (한 번에 모두 설정이 가능)
border-color : [top], [right], [bottom], [left] (시계방향으로 값이 지정 됨)
border-color : [top, bottom], [right , left] (함께 지정되는 경우 좌우, 상하 나눠서 지정 됨.)
border-color : [top, right, bottom] (3개 단위로도 지정이 가능함.
border-color : [top, right, bottom, left] (한 번에 모두 설정이 가능)
색상은 16진수 값을 줄 수 있는데 색상 이름에 줄 수 있다. (브라우저에서 제공하는 이름)
16진수 : #000 or #ffffff
보더는 방향 속성값을 줄 수 있음.
border-방향 : border-top, border-left. ...
border-방향-속성 : border-top-width, border-buttom-style, ...
border는 모서리를 둥글게 만들 수 있음.
기본 값은 0이며 (미적용), 단위 값을 지정할 수 있음 (px, em, wv, rem 등, 주로 픽셀 사용을 많이 함.)
-크기 계산 (box-sizing) : 기본요소의 크기 계산 기준을 지정.
기본값 : content-box (요소의 내용으로만 크기 계산)
border-box (요소의 내용 + padding +border로 크기 계산)
-넘침 제어 (overflow) : 요소의 크기 이상으로 내용이 넘쳤을 때 보여짐을 제어하는 단축 속성.
기본값은 visible
hidden : 넘친 내용을 잘라냄
auto : 넘친 내용이 있을 때만 잘라내고 스크롤 바를 생성
scroll : 거의 안 씀.
개별 속성
overflow-x
overflow-y
-출력 특성 (display) : 기본값 : block, liline, inline-block
flex : 1차원 레이아웃 잡을 때 사용.
grid : 2차원 레이아웃 잡을 때 사용.
none : 화면에서 사라짐.
-투명도 (opacity) : 기본값 : 1
0~1 사이의 소수점 숫자를 통해서 투명도를 조절할 수 있음. (0.1~0.9)
-글꼴
font-style
-font-weight : 기본 두께의 경우 400(normal). 두껍게(bold) 700정도 주면 됨 (100~900사이)
-font-size : 16px
-inline-height : 숫자로 값을 주는데 단위가 없음. 이럴 때는 배수가 됨.
-font-family : 글꼴1, 글꼴2, ..., 글꼴 계열을 지정할 수 있음. (다수 글꼴)
글꼴 계열 : serif(바탕체), sans-serif (고딕체), monospace(고정너비글꼴, 폭을 맞춰 줌), cursive, fantasy,
-문자
color
text align : left, right, center,
text decoration : 문자에 선의 여부. (none, underline, line-throught)
text indent : 들여쓰기, 내어쓰기 모두 지정이 가능함 (들여쓰기는 양수+1값, 내어쓰기는 음수-1 값)
-배경지정
background color : transparent(기본값)
background image : none (기본값), (이미지를 넣을 때는 이미지 경로 url를 넣음)
background repeat : 명령 값으로 상하좌우로 입력값을 주면서 자유롭게 이동 가능
background position : 숫자값으로 상하좌우를 움직일 수 있음.
background size : auto : 실제크기 유지, 단위, cover(비율을 유지하고 더 넓은 너비에 맞춤)
contain(비율을 유지하고 더 짧은 너비에 맞춤)
background attachment : scroll, fixed.
-배치(position) position : 요소 위치 지정 기준
요소를 배치할 때는 어떤 기준을 먼저 설정하고 나서 (position) 위치 (top, bottom, left, right, z-index)를 정해야 한다.
static : 기준없음.
relative : 요소 자신을 기준으로 함.
absolute : 위치상 부모 요소를 기준으로 함.
fixed : 뷰포트를 기준으로 함. (꼭대기에서부터 시작함)
-요소 쌓임 순서 (stack order)
* 요소에 position 속성값이 있는 경우 위에 쌓임.
*위의 조건이 같은 경우, z-index의 값이 높을 수록 위에 쌓임.
*위의 조건들이 모두 같은 경우 작성된 순서.
*position의 값이 absolute, fixed일 경우 display 속성이 block으로 변경 됨.
코딩 4일차! CSS편 마무리
CSS는 결국 어디에다가 어떤 디자인을 할 것인가! 다. -플렉스(flex) : 1차원의 레이아웃을 만드는 개념! (정렬해주는 것. 수직or수평) -flex container : 플렉스를 사용해서 부모의 역할을 함. *. display, fle
gestyou.tistory.com
댓글