CSS:위치와 모양 - 편집 역사

2021년 6월 9일 (수) 13:35에 Sam님의 편집

2021-06-09T13:35:39Z

← 이전 판		2021년 6월 9일 (수) 13:35 판
96번째 줄:		96번째 줄:
	margin: auto;		margin: auto;
	\|-		\|-
	\|부속물들 중앙정렬		\|부속물들 중앙정렬(서브축 정렬)
	\|부속물들을 한 태그 안에 나열해 두면 그 크기에 따라 제각각 자리잡는다. 이를 방지하기 위한 속성.		\|부속물들을 한 태그 안에 나열해 두면 그 크기에 따라 제각각 자리잡는다. 이를 방지하기 위한 속성.
	위아래 위치를 잡아준다.		위아래 위치를 잡아준다.
	\|align-~~items~~: center;
			center, end, space-between(요소별로 여백 나눠주기) 등 정렬을 정한다.
			\|align-content: center;
	\|-		\|-
	\|부속물들 중앙정렬		\|부속물들 중앙정렬(메인축 정렬)
	\|좌우 위치를 잡아준다.		\|좌우 위치를 잡아준다.
			위와 같은 옵션값을 넣을 수 있다.
	\|justify-content: center;		\|justify-content: center;
	\|-		\|-
108번째 줄:		111번째 줄:
	\|해당 영역 안에서 우측에 붙이고 싶을 경우. 좌측 여백을 자동으로 지정하게 주면 된다.		\|해당 영역 안에서 우측에 붙이고 싶을 경우. 좌측 여백을 자동으로 지정하게 주면 된다.
	\|margin-left: auto;		\|margin-left: auto;
	\|}		\|}<br />
	=모양속성=		=모양속성=

Sam: /* 위치 옮기기 */

2021-06-04T01:06:16Z

위치 옮기기

← 이전 판		2021년 6월 4일 (금) 01:06 판
98번째 줄:		98번째 줄:
	\|부속물들 중앙정렬		\|부속물들 중앙정렬
	\|부속물들을 한 태그 안에 나열해 두면 그 크기에 따라 제각각 자리잡는다. 이를 방지하기 위한 속성.		\|부속물들을 한 태그 안에 나열해 두면 그 크기에 따라 제각각 자리잡는다. 이를 방지하기 위한 속성.
			위아래 위치를 잡아준다.
	\|align-items: center;		\|align-items: center;
			\|-
			\|부속물들 중앙정렬
			\|좌우 위치를 잡아준다.
			\|justify-content: center;
	\|-		\|-
	\|우측에 붙이기		\|우측에 붙이기

2021년 6월 4일 (금) 01:01에 Sam님의 편집

2021-06-04T01:01:24Z

@@ 125번째 줄: / 125번째 줄: @@
 |box-sizing:
 |-
+|자식 크기가 클 때
+|자식 크기가 부모크기보다 클 때 어떻게 처리할지를 결정한다.
+{| class="wikitable"
 |}

Sam: /* 위치 속성 */

2021-06-03T13:26:24Z

위치 속성

← 이전 판		2021년 6월 3일 (목) 13:26 판
99번째 줄:		99번째 줄:
	\|부속물들을 한 태그 안에 나열해 두면 그 크기에 따라 제각각 자리잡는다. 이를 방지하기 위한 속성.		\|부속물들을 한 태그 안에 나열해 두면 그 크기에 따라 제각각 자리잡는다. 이를 방지하기 위한 속성.
	\|align-items: center;		\|align-items: center;
			\|-
			\|우측에 붙이기
			\|해당 영역 안에서 우측에 붙이고 싶을 경우. 좌측 여백을 자동으로 지정하게 주면 된다.
			\|margin-left: auto;
	\|}		\|}
	=모양속성=		=모양속성=

Sam: /* 경계면 */

2021-06-03T13:21:33Z

경계면

← 이전 판		2021년 6월 3일 (목) 13:21 판
161번째 줄:		161번째 줄:
	\|}		\|}

	===~~경계면~~===		===경계선===
	{\| class="wikitable"		{\| class="wikitable"
	!의도		!의도
193번째 줄:		193번째 줄:
	\|밖으로 튀어나온 것처럼 보인다.		\|밖으로 튀어나온 것처럼 보인다.
	\|}		\|}
			투명하게 처리하고 싶다면 색에 transparent를 기입하자.
	\|-		\|-
	\|모서리 둥글게		\|모서리 둥글게

