[CSS] CSS 정리

 

🚀 CSS 기본 정리

 

 

 

    🔽  Tag 속성 ID, Class

먼저 319 번째 줄을 알아보자면 위에 div tag에 id값으로 contentWrap을 준 것이에요. Tag에 id로 이름을 주었다면 `#`을 앞에 붙여 사용하고, 원칙적으로 하나의 객체에만 적용할 수 있는 것이에요.

#아이디{ 속성1:속성값; 속성2:속성값; }

참고 자료 : https://ofcourse.kr/css-course/id-class-%EC%84%A0%ED%83%9D%EC%9E%90

 

만약 id가 아닌 class로 이름을 주었다면 앞에 `#`이 아닌 `.`을 붙여 사용하며, 여러 객체에 사용을 할 수 있는 것이에요.

.클래스명{ 속성1:속성값; 속성2:속성값 }

참고 자료 : https://ofcourse.kr/css-course/id-class-%EC%84%A0%ED%83%9D%EC%9E%90

 

 

 

    🔽  Position

320번째 줄 position은 Tag를 어디에 위치 시킬지 정하며 아래 5가지 값을 갖는 것이에요.

참고 자료 : https://ofcourse.kr/css-course/position-%EC%86%8D%EC%84%B1

• static: 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며, 위치를 임의로 설정할 수 없다.
• absolute: 절대 좌표와 함께 위치 지정 가능
• relative: 원래 있던 위치를 기준으로 좌표 지정
• fixed: 스크롤과 상관없이 항상 문저 최 좌측 상단을 기준으로 좌표 고정
• inherit: 부모 태그의 속성값 상속

좌표를 지정 해 주기 위해서 `left`, 'right`, `top`, `bottom` 속성과 함께 사용하는 것이에요.

참! `position`에 `abloute`나, `fixed`로 설정 시 가로 크기가 100%가 되는 `block` 태그의 특징은 사라지는 것이에요.

 

 

    🔽  display

321번째 줄 display는 요소를 어떻게 보여줄지 결정할 때 사용하는 것이에요.

주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다른 것이에요.

• none : 보이지 않음
• block: Bolck Box
• inline: Inline Box
• inline-block: block과 inline의 중간 형태

