All Articles

[20191015 TIL] CSS 캐스케이딩 position 속성


2019-10-15 TIL

1. position: absolute --> float 함께 사용 X

position:relative;
float: left
position: absolute;
left: 0;

2. 형제간에 레이어 겹침 현상

형제1이 3차원(absolute) / 형제2 2차원(static) --> '레이어 겹침'
형제1 2차원(static) / 형제2 3차원(absolute) --> '레이어 겹치지 않음'

CSS 속성의 우선순위, 캐스케이딩

캐스케이딩은 다음 세 가지가 우선순위에 영향을 미칩니다.

  • CSS 속성이 입력된 순서

  • 선택자를 구체적으로 입력했는지 여부

  • type, id, class 선택자


1. CSS 속성이 입력된 순서에 따른 우선순위

다음과 같이 같은 선택자 안에 같은 속성을 적용했을 때는 마지막에 작성한 속성값이 우선으로 적용됩니다.


[ index01.html ]

<!DOCTYPE html>
<html>
<head>.....</head>
<body>
	<p>Hello World</p>
</body>
</html>

[ style01.css ]

p {
	color: red;
}

/*나중에 적용된 CSS 속성값의 우선순위가 높음*/
p {
	color: blue;
}

2. 선택자를 구체적으로 입력했는지 여부에 따른 우선순위


[ index02.html ]

<!DOCTYPE html>
<html>
<head>.....</head>
<body>
	<header>
		<h2>Nice to meet you</h2>
	</header>
</body>
</html>

[ style02.css ]

/*선택자를 구체적으로 작성할수록 우선순위가 높음*/
header h2 {
	color: blue;
}

h2 {
	color: red;
}

3. 선택자의 종류에 따른 우선순위

(인라인 방식) > id 선택자 > class 선택자 > type 선택자


[ index03.html ]

<!DOCTYPE html>
<html>
<head>.....</head>
<body>
	<h3 id="color" class="color">Welcome to CSS</h3>
</body>
</html>

[ style03.css ]

/*id 선택자가 class 선택자보다 우선순위가 높음*/
#color {
	color: blue;
}

.color {
	color: red;
}

h3 {
	color: green;
}

4. 인라인 방식 vs id 선택자


[ index04.html ]

<!DOCTYPE html>
<html>
<head>.....</head>
<body>
	<h3 style="color: pink;" id="color" class="color">Welcome to CSS</h3>
</body>
</html>

[ style04.css ]

/*pink로 적용. 인라인 방식이 id 선택자보다 우선순위가 높음*/
#color {
	color: blue;
}

.color {
	color: red;
}

h3 {
	color: green;
}


<img>와 background-image 차이

첫째, 이미지의 성격, 즉 정보성 이미지인지 장식용 이미지인지에 따라 구분할 수 있습니다.

정보성 이미지란 기업 로고나 기업 슬로건처럼 목적이 뚜렷한 이미지를 뜻합니다.

장식용 이미지는 웹 사이트를 돋보이게 하는 배경 이미지나 아이콘 등을 말합니다.

시작장애인이 사용하는 스크린 리더 프로그램은 기본적으로 HTML 문서만 읽을 수 있습니다. 따라서 background-image 속성으로 기업 로고를 삽입할 경우 해당 정보를 시각장애인에게 전달할 수 있는 방법이 없습니다.

그래서 정보성 이미지에는 <img> 태그를 사용 하고 장식용 이미지에는 background-image 속성을 사용 하는 것이 원칙입니다.


둘째, 이미지가 업로드되는 방식에 따라 구분할 수 있습니다.

<img> 태그는 기본값으로 원본 이미지 크기가 그대로 적용되므로 width와 height 속성을 변경해도 이미지가 잘리는 현상이 나타나지 않습니다.

반면, background-image 속성은 적용된 공간에 이미지를 끼워 넣는 개념이다 보니 공간보다 이미지 크기가 크면 이미지가 잘리는 현상이 나타납니다.

정리하면, background-image 속성은 액자 안에 사진을 넣는 개념으로 이해하는 것이 좋습니다. 액자보다 사진이 크면 액자 크기를 벗어난 부분은 잘릴 수밖에 없습니다. 반대로 액자보다 사진이 작으면 액자 안에 빈 공간이 생깁니다.



position 속성

static, fixed, relative, absolute

각 속성값의 특징은 다음 세 가지 조건으로 확인할 수 있습니다.

  • 부모 자식 간에 발생하는 마진 병합 현상 유무

  • top, right, bottom, left 속성 적용 유무

  • 부모가 높이를 갖고 있지 않을 때, 자식의 높이가 부모의 높이에 영향을 주는지 유무

우리가 보는 웹 사이트는 평면 세계로 보이지만 실제로는 2차원과 3차원이 혼합된 상태입니다. 포토샵에서 말하는 레이어(layer) 개념이 웹 사이트 제작에도 똑같이 적용됩니다.

2차원 특징을 갖는 position 속성값은 부모 자식 간에 발생하는 마진 병합 현상이 일어나고, top,right, bottom, left 속성을 사용할 수 없으며, 자식의 높이가 부모의 높이에 영향을 미칩니다.

반명, 3차원 특징을 갖는 position 속성값은 부모 자식 간에 발생하는 마진 병합 현상이 일어나지 않으며, top, right, bottom, left 속성을 사용할 수 있으며, 자식의 높이가 부모의 높이에 영향을 줄 수 없습니다.


1. 2차원 세계, static 속성

static 속성값은

  1. 부모 자식 간에 발생하는 마진 병합 현상이 일어나며,

  2. top, right, bottom, left 속성이 적용되지 않고,

    • position: static
    • top: 100px; //함께 사용할 수 없음*

  3. 부모가 높이를 갖고 있지 않을 경우에 자식의 높이가 부모에게 영향을 줍니다.

