국비교육 5일차 일지 -css

국비교육 5일차 학습 일지

오늘도 css를 학습하였다. 

 

 

[chapter 02 테두리 관련 속성]

2=> 5px(위, 아래) 2px(왼, 오른쪽)

3=> 3px(위) 5px(왼,오른쪽) 7px(아래) 

4=? 3px(위) 5px(오른쪽) 7px(아래) 10px(왼)

----------------------------------------------------------------------

1. border-style 속성

: 테두리 종류를 설정하는 속성

 

속성 값                                                                          설명

solid	실선
dotted	점선
dashed	긴 점선
double	두 줄 실선(굵기가 적어도 3px 이상)
none	테두리를 치지 않음
groove, ridge, inset, outset	각종 액자 형태의 테두리
hidden	테두리를 숨기다 (none과비슷)

 

2.border-width 속성

: 테두리 두께 지정하기

:  thin < midium < thick 순서로 두께가 가늘다

속성                                                                                                                                               설명

border-top-width	위쪽 두께
border-right-width	오른쪽 두께
border-bottom-width	아래쪽 두께
border-left-width	왼쪽 두께
border-width	한번에 표시
boder-width: 5px 10px (위아래 / 왼쪽오른쪽)
border-width: 5px 10px 15px 20px (위 오 아래 왼)

3. background-color 속성

: 테두리 색상 지정

 

4. border-radiant

: 박스 모서리를 둥글게 만드는 속성

 

2=>(대각선방향) 5px(왼쪽위 오른쪽 아래) 5px(오른쪽위, 왼쪽 아래)

4=>(나란히방향)5px 5px 0 0 

원모양으로 그리기 : width, hight 크기보다 값을 크게 100%~이상

 

속성                                                                           설명

border-radius	네 방향의 모서리를 한꺼번에 둥글게
border-top-left-radius	왼쪽 위 둥글게
border-top-right-radius	오른쪽 위 둥글게
border-bottom-left-radius	왼쪽 아래 둥글게
border-bottom-right-radius	오른쪽 아래 둥글게

 

5. box-shadow

박스에 그림자 효과를 넣어주는 효과

왼쪽으로 방향 x축 음수, y축으로 올라가면 음수

6. border-img 속성

: 테두리에 무늬를 입할 수 있다.

: round, repeat, stretch 세 가지 특성이 있다.

round, repeat : 모서리 처리만 약간 다른 패턴 반복하는 형태

stretch : 패턴을 늘려서 채워주는 형태

 

7. out-line 속성

: border 영역 외곽에 테두리를 치는 속성

: 두께가 늘어나도 주변에 공간을 확보하지 않으므로 레이아웃이 흐트러지지 않게 영역 밖에 테두리를 표시할 뿐이다.

: outline-style, outline-width, outline-color를 네 면에 공동으로 적용된다.(따로 따로 불가능)

:border와 outline의 간격을 outline-offset으로 조절가능

 

[ chapter 03 색상과 배경을 위한 스타일 ]

1. 웹에서 색상 표현 방법

:RGB, HEX(투명도 조절 X)를 가장 많이 사용

: 파일 용량을 미세하게 줄일 수 있으므로 HEX 코드 단위 많이 사용

: HEX는 흰색을 FFFFFF, 검정색을 000000으로 사용

: Alpha : 0.0부터 1.0 사이의 숫자를 입력 (0.0- 완전히 투명, 1.0-불투명), %단위도 사용 가능

 

2. background-image 속성

: 배경 이미지 지정하는 속성

: 웹에서 사용가능한 이미지 파일은 jpg, gid, png 

: 이미지가 배경보다 작을 경우 반복되서 표시됨

: 용량이 큰 이미지는 속도를 저하시키는 요인이 되기도 하므로 배경에 해상도가 크거나 큰 이미지는 꼭 필요한 경우가 아니면 사용하지 않는다.

3.background-repeat 속성

: 배경 이미지 반복 방법 지정하는 속성

속성                     설명

