TIL-wecode day-3 CSS중요부분 정리

kyj2471·2020년 11월 18일
0

WECODE 15기

목록 보기
3/27

👍position

position이란?

position이란 속성은 문서상에서 요소들을 배치하는 방법이다.
주로 top,right,bottom,left속성이 요소들을 배치할 최종위치를 결정한다.

🍎static

요소를 문서의 흐름에 따라 배치한다. top,right,bottom,left와 같은 속성에 영향을 미치지 않는다.

🍎relative

간단히 설명하면 위치를 계산할때 static의 원래위치부터 계산한다.
요소를 문서의 흐름에 따라 배치하며 자기 자신을 기준으로 top,right,bottom,left의 값에 따라 오프셋을 적용한다. 오프셋의 다른 요소에 영향을 주지 않으며 페이지 레이아웃에서 차지하는 공간은 static일때와 같다.

🍎absolute

원래 위치와 상관없이 위치를 지정할 수 있다. 다만 가장 가까운 부모 요소에 대해 상대적으로 배치된다. 만약 부모 요소 중 위치 지정 요소가 없다면 초기 컨테이너 블록을 기준으로 삼는다.

🍎fixed

원래 위치와 상관없이 위치를 지정할 수 있다. absolute와 다르게 부모요소에 영향을 받지 않아서 화면이 바뀌어도 고정된 위치를 설정할 수 있다.
쉽게 생각해 브라우저 화면에 상대위치 기준으로 결정된다.

inline, block, inline-block

🍎inline

inline은 display속성이 inline으로 지정된 것으로 전후 줄바꿈이 없이 한줄에 다른 엘리먼트들과 배치됩니다.
대표적 inline엘리먼트로는 < span >,< a >,< em > 태그 등을 볼 수 있습니다.
코드로 예를 들면

before
<a>WE</a>
<span>code</span>
<em>fighting</em>
after

라고 쳤을때 결과값으로는 모든 결과값이 한줄에 나란히 나열되서 출력되는걸 확인 할 수 있습니다.
👹주의👹 inline엘리먼트를 사용하면 width, height속성은 무시되고 margin, padding속성은 좌우 간격만 반영되고 상하 간격은 반영되질 않는다.

🍎block

block은 display속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가서 다른 엘리먼트들을 다른 줄로 밀어내 혼자 한줄을 차지한다.
대표적 block 엘리먼트로는 < div >, < p >, < h1 >태그를 볼 수있다.
코드로 예를 들면

before
<h1>WE</h1>
<div>code</div>
<p>Team</P>
after

라고 쳤을떄 결과값은 줄바꿈을 되어서 여러줄에 출력됩니다.
또한 inline과는 다르게 width,height,margin,padding속성이 모두 반영됩니다.

🍎inline-block

inline-block속성으로 지정된 엘리먼트는 기본적으론 inline처럼 줄바꿈 없이 한줄에 다른 엘리먼트들과 나란히 배치됩니다.
하지만 inline과 다르게 width,height의 속성 지정이 가능하며 padding,margin속성의 상하 간격 지정또한 가능합니다.
대표적인 inline-block은 < button >, < select >태그 등이 있습니다.
코드로 실습해 보면
html

before
<a>we</a>
<span>code</span>
<em>fight</em>
after

css

span{
	display:inline-block;
    background: green;
    width:100px;
    height:70px;
    margin:20px;
    padding:30px;
}

inline-block을 활용하면 여러개의 엘리먼트들을 원하는 너비만큼 배치 시켜줄수 있기에 래이아웃에 활용할 수 있다.

float에 대해서

🍎float

css 속성 float은 어떠한 요소가 보통 흐름으로부터 빠져나가 텍스트나 inline요소가 그주위를 감싸는 자기의 컨테이너의 좌우측을 따라 배치됨을 말한다.
css에서 정렬을 위해 사용되는 속성인float은 문서,사진,그림 등과 같은 것들을 왼쪽 오른쪽으로 띄워 정렬을 하거나 각 객체의 왼쪽이나 오른쪽으로 정렬하여 전체 문서를 layout할때 도 사용할 수 있습니다.

🍎float의 속성값

none-기본값---띄우지 않음.
left/right-왼쪽에띄움/오른쪽에 띄움.
inline-start-요소가 자신을 포함하는 블록의 시작점에 부동해야 함을 나타내는 것이다.
inline-end-블록 끝쪽에 부동해야함을 나타냄.

🍎float속성값 사용해보기

<img src="wecode.png" style="float:right;">

와 같이 사용해볼 수 있습니다.

💯💯💯위코드3일차 를 마무리하며...💯💯💯

profile
🐶영재의 낭만 코딩🐶

0개의 댓글