'2020/추가 공부(search, book...)' 카테고리의 글 목록

출처 : https://www.daleseo.com/css-position-absolute/

[CSS] Absolute Postion - 자유로운 엘리먼트 배치

Engineering Blog by Dale Seo

www.daleseo.com

엘리먼트를 기본적으로 브라우저 화면(viewport) 상에서 어디든지 원하는 위치에 자유롭게 배치시킬 수 있으며, 심지어 부모 엘리먼트 위에 겹쳐서 배치할 수도 있습니다.
단, 상위 엘리먼트 중에 position 속성이 relative인 엘리먼트가 있다면, 그 중 가장 가까운 엘리먼트의 내부에서만 엘리먼트를 자유롭게 배치할 수 있습니다. 즉, 전체 화면이 아닌 해당 상위 엘리먼트를 기준으로 offset 속성(top, left, bottom, right)이 적용됩니다.

출처 : https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1

(CSS) CSS 포지션(position) - static, relative, absolute, fixed

안녕하세요! 이번 시간에는 지난 시간에 다루지 못했던 포지션에 대해 알아보겠습니다! 양이 조금 많고, 중요한 내용이기 때문에 따로 뺐습니다. 포지션이란 이름처럼 태그들의 위치를 결정하는 CSS입니다. static 일단 모든 태그들은 처음에 position: static

www.zerocho.com

relative가 static인 상태를 기준으로 주어진 픽셀만큼 움직였다면,

absolute는 position: static 속성을 가지고 있지 않은 부모를 기준으로 움직임.

만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됨.

출처: https://webisfree.com/2014-03-24/[css]-position-%EC%86%8D%EC%84%B1%EC%9D%B4-absolute%EC%9D%B8-%EA%B2%BD%EC%9A%B0-%EC%83%81%EC%9C%84-%EB%A0%88%EC%9D%B4%EC%96%B4-%EB%98%90%EB%8A%94-%EC%A0%84%EC%B2%B4-%EC%9C%88%EB%8F%84%EC%9A%B0-%EA%B8%B0%EC%A4%80-%EC%A0%95%EB%A0%AC%EB%B0%A9%EB%B2%95

[CSS] position 속성이 absolute인 경우 상위 레이어 또는 전체 윈도우 기준 정렬방법

안녕하세요. position 속성이 absolute인 경우 정렬을 맞추는 방법입니다. 해당 요소의 position이 absolute일때 정렬하는 방법은 relative와는 다른 방법을 사용해야 합니다. absolute일 경우의 특징을 고려해서 레이아웃을 설정해야 하는데요... 1. position 속성이 absolute? ; absolute 속성이 되는 경우 주변의 다른 레이어 객체들과 상관하지 않은채 정렬이 가능하게 됩니다. 예를 들어 position이

webisfree.com

바로 한단계 상위 레이어를 기준으로 정렬하는 방법
; 이 때는 선택된 레이어가 top, bottom, left, right 속성을 가져서는 안됨. 그렇게 되면 전체 윈도우를 기준으로 정렬되기 때문에 margin값을 사용하여 레이어를 이동해야만 가능.

하지만, 상위 레이어를 기준으로 정렬할 때 left, right, top, bottom을 사용할 수 있는 방법이 있음. 그렇게 하려면 부모 요소의 position 속성에 relative 값을 추가해주면 가능.

'2020 > 추가 공부(search, book...)' 카테고리의 다른 글

마진 vs 패딩 (0)	2020.04.11
태그, 엘리먼트... (0)	2020.04.11
CSS ㅡ 위치 (2) (0)	2020.04.11
CSS ㅡ 위치 (1) (0)	2020.04.11
하이퍼링크 (0)	2020.04.11

출처 : http://v2.eyoom.net/bbs/?t=1xX

이윰넷-상상 그이상을 꿈꾸며

이윰빌더는 쉽고 빠르게 홈페이지를 제작할 수 있는 홈페이지 빌더입니다.

eyoom.net

Margin : 가까이 오지 마(ma)!~

Padding : 넌 내 마음을 후벼 파(pa)잖아!~

margin은 나를 중심으로 밀어 내는 성향

padding는 내 안쪽으로 향하는 성향

1) 숫자가 4개일 때 => margin: 10px 20px 30px 40px

해석) 나를 중심으로 시계 방향으로 바깥쪽 여백을 할당합니다.

1번위치 (top) : 위쪽 여백을 10px 만큼 자리를 확보 하세요.

2번위치 (right) : 오른쪽 여백을 20px 만큼 자리를 확보하세요.

3번위치 (bottom) : 아래쪽 여백을 30px 만큼 자리를 확보하세요.

4번위치 (left) : 왼쪽 여백을 40px 만큼 자리를 확보하세요.

2) 숫자가 3개 일 때 => margin : 10px 20px 30px

해석) 나를 중심으로 시계 방향으로 바깥쪽 여백을 할당합니다.

1번위치 (top) : 위쪽 여백을 10px 만큼 자리를 확보 하세요.