repeat	배경 이미지를 반복하게 지정 (기본값)
no-repeat	배경 이미지를 반복하지 않도록 지정 (배경이미지가 한번만 표시)
repeat-x	배경 이미지를 x축으로만 반복
repeat-y	배경 이미지를 y축으로만 반복

4.background-position 속성

: 배경 이미지 위치 조절하는 속성

*키워드 표시법

1. 가로위치 : left, right, center

2. 세로위치 : top, bottem, center

3.background-position : center , center는 줄여서

backgroind-position:center

4.백분율(%)표시법

5.길이 (px) 표시법

 

5.background-size 속성

: 배경 이미지 크기를 조절하는 속성

 

속성값 설명

auto	원래 배경 이미지 크기만큼 표시
contain	- 배경 이미지를 잘리지 않도록 배치하고 남은 공간은 비움

• 이미지의 원래 비율을 유지함. | | cover | - 배경 이미지를 빈공간 없이 요소에 꽉 채우고 나머지는 잘림
• 이미지의원래 비율을 유지함. | | %, px, em, rem, vw, hw | 배경 이미지가 들어갈 요소 크기를 지정하면 그 크기대로 축소/확대 |

 

6. background-attachment 속성

: 배경이미지를 고정하는 속성

속성 값                   설명

scroll	화면 스크롤과 함께 배경도 스크롤 됨 (기본값)
fixed	배경은 고정되고 화면은 스크롤 됨

 

7.background 속성

: 위에서 사용한 속성을 순서대로 축약하여 사용

1) background-color

2) background-image

3) background-repeat

4) background

5) background

6) background

- 반드시 모든 속성을 사용 할 필요는 없다.( 생략 가능 )

*background-size는 별개로 써주어야 한다!

예) background : #ccc url(./이미지 경로) no-repeat right center fixed

background-size : cover;

 

[chapter 04 레이아웃을 위한 스타일]

1. width 속성과 height 속성

: 요소의 가로/세로 크기를 말하며 기본적으로 여백(padding)과 테두리(border)를 포함하지 않는다.

: width 값을 정해주지 않으면 기본 값이 가로 100%

: px-고정크기 / %- 부모객체 따른 상대 크기

: min-width, min-height, max-width, max-height

속성 값                                                                                             설명

width	가로 너비
height	세로 높이
min-width	최소 너비
min-height	최소 높이
max-width	최대 너비
max-height	최대 높이

 

 

 예) width : 200px height : 300px padding : 10px border : 2px

*셀제로 브라우저에서 보여지는 가로 크기

: width(200px)+padding(10px+10px)+border(2px+2px) ->224px

*실제로 보여지는 세로 크기

: height(300px)+padding(10px+10px)+border(2px+2px) ->324px

 

*

1-> 4개 면에 동일한 값

2->10px(위, 아래), 20px(왼, 오른)

3->5px(위) 10px(왼,오른)  20px(아래)

4->3px(위) 5px(오른) 7px(아래) 10px(왼)

 

2. margin 속성과 padding 속성

- margin: 컨텐츠의 바깥쪽 여백을 지정하는 속성

- padding: 컨텐츠의 안쪽 여백을 지정하는 속성

 

 

속성           설명

px	너비나 높이 값을 고정단위로 설정
%	박스 모델을 포함하고 있는 부모 요소 기준으로 너비나 높이값을 자동으로 설정
auto	display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정

 

3.float 속성

: 웹 요소를 문서 위에 떠 있게 만든다.

: 블록 요소와 인라인 요소에 사용 가능

: float 다음에 오는 요소는 float의 영향을 받기 때문에 반드시 float를 해제 시켜야 한다!!

속성 값                     설명

left	해당 요소를 왼쪽으로 배치
right	해당 요소를 문서의 오른쪽으로 배치
none	좌우 어느 쪽으로도 배치하지 않는다.

 

4.clear 속성

: float 속성에서 결정한 좌우 정렬을 해제시키는 속성

속성 값                              설명

left	left의 속성을 해제
right	right의 속성을 해제
both	left와 right의 속성을 해제