[학습일지]JAVA교육일지 9일차

6장 CSS 필수 속성 다루기

​

6.1) CSS의 특징

6.1.1 기본 스타일 시트 : html 태그 자체에는 꾸미는 기능이 없지만, 웹브라우저 자체에 기본 스타일 시트가 내장돼 있음

​

6.1.2 적용 우선순위와 개별성

​

기본 스타일 시트에 정의된 스타일 속성보다 사용자가 정의한 스타일 속성이 우전 적용됨​

CSS = Cascading Style Sheets 단계적으로 적용되는 스타일

단계적으로 적용되어 결국 마지막에 영향을 주는 하나의 스타일만 적용됨

CSS의 개별성 규칙 점수에 따라 결정

선택자	예	점수
전체 선택자	*	0
태그 선택자	div, p, h1	1
가상 요소 선택자	::before, ::after	1
클래스 선택자	.box, .title	10
가상 클래스 선택자	:hover, :visited, :link	10
아이디 선택자	#title, #main	100
인라인 스타일	style="color:red"	1,000

개별성 점수가 같을 때는 무조건 나중에 작성된 css코드가 적용됨

!important - 10,000점

​

6.1.3 상속

부모요소의 css속성을 자식요소가 물려받아 그대로 적용되는 현상

​

6.1.4 단위

​

* 절대단위 : px(픽셀)

​

* 상대단위

• % : 해당 속성의 상위 요소 속성값에 상대적인 크기를 가짐
• em : 부모 요소의 텍스트 크기에 상대적인 크기를 가짐, 부모 폰트크기의 배수가 됨 ex) 2em 이면 2배
• rem : html 태그의 텍스트 크기에 상대적인 크기를 가짐, 1rem = html캐그의 텍스트 크기의 1배, 16px
• vw : 뷰포트의 너비를 기준으로 상대적인 크기를 가짐
• vh : 뷰포트의 높이를 기준으로 상대적인 크기를 가짐

​

6.1.5 색상 표기법

* RGB 표기법 : 값을 256개 숫자(0~255)로 표기, 가장 낮은 색 값은 0, 높은 색 값은 255

rgb(red, green, blue)

rgba(red, green, blue, alpha) - 투명도 알파값은 0~1 사이의 소수점으로 표기

​

* 16진수 표기법

#RRGGBB

​

​

6.2) 텍스트 속성으로 텍스트 꾸미기

​

6.2.1 font-family

: 글꼴 지정, 콤마로 구분한 글꼴을 차례대로 적용하여 보여주려 함, 한글이름으로 된 글꼴이나 글꼴 이름에 공백이 있을때 " "로 묶어 표현

​

font-family : 글꼴1, 글꼴2, ... 글꼴 유형(지정한 글꼴이 사용자에게 없을때 쓰일 글꼴);

​

* 글꼴 유형

• serif
• sans-serif
• monospace
• fantasy
• cursive

​

​

6.2.2 font-size​ : 폰트크기 지정

font-size : 크기 ;

폰트 크기 단위 : px, rem, em 주로 사용

​

6.2.3 font-weight : 텍스트의 굵기 지정

font-weight : 숫자표기법 or 키워드 표기법 ;

​

* 숫자 표기법 : 100 ~ 900까지 100단위로, 숫자가 낮을 수록 얇음

* 키워드 표기법 : normal (400과 같은 굵기), bold (700과 같은 굵기), lighter (부모 요소 보다 얇게), bolder (부모 요소 보다 굵게)

​

​

6.2.4 font-style : 글꼴의 스타일 지정

font-style : 속성값 ;

• normal : 기본형
• italic : 이탤릭체
• oblique : 기울임꼴

​

6.2.5 font-variant : 영문 텍스트를 크기가 작은 대문자로 변경​​

font-variant : 속성값 ;

• normal : 변환X
• small-caps : 크기가 작은 대문자로 변환

​

6.2.6 color : 텍스트 색상 지정

color : 속성값 ;

​

​

6.2.7 text-align : 텍스트 정렬

text-align : 속성값 ;

