멋쟁이사자 FE7 5일차

css 선택자 우선순위

후자우선의 원칙

• 동일한 선택자에 동일한 속성이 사용되었을 경우 뒤에 적힌 속성을 따름

구체성의 원칙

선택자의 구체적임에 따라 우선순위

1. inline 스타일 속성
2. id #
3. class., 가상 클래스, 속성선택자
4. type(tag), 가상 요소 선택자

 

중요성의 원칙

! important 

다른 css의 어떤 선언 보다도 우선한다.

 

block

block 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지합니다. 즉, 해당 요소의 너비가 100%라는 의미.

width, height 크기를 지정할 수 있고, padding, border, margin 속성을 사용할 수 있습니다.

블록요소는 인라인 요소 안에 중첩될 수 없지만, 인라인 요소는 블록 요소 안에 중첩될 수 있습니다

div , p , ul , ol , li , dl , dt , dd , h1 ~ h6 , pre noscript , table , hr , form , blockquote , address , fieldset

 

inline

항상 블록 레벨 요소 내에 포함됨

화면에 표시되는 영역만큼만 차지

width, height 크기를 지정할 수 없고, padding, border, margin 속성을 사용할 수 있지만, 상하 margin 속성은 사용 x

a , span , img , input , strong , samp , var , cite , abbr q , sub , sup , select , b , strong , em , ins , u , i , textarea

 

width

요소의 너비를 설정

auto : 기본값. 요소의 부모 크기 기준으로 가득 채우기

min-content : 최소 너비

max-content : 콘텐츠 내용의 선호 너비

 

padding, margin

top, right, bottom, left 순으로 작성한다.

 

padding: 10px 20px 30px 40px;
margin: auto 0 auto auto;

<!-- 가운데 배치 -->

p{
	width: 400px;
	margin: auto; 
}

<!-- 오른쪽 배치 -->

p{
	width: 400px;
	margin: auto 0 auto auto;
}

 

margin auto는 수평 정렬을 할 수 있지만, 세로 정렬을 적용할 수는 없습니다!

 

box-sizing

content-box : 기본값. width, height에 border, padding 포함하지 않음

border-box : width, height에 border, padding 포함 ( width = 콘텐츠 너비 + border + padding )

 

overflow, overflow-x, overflow-y

박스보다 콘텐츠가 더 커 콘텐츠가 넘칠 경우 어떻게 처리할지를 지정.

• visible: 기본값. 박스를 넘는 콘텐츠를 자르지 않습니다.
• hidden: 요소의 크기만큼 맞추기 위해 잘라냅니다. 스크롤바를 제공하지 않습니다.
• scroll: 요소의 크기만큼 잘라내고, 스크롤을 제공합니다.
• auto: 자동으로 콘텐츠가 넘칠 경우 스크롤바를 노출합니다

 

border-radius

상자의 모서리를 둥글게 처리합니다.

top, right, bottom, left 순으로 작성한다.

 

background

background-attachment

• fixed : 뷰포트에 고정
• local : 요소 콘텐츠에 대한 고정. 스크롤 존재 시 배경도 함께 스크롤됨
• scroll : 배경요소 자체에 대한 고정. 스크롤 존재 시 배경은 스크로 안 됨

 

background-clip: 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할지 지정.

• 배경을 잘라냄
• border-box / padding-box / content-box

 

background-position: 배경의 위치를 설정

 

background-repeat: 배경 이미지를 어떻게 반복할 것인지 설정합니다.

• repeat: 반복
• no-repeat : 반복하지 않음
• repeat-x : x축으로만 반복
• repeat-y: y축으로만 반복

background-size

• contain : 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정합니다. 여백이 발생할 수 있습니다.
• cover : 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정합니다. 이미지의 가로세로비가 요소와 다르다면 이미지를 세로 방향 또는 가로 방향으로 잘라내어 여백이 생기지 않도록 설정합니다

.bg {
      background: skyblue url(./images/main-visual.jpg) no-repeat 50% 50% / cover;
      
      background-color: skyblue;
      background-image: url(./images/main-visual.jpg);
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: cover;
}

 

box-shadow

속성 첫 번째 값두 번째 값세 번째 값네 번째 값다섯 번째 값

아래와 같이, box-shadow 속성은 4 개의 숫자와 색상 값을 지정합니다. .shadow { 　　-moz-box-shadow: 3px 3px 3px 3px #999; 　　-webkit-box-shadow: 3px 3px 3px 3px #999; 　　box-shadow: 3px 3px 3px 3px #999; 　　}

수평 방향의 그림자 오프셋 길이를 나타냅니다. 양수 값을 지정하면 오른쪽에, 음수 값을 지정하면 왼쪽에 그림자가 생깁니다.

수직 그림자 오프셋 길이를 나타냅니다. 양수 값을 지정하면 박스 아래에, 음수 값을 지정하면 박스 위에 그림자가 붙습니다.

그림자의 흐림 반경(blur radius)을 나타냅니다. 음수 값을 지정할 수는 없습니다. 값이 클수록 그림자의 끝이 흐려지고, 값이 "0"이면 그림자 끝이 흐려지지 않고 선명한 그림자가 됩니다.

그림자의 확산 거리(Spread distance)를 나타냅니다. 양수 값을 지정하면 그림자의 전방위로 확대되고, 음수 값을 지정하면 그림자의 크기가 줄어 듭니다. 양수 값을 지정하면 오른쪽에, 음수 값을 지정하면 왼쪽에 그림자가 붙습니다.

그림자의 색상 (color)을 지정합니다.

opacity

불투명도를 설정합니다.

0-1 사이의 숫자를 지정할 수 있습니다. (0: 투명 - 1: 불투명)

 

img

image. 문서에 이미지를 삽입합니다

src : 경로

alt : 대체 텍스트. 이미지에 대한 설명

•    src에 지정한 이미지를 제대로 불러오지 못했을 때 alt 값에 적힌 내용을 보여줍니다.

!! 이미지 하단에 빈 공간이 생길 시, 아래와 같은 초깃값을 넣어주면 된다.

 

img{
	vertical-align:top;
}

 

figure, figcaption

이미지에 캡션을 달고 싶을 때 사용

<figure> 요소를 도입할 시  이미지와 캡션을 연결할 수 있다.

 

<figure>
	<img src="images/baby.jpg" alt="작성자">
	<figcaption>
		안녕하세요
	</figcaption>
</figure>