2번위치 (right) : 오른쪽 여백을 20px 만큼 자리를 확보하세요.

3번위치 (bottom) : 아래쪽 여백을 30px 만큼 자리를 확보하세요.

4번위치 (left) : ?? 숫자가 없는데요? 그럼 반대쪽인 2번위치 (right)에 할당된 20px 만큼 자리를 확보하면 됩니다.

3) 숫자가 1개와 auto가 있을 때 => margin : 10px auto

해석) 나를 중심으로 시계 방향으로 바깥쪽 여백을 할당합니다.

1번위치 (top) : 위쪽 여백을 10px 만큼 자리를 확보 하세요.

2번위치 (right) : auto 인데요? 그렇습니다. 자동으로 오른쪽 여백을 잡아 줍니다.

3번위치 (bottom) : 반대편 위치인 1번위치(top) 숫자인 10px 만큼 확보하면 됩니다.

4번위치 (left) : 그렇습니다. 반대쪽 2번위치의 auto가 됩니다. 그럼 자동으로 왼쪽 여백을 잡아 줍니다.

결국 위/아래는 10px 이며, 좌/우는 auto 이고 좌/우 여백이 동일할 수밖에 없는 방법은 내가 가운데로 가면 됩니다.

그래서 위와 같은 설정은

나를 가운데 정렬 (center)하시요.

와 동일한 의미를 같게 되는 겁니다.

출처 : https://coding-factory.tistory.com/187

[Html] Margin, Padding 속성의 차이점과 사용법

HTML이나 XML같은 언어를 사용하다보면 Margin과 Padding이라는 속성을 많이 보셨을겁니다. 몇몇분들은 이 두가지 속성의 의미를 잘 모르고 쓰시는 분들도 있더군요. 두 속성 다 여백을 주는 의미에서는 같지만...

coding-factory.tistory.com

'2020 > 추가 공부(search, book...)' 카테고리의 다른 글

포지션 (absolute) (0)	2020.04.12
태그, 엘리먼트... (0)	2020.04.11
CSS ㅡ 위치 (2) (0)	2020.04.11
CSS ㅡ 위치 (1) (0)	2020.04.11
하이퍼링크 (0)	2020.04.11

출처 : https://eproo.tistory.com/86

태그의 뜻과 요소와 속성 그리고 속성값 이란?1

태그의 응용 코딩문자 배우기 지난 시간에 이어서 HTML/CSS 에 기본적으로 많이 쓰이는 태그와 명령어를 가지고 예제를 만들어 응용 하는 공부를 해보도록 합니다. 이 페이지의 주요 목록 링크 이용 click Html He..

eproo.tistory.com

태그/태그의 종류

태그가 가지는 요소(element), 속성(attribute)

1. 태그

ex) <head> <body> <p>....

: 컴퓨터에 기록하는 언어들을 컨트롤하기 위한 각종 기호들

2. 요소

3. 속성

: 태그가 가진 기본 성질 안에 '잠재되어 있는' 성질

ex) 'a 태그의 속성 태그인 href' : 요소 없이 상위태그에만 완전히 종속하는 성질을 지님

*순서*

1. 태그의 기본 구조 : <열림태그></닫힘태그> 를 활용해서 -> 이 태그 요소에 지배 받는 문서를 만들어줌

2. 태그 속성을 살려주는 하위 태그 주기

<열림태그></닫힘태그>

<열림태그 element or 속성값=""></닫힘태그>

<열림태그 element or 속성값="">나타내줄 콘텐츠 내용</닫힘태그>

element..... 이해가 안간당

속성태그 = 상위태그가 가진 기본적 요소를 온전하게 '만들고 꾸며주는' 역할

ex) <table width="100px" heinght="100px"> 라면 테이블 표를 속성 태그를 통해서 꾸며주게 되는 것

cf) 100px 이런건 '속성값'이 되는것

cf) 복습하면 좋을 내용

'2020 > 추가 공부(search, book...)' 카테고리의 다른 글

포지션 (absolute) (0)	2020.04.12
마진 vs 패딩 (0)	2020.04.11
CSS ㅡ 위치 (2) (0)	2020.04.11
CSS ㅡ 위치 (1) (0)	2020.04.11
하이퍼링크 (0)	2020.04.11

'2020 > 추가 공부(search, book...)' 카테고리의 다른 글

포지션 (absolute) (0)	2020.04.12
마진 vs 패딩 (0)	2020.04.11
태그, 엘리먼트... (0)	2020.04.11
CSS ㅡ 위치 (1) (0)	2020.04.11
하이퍼링크 (0)	2020.04.11

'2020 > 추가 공부(search, book...)' 카테고리의 다른 글

포지션 (absolute) (0)	2020.04.12
마진 vs 패딩 (0)	2020.04.11
태그, 엘리먼트... (0)	2020.04.11
CSS ㅡ 위치 (2) (0)	2020.04.11
하이퍼링크 (0)	2020.04.11

-