• left : 왼쪽 정렬
• center : 중앙 정렬
• right : 오른쪽 정렬
• justify : 양쪽 정렬

​

​

6.2.8 text-decoration : 텍스트에 선 긋기

text-decoration : 속성값 ;

• none : 텍스트 장식 모두 지움 , a태그에 기본 스타일 지울 때 주로 사용
• line-through : 텍스트 중간을 관통하는 선 긋기
• overline : 텍스트 위에 선 긋기
• underline : 텍스트 아래에 선 긋기

​

6.2.9 letter-spacing : 자간 조절

letter-spacing : normal | 크기 ;

​

6.2.10 line-height : 텍스트 한줄의 높이 지정, 행간, 폰트사이즈 위쪽과 아래쪽의 여유공간

line-height : normal | 속성값(숫자,%,크기 등) ;

• normal : 기본값
• 숫자 : 현재 font-size 값에 입력한 숫자를 곱한 값 적용
• % : 현재 font-size 값에 입력한 비율을 곱한 값 적용
• 크기 : 입력한 크기 적용

​

​

6.3) 박스 모델을 구성하는 속성

​

* 박스모델의 구성요소

• margin : 요소의 외부 여백
• border : 요소의 테두리(경계선)
• padding : 요소의 내부 여백
• content : 요소의 내용

​

6.3.1 margin : 외부여백

margin-top : 크기 ;

margin-right : 크기 ;

margin-bottom : 크기 ;

margin-left : 크기 ;

margin : margin-top margin-right margin-bottom margin-left ;

margin : margin-top&bottom margin-right&left ;

margin : top&right&bottom&left ;

​

* margin 겹침 현상 : 인접한 margin 값이 둘 중 더 큰 값으로 통일되는 것

ex) 두 요소 사이의 간격이 20px과 30px 일때 합한 50px일 것 같지만, 실제로는 30px이 적용

​

*인라인 요소는 margint-top과 margin-bottom 지정 못함

​

6.3.2 border : 요소의 테두리(경계선)

border : border-width border-style color ;

​

* border-width : 테두리 굵기, 단위를 포함한 크기로 표현

​

* border-style : 테두리 모양

• none : 테두리 없음
• hidden : 테두리 감추기
• solid : 실선 테두리 , 실무에서 자주 사용
• double : 이줄 실선 테두리
• dotted : 점선 테두리
• dashed : 긴 전선 테두리
• groove : 파인 것 같은 테두리
• ridge : 테두리가 튀어나온 것 처럼 그림
• inset : 테두리를 요소가 파인 것 처럼
• outset : 테두리를 요소가 튀어나온 것처럼

​

6.3.3 padding : 내부 여백

padding-top : 크기 ;

padding-right : 크기 ;

padding-bottom : 크기 ;

padding-left : 크기 ;

padding : padding-top padding-right padding-bottom padding-left ;

padding : padding-top&bottom padding-right&left ;

padding : top&right&bottom&left ;

​

6.3.4 content

​

width : 크기 ; (컨텐츠 영역 너비 지정)

height : 크기 ; (컨텐츠 영역 높이 지정)

​

* box-sizing : 속성값 ;

• content-box : width,height 속성의 적용 법위를 content영역으로 제한
• border-box : 박스모델의 너비, 높에서 border 크기까지 포함

​

6.3.5 박스 모델의 성격과 display 속성

* display : 속성값; (박스 모델의 성격을 바꿈)

• 속성값 : block, inline, inline-block

​

​

6.4) 배경 속성으로 요소의 배경 설정

​

6.4.1 background-color : 배경색 지정

background-color : 색상값 ;

​

6.4.2 background-image : 배경에 이미지 넣기

background-image : url('이미지 경로') ;

​

6.4.3 background-repeat : 이미지 반복 설정을 바꿀 때 사용

background-repeat : 속성값 ;

• no-repeat : 반복X
• repeat-x : 가로 방향으로 반복
• repeat-y : 세로 방향으로 반복
• repeat : 가로, 세로 방향으로 반복
• round : 이미지를 반복하되 이미지가 요소에 딱 맞도록 크기 조절
• space : 이미지가 잘리지 않도록 반복