주니하랑은 block을 사용했는데, div, p, h(#), li 태그 등이 이에 해당 하는 것이에요.

이 친구는 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보이게 해 주는 것이에요. 이는 Work 같은 문서에서 문단을 표시할 때, 한 문단이 끝난 뒤에 나타나는 요소는 항상 다음 줄에 표시되는 것과 같은 것이에요.

<style>
.block1{ width: 300px; border: 3px solid #333 }
.block2{ width: 200px; border: 3px solid #999 }
</style>

<div class="block1">1</div>
<div class="block2">2</div>
hello​

 

출력 결과

 

 

 

    🔽  width, height

322 ~ 323번째 줄 width와 height는 각각 가로 길이, 세로 길이를 의미하는 것이에요.

값을 정의할 때 "100px" 처럼 숫자 뒤에 단위를 표시하여 적는 것이에요.
(주니하랑 처럼 px(픽셀)이 아닌, '100%' 처럼 % 단위로 설정 가능)

이 친구는 `<span>` 등 inline 요소는 적용되지 않는데, 이는 display 속성을 참고 하면 좋은 것이에요.

 

324번째 줄 min-height는 요소의 최소 높이를 설정하는 것이에요. 이 친구는 height 속성의 사용값이 자신의 값보다 작아지는 것을 막아 준답니다!

 

참고 자료 : https://developer.mozilla.org/ko/docs/Web/CSS/min-height

 

min-height가 max-height 또는 height보다 커지면 요소의 높이는 min-height 값을 사용하게 되는 것이에요.

반응형

 

 

    🔽  Overflow

325번째 줄 overflow는 단축 속성이고, 요소의 Contents가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때 처리 방법을 제시하는 것이에요. overflow-x, overflow-y의 값을 설정 할 수 있답니다!

참고 자료 : https://developer.mozilla.org/ko/docs/Web/CSS/overflow

• visible: contents 요소가 지정한 크기 보다 클 때, 넘친 contents를 그대로 노출
  콘텐츠를 자르지 않으며 안쪽 여백 상자 밖에도 그릴 수 있습니다.
  
• hidden: 넘친 contents를 보이지 않게 숨겨 버림
  콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라냅니다. 스크롤바를 제공하지 않고, 스크롤할 방법(드래그, 마우스 휠 등)도 지원하지 않습니다. 코드를 사용해 스크롤할 수는 있으므로 (offsetLeft (en-US) 속성 설정 등), 이 상태의 요소도 스크롤 컨테이너입니다.
  
• clip: hidden과 마찬가지로, 콘텐츠를 안쪽 여백 상자에 맞춰 자릅니다. 그러나 clip은 코드를 사용한 스크롤링도 방지하므로 어떠한 스크롤도 불가능합니다. 이 상태의 요소는 스크롤 컨테이너가 아니며, 새로운 블록 서식 문맥도 생성하지 않습니다. 서식 문맥이 필요하다면 display:flow-root을 사용할 수 있습니다.
• scroll: scroll을 만들어 주어 넘친 contents를 확인할 수 있게 만들어 줌
  콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라냅니다. 브라우저는 콘텐츠를 실제로 잘라냈는지 여부를 따지지 않고 항상 스크롤바를 노출하므로 내용의 변화에 따라 스크롤바가 생기거나 사라지지 않습니다. 프린터는 여전히 넘친 콘텐츠를 출력할 수도 있습니다.
  
• auto: 자동으로 설정
  사용자 에이전트가 결정합니다. 콘텐츠가 안쪽 여백 상자에 들어간다면 visible과 동일하게 보이나, 새로운 블록 서식 문맥을 생성합니다. 데스크톱 브라우저의 경우 콘텐츠가 넘칠 때 스크롤바를 노출합니다.

 

위의 작성한 것처럼 적용 가능한 방법은 잘라내기, 스크롤바 노출, 넘친 컨텐츠 그대로 노출 등이 있는 것이에요.

visible(기본값)이 아닌 다른 값으로 Overflow 속성을 사용할 경우 새로운 블록 서식 문맥을 생성하는 것이에요. 이는 기술적인 요구사항으로 만약 스크롤 하는 요소와 float가 교차한다면 각 스크롤 단계마다 내용물을 강제적으로 다시 감싸게 될 것이에요. 이러면 결국 스크롤 속도를 느리게 만들 것이랍니다.

이 친구의 효력을 갖기 위해서는 블록 레벨 컨테이너의 높이(height 혹은 Max-height)를 설정하거나, white-space를 nowrap으로 설정해야 하는 것이에요.

이 친구는 속성을 하나 또는 두 개를 사용해야 하는 것이에요. 두 개를 사용한 경우 첫 번째 값을 `overflow-x`가 되고, 두번째 값은 `overflow-y`가 되는 것이에요. 하나만 사용한다면 지정한 값은 양 축 모두 적용 된답니다!

 

 

 

    🔽  margin

margin은 Box Modle의 요소와 요소 사이의 여백을 설정하는 친구인 것이에요.

이 친구를 이해 하기 전 블록 요소와 인라인 요소를 이해해야 하는 것이에요.

마진 속성은 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정하는 것이에요.
이러한 마진 영역은 패딩 영역과는 달리 `background-color` 속성으로 설정하는 배경색의 영향을 받지 않는 것이에요. CSS를 사용하면 마진 영역의 크기를 방향별로 따로 설정 할 수 있답니다!

참고 :&nbsp;http://www.tcpschool.com/css/css_boxmodel_margins

 

마진(margin) 속성

CSS에서는 HTML 요소의 마진 영역을 설정하기 위해 아래와 같이 속성을 제공하는 것이에요.

• margin-top
• margin-right
• margin-bottom
• margin-left

마진 속성값을 음수로 설정하여 해당 요소를 다른 요소의 위에 겹칠 수도 있는 것이에요.

 

예제 코드

<style>

div.mar {

    margin-top: -25px;

    margin-right: 10px;

    margin-bottom: 30px;

    margin-left: 100px;

}

</style>

 

마진 속성값을 inheit로 설정하면 부모(parent) 요소의 margin 속성값을 그대로 물려 받는 것이에요.

 

예제 코드

<style>

    div.parent { height: 100px; margin-left: 100px; }

    div.child { background-color: #FFF8DC; margin-left: inherit; }

</style>