230907 [CSS] text, list, border, width, height, box-model, background, background-image

[23.09.07] 33일차

 

<<진도>>

Front-end

[CSS]

- text

- list(bullet)

- border

- width / height

- box-model

- background

- background-image

 

 

<<오늘의 팁>>

- h1은 수직영역에 꽉차게 생성되었으므로 수직정렬이 안된다.

- 짧은 콘텐츠 태그입력 div{hello} -> <div>hello</div>

- emmet 시 {} 안의 $는 순차증가하는숫자

 

<< CSS >>

 

<text>

/* 웹브라우저에 오는 모든 폰트는 body의 자식 */

body {

  font: 16px sans-serif;

}

 

.content1,

.content2 {

  width: 300px;

  border: 3px solid black;

}

 

.content1 {

  /* 줄이 바뀔 때 단어를 쪼개기 */

  word-break: break-all;

}

 

.content2 {

  text-align: justify;

}

 

.white {

  /* wrap | nowrap | pre | pre-wrap | pre-line */

  /* pre = pre태그와 같은 효과 */

  white-space: pre-line;

  /* 기본이 nowrap */

  /* pre-line : 코드 왼쪽 공백 없애주기 */

}

 

<list>

[불릿 제어]

<ul>의 기본 bullet은 검정원

- list-style: none;

: bullet 제거

/* bullet 제거 초기화 */

ol, ul, li {

  list-style: none;

}

 

.list {

  /* [bullet] 불릿 위치 */

  /* outside(기본) | inside(안쪽으로) */

list-style-position: inside;

 

  /* 불릿 모양 */

  /* disc | circle | square | etc. */ (매우 다양)

  list-style-type: hangul(가,나,  다) / hangul-consonant(ㄱ,ㄴ,ㄷ);

}

 

** li의 영역은 bullet을 제외한 다음부터 (불릿은 제거를 많이함.)

 

<border> 테두리

 

[border-style] : 선 종류

- solid : 실선

- dashed : 파선

- dotted : 점선

- double : 이중실선

** 반드시 boder-width와 border-style 함께 있어야 유효!

[border-width] : 선 두께

- 표현 방식

border-width: 10px; (상하좌우 전체)

border-width: 10px 20px; (top & bottom | left & right) 상하 | 좌우

border-width: 5px 10px 20px; (top | left & right | bottom)

border-width: 1px 10px 20px 30px; (top | right | bottom | left) 상|우|하|좌

 

[특정 부분만 border 속성을 적용]

border-(top/bottom/left/right)-~

ex) border-top-style: double;

 

[border-color] : 선 색

 

 

[border - shorthand]

[문법]

*** border-width, border-style(필수), border-color

 

[border-radius] : 모서리 각 조절

 

 

<Width / Height> 너비와 높이

 

- 자식(하위 개체)의 크기가 부모(상위개체)보다 더 커도 상관없다.

 

-    but, width / height를 %로 작성하면 상위 개체를 기준으로 삼는다.

 

 

<box-model> 박스모델

정 가운데는 content의 영역

 

[box-model]

content : text, image

padding : 안 여백

border : 테두리

margin : 바깥 여백

 

border(테두리)를 기준으로

* [padding] : 안쪽 여백

* [margin] : 바깥쪽 여백 (element 외의 영역)

 

*** 기본으로 margin / padding을 가지고 있는 element들을 초기화

/* 기본 margin, padding을 가지고 있는 element 초기화 */

 

/* "*" 아스테리크 : 모든 element 지칭 */

* {

  margin: 0;

  padding: 0;

}

 

** margin은 element 바깥의 여백

: margin은 겹치게 된다 (block level)

 

 

[box-model과 전체 너비]

.box2 {

  width: 600px;

}

기본적으로 설정 시 content만의 너비가 600px로 설정된다.

 

.box3 {

  box-sizing: border-box;

}

box-sizing: border-box; 을 하면