모든 HTML 태그는 기본적으로 position: static 상태입니다.


2. 3차원 세계, fixed 속성값

fixed 속성값은,

  1. 부모 자식 간에 발생하는 마진 병합 현상이 일어나지 않으며,

  2. top, right, bottom, left 속성이 적용되며,

  3. 부모가 높이를 갖고 있지 않더라도 자식의 높이가 부모에게 영향을 주지 않습니다.

fixed 속성값은 선택된 태그를 화면에 고정시킵니다.

3. 2차원과 3차원의 세계, relative 속성값

relative 속성값은 2차원과 3차원의 특징을 모두 갖는데,

  1. 부모 자식 간에 발생하는 마진 병합 현상이 일어나고,

  2. top, right, bottom, left 속성이 적용되며,

  3. 부모가 높이를 갖고 있지 않으면, 자식의 높이가 부모에게 영향을 줍니다.


4. 3차원의 세계, absolute

absolute 속성값은,

  1. 부모 자식 간에 발생하는 마진 병합 현상이 일어나지 않고,

  2. top, right, bottom, left 속성이 적용됩니다. 단, 부모의 position 상태에 따라 좌표 기준점이 달라집니다.

  3. 부모가 높이를 갖고 있지 않을 경우, 자식의 높이가 부모에게 영향을 주지 못합니다.

3차원의 세계, fixed 속성값과 다른 점은 absolute 속성값은 부모의 position 상태에 따라 좌표 기준점이 달라진다는 점 입니다.

즉, 부모가 static 속성값일 경우에 top, right, bottom, left 속성을 적용하면 좌표가 브라우저를 기준으로 형성됩니다.

반면, 부모가 relative 속성값일 경우에는 좌표 기준점이 부모로 바뀝니다.


position_chart.jpg


position_chart2.jpg



transform 속성

선택된 태그의 각도를 조정하고, 크기를 변경하고, 위치를 옮길 때 사용합니다. 자주 사용하는 속성값에는 rotate, scale, skew, translate 등이 있습니다.


선택된 영역의 각도를 조정하는 rotate()

transform:rotate(각도)

각도가 양수면 시계 방향, 음수면 시계 반대 방향으로 회전

transform: rotate(45deg);


선택된 영역의 크기를 비율로 조정하는 scale()

transform: scale(x, y);

첫 번째 숫자는 너비(width) 비율, 두 번째 숫자는 높이(height) 비율

원본 크기는 숫자 1을 기준으로 1보다 크면 확대하고, 1보다 작으면 축소합니다.


입체적으로 각도를 조정하는 skew()

transform: skew(x, y);

첫 번째 숫자는 x축, 두 번째 숫자는 y축을 뜻합니다.

x축의 각도 값이 양수면 오른쪽, 음수면 왼쪽

y축의 각도 값이 양수면 아래쪽, 음수면 위쪽으로 입력된 각도만큼 공간이 왜곡됩니다.

transform: skew(10deg, 20deg);


선택된 요소의 좌표를 조정하는 translate()

transform: translate(x, y);

첫 번째 숫자는 x축, 두 번째 숫자는 y축을 뜻합니다.

transform: translate(100px, 200px);



transition- 속성

transition 속성은 특정 조건에 따라 상태가 변하는 것을 뜻합니다.

예를 들면, 마우스 포인터를 올렸을 때, 크기가 커진다던지 색깔이 변하는 것을 말합니다.


[ index.html ]

<!DOCTYPE html>
<html>
<head>.....</head>
<body>
	<div id="transition"></div>
</body>
</html>

[ style.css ]

#transition {
	width: 300px;
	height: 300px;
	background-color: yellow;
	transition-property: width;
	transition-duration: 3s;
	transition-timing-function: ease;
	transition-delay: 1s;

	/*한 줄로 표현하면*/
	transition: width 3s ease 1s;
}

#transition:hover {
	width: 600px;
}

  1. transition-property 속성 은 변화를 주려는 CSS 속성을 말합니다. 속성을 쉼표로 구분하여 여러 개 지정할 수 있습니다. 변화를 주는 속성이 많을 때는 all을 속성 값으로 입력합니다.

  2. transition-duration 속성 은 변화가 일어나는 시간을 말합니다. 기본값이 0으로 설정되어 있으므로 꼭 명시해야 효과가 나타납니다.

  3. transition-timing-function 속성 은 변하는 속도를 어떻게 가속시키고 감속시킬지를 말합니다.

    • linear : 시작 지점부터 종료 지점까지 같은 속도로 변화
    • ease : 초반은 느리게, 중반은 빠르게, 종반은 느리게 변화
    • ease-in : 시작 지점의 변화가 천천히 진행
    • ease-out : 종료 지점의 변화가 천천히 진행
    • ease-in-out : 시작 지점과 종료 지점의 변화가 천천히 진행

  4. transition-delay 속성 은 변화가 시작되는 시간을 지연시킬 때 사용합니다. 기본값은 0s로 설정되어 있습니다.

[ style.css ]

#transition {
	width: 300px;
	height: 300px;
	background-color: yellow;

	/*한 줄로 표현하면*/
	transition: width 3s ease 1s;
}

#transition:hover {
	width: 600px;
}


패럴랙스 기능

패럴랙스는 웹 사이트를 스크롤할 때 생기는 시차를 이용하여 다양한 이벤트 효과를 적용한 기술입니다. 패럴랙스가 적용된 웹 사이트는 다음과 같습니다.



참고

  • 모두의 HTML5&CSS3 (길벗)

Published 15 Oct 2019

KingsoKingso
각자의 방식대로