​

6.4.4 background-size : 배경 이미지 크기 지정

background-size : 속성값 ;

• auto : 이미지 크기 유지
• cover : 이미지 크기 요소에 꽉 채울 수 있도록 확대하거나 축소
• contain : 비율을 유지하면서 이미지가 배경 요소 안에 들어가도록 크기를 확대하거나 축소
• 너비 높이 : 크기 직접 지정

​

6.4.5 background-position : 배경 이지미 위치 설정

background-position : x위치 y위치 ;

위치	속성값	설명
x	left, center, right	x축(가로)방향 위치 지정
y	top, center, bottom	y축(세로)방향 위치 지정
공통	px, rem, em, %	위치 직접 지정

​

6.4.6 background-attachment : 이미지를 스크롤 할때 이미지의 작동 방식

background-attachment : 속성값 ;

• local : 이미지가 같이 스크롤 됨
• scroll : 이미지가 요소에서는 고정, 웹브라우저에서는 스크롤
• fixed : 스크롤해도 이미지 고정

​

6.4.7 background 속성으로 한 번에 지정하기 : 권장x, 각 속성 따로 지정 하는 것을 권장

​

​

6.5) 위치 속성으로 HTML요소 배치

html 요소를 기본 흐름에서 벗어나서 원하는 곳에 배치하는 속성, 위치 속성

​

6.5.1 position : html요소를 기본 흐름에서 벗어나 좌푯값에 따라 배치

position : 속성값 ;

• static : 기본 흐름에 따라 배치, 기본값
• relative : 기본 흐름에 따라 배치하지만, 좌표 속성 사용 가능, 기준점이 요소의 왼쪽 위 모서리

- 좌표속성 : top(위쪽 기준), right(오른쪽 기준), bottom(아래쪽 기준), left(왼쪽 기준)

• absolute : 기본 흐름에서 벗어나 절대적인 좌표 위치에 배치, 기준점이 웹 브라우저의 왼쪽 위 모서리, 요소를 움직이면 요소가 원래 있던 공간은 빈 공간으로 인식됨, top이나 bottom속성을 지정하지 않으면 left나 right속성은 원래 위치에서 x축(가로)방향으로만 움직임
• fixed : 절대적인 좌표 위치에 고정, 스크롤해도 해당 위치에 고정
• sticky : 기본 흐름에 따라 배치하지만, 지정한 좌표의 임계점에 이르면 화면에 고정됨

​

* z-index : 속성값 ;

배치한 요소의 z축 위치 지정, 요소들의 앞뒤 배치를 바꾸고 싶을때 사용, 숫자가 클 수록 앞에 배치, 기본값은 0

​

6.5.2 float : 요소를 배치하는 또 다른 방법

float : 속성값 ;

• none : 적용X
• left : 요소를 공중에 띄워 왼쪽에 배치하면서 다음에 오는 요소를 주변에 자연스럽게 배치
• right : 요소를 공중에 띄워 오른쪽에 배치하면서 다음에 오는 요소를 주변에 자연스럽게 배치

​

- 이미지와 텍스트 요소 배치

​

- 블록 요소를 인라인 요소처럼 배치 : 요소를 공중에 띄워 배치하는 것이라 대상이 있던 위치를 빈 공간으로 인식, float속성이 적용된 요소는 width속성이 지정되지 않으면 요소가 가진 콘텐츠 만큼 넓이 자동 조정됨, float속성이 적용된 대상끼리는 서로의 위치를 제대로 인식할 수 있음.

​

- float 속성 사용시 주의 사항 : 부모요소가 float가 적용된 자식 요소를 제대로 인식하지 못함 <- clear 속성 or overflow 속성 사용

​

6.5.3 clear : float속성 해체할 때 사용

clear : 속성값 ;

• left : float의 left값 해제
• right : float의 right값 해제
• both : float의 left, right 값 모두 해제

​

- 자식요소가 부모요소에 감싸져 있는 형태라면 ::after 가상 요소 선택자로 clear 속성 적용 할 수 있음

​