border, padding을 포함한 border까지의 총 넓이가 600px으로 설정된다.

 

             

 

 

[padding] 입력방식

 /* ========= padding =========*/

  /* top right bottom left */

  padding: 10px;

  padding: 100px 50px;

  padding: 100px 50px 10px;

  padding: 100px 50px 10px 1px;

 

[margin]

padding방식과 동일

 

< inline >

span 태그에 width, height 값을 줘도 적용 되지않는다.

: inline은 content에 맞춰서 크기가 지정된다.(너비,높이 지정은 block에 하는 것)

: inline에 padding은 좌/우만 먹힌다. (위아래 X)

: inline에 margin은 겹치지 않고 좌/우만 먹힌다. (위아래 X)

***! 따라서 inline을 block으로 바꾸는 속성

-> [display: block;]

* 한 라인 안에 들어오려면 inline속성이 있어야 하고,

** 크기 조정이 되려면 block속성이 있어야 하므로

-> [display: inline-block;

 

< background >

element에 직접 투명도 조절을 하는 용도

- opacity : 불투명도 (0 ~ 1) 0:완전 투명

: 하위개체에 상속가능

 

[image 넣기]

css에서

[background-image]

- background-image: url(/이미지 파일 링크/);

- ../ : 상위 폴더

- . : 현재위치

 

이미지는 좌측상단 영역부터

 

** css를 통해 이미지를 넣어주면 기본적으로 이미지가 반복된다.

[이미지 반복제어]

[background-repeat]

repeat : (기본)반복

no-repeat : 반복x

repeat-x : x축만반복

repeat-y : y축만반복

 

[이미지 위치지정]

[background-position]

- 가로 x 세로 입력

(left/center/right x top/center/bottom)

ex) background-position: center center;

 

- 수평(왼/오) x 수직(위/아래) [%]

left         top            0%     0%

center       center         50%    50%

right        bottom         100%   100%

ex) background-position: 91% 5%;

 

- 수평(왼/오) x 수직(위/아래) [px]

left         top            0px    0px  기준 px만큼이동

ex) background-position: -580px 450px;

 

-    음수 값(-)도 가능 (이미지가 잘릴 위험이 있다)

-    center를 맞추기 위해서는 수치 계산이 필요

 

** 개발자 도구에서 움직여서 수치 미리 계산해 볼 수도 있음.

 

 

[이미지 고정]

[background-attachment]

scroll : (기본)스크롤바 이동에 따라 스크롤 됨

fixed : 스크롤바 움직여도 고정

 

[background shorthand]

[문법]

*** background-color

background-image

background-repeat

background-attachment

background-position

속성 포함

ex)

 background:

#0ff url(../img/piggy-bank-2889042_1280.jpg) no-repeat 100% 100% ;

background로 img 삽입시 width, height 크기를 지정해줘야 한다.

 

 

[background-size]

영역은 작고 이미지는 큰 상황 해결

 

- 가로, 세로 꽉 차게

ex)background-size : 100% 100%;

비율이 깨진 상태 : 권장 X

 

- 가로는 꽉 차고 세로는 비율 유지(잘림)

ex)background-size : 100% auto;

 

- 세로는 꽉 차고 가로는 비율 유지(여백 생김)

ex)background-size : auto 100%;

 

- 이미지가 비율을 유지하는 한도 내에 가장 크게

(이미지 잘리는 부분 생길 수 있다.)

ex)background-size : cover;

 

- 비율을 유지하면서, 이미지가 크기 내에 꽉 차게

(여백 생길 수 있다.)

ex)background-size : contain;

 

- px 값으로 임의로 이미지 크기를 조절할 수도 있다.

ex)background-size : 150px 150px; (center center)

 

*** 보통은 이미지들을 한 파일에 모아두고

background-position통해 여러 부분에서 이용

ex) 네이버

top menu 버튼 이미지를 활용하기 위한 속성들

 

실제실습