2021년 6월 3일 (목) 13:16에 Sam님의 편집

2021-06-03T13:16:31Z

← 이전 판		2021년 6월 3일 (목) 13:16 판
70번째 줄:		70번째 줄:
	\|}		\|}

	=== 위치 옮기기 ===		===위치 옮기기===
	{\| class="wikitable"		{\| class="wikitable"
	!의도		!의도
95번째 줄:		95번째 줄:

	margin: auto;		margin: auto;
			\|-
			\|부속물들 중앙정렬
			\|부속물들을 한 태그 안에 나열해 두면 그 크기에 따라 제각각 자리잡는다. 이를 방지하기 위한 속성.
			\|align-items: center;
	\|}		\|}
	=모양속성=		=모양속성=

	=== 크기지정 ===		===크기지정===
	{\| class="wikitable"		{\| class="wikitable"
	!의도		!의도
115번째 줄:		119번째 줄:
	\|태그의 크기를 계산하여 지정할 필요 없이 전체 크기를 지정한다.		\|태그의 크기를 계산하여 지정할 필요 없이 전체 크기를 지정한다.
	(내부 요소들은 자동계산)		(내부 요소들은 자동계산)
	\|box-sizing:		\|box-sizing:
	\|-		\|-
	\|		\|
122번째 줄:		126번째 줄:
	\|}		\|}

	=== 여백 ===		===여백===
	{\| class="wikitable"		{\| class="wikitable"
	!의도		!의도
157번째 줄:		161번째 줄:
	\|}		\|}

	=== 경계면 ===		===경계면===
	{\| class="wikitable"		{\| class="wikitable"
	!의도		!의도
195번째 줄:		199번째 줄:
	\|}		\|}

	=== 투명도 ===		===투명도===
	{\| class="wikitable"		{\| class="wikitable"
	!의도		!의도

Sam: /* 모양속성 */

2021-06-02T13:24:26Z

모양속성

차이 보기

2021년 6월 2일 (수) 12:56에 Sam님의 편집

2021-06-02T12:56:55Z

@@ 2번째 줄: / 2번째 줄: @@
 =위치속성=
-<syntaxhighlight lang="html">
+<br /><syntaxhighlight lang="html">
 <style>
      .box{
@@ 11번째 줄: / 11번째 줄: @@
 </style>
 </syntaxhighlight>position에 지정한다.
 {| class="wikitable"
 !위치

Sam: 새 문서: {{CSS}} =위치속성= position에 지정한다. {|...

2021-06-02T12:56:04Z

새 문서: {{CSS}} =위치속성= <syntaxhighlight lang="html"> <style> .box{ ... position: 옵션; ... } </style> </syntaxhighlight>position에 지정한다. {|...

새 문서

{{CSS}}

=위치속성=
<syntaxhighlight lang="html">
<style>
.box{
...
position: 옵션;
...
}
</style>
</syntaxhighlight>position에 지정한다.
{| class="wikitable"
!위치
(기본값 static)
!relative
!absolute
!fixed
|-
|용도
|absolute의 기준점을 잡기 위해 주로 사용한다.
|상위의 요소를 기준으로 위치를 잡아주기 위해 사용.
|팝업창처럼 브라우저 내에서 고정된다.
|-
|위치기준
|자신
|부모(상위 태그. 기준태그가 relative를 갖고 있어야 한다.)
(없으면 브라우저까지 찾아 올라간다.)
|브라우저
|-
|위치
|
|x축과 y축을 지정해주어야 한다.
left 속성과 top 속성 등이 필수.

%로 지정이 가능한데, 왼쪽 상단을 기준으로 위치가 정해진다.

(정확히 가운데에 두고 싶으면 margin-left:-50%; 등을 이용해 위치 조정.)

(margin에 퍼센트 사용이 가능한가? 보통은 transform:translate(-50%,-50%)를 이용한다.)

transform:translateY(-50%)로 한 축에 대해서만 지정도 가능하다.
|absolute와 동일.
|}
=모양속성=
{| class="wikitable"
!의도
!설명
!방법
|-
|모서리 둥글게
|사각형 버튼 따위의 모서리를 둥글게 만든다.
|border-radius: 크기;
|}