[카테캠 3주차] CSS 속성

개요

속성

• HTML 속성 (Attributes)
• CSS 속성 (Properties)
• JS 속성 (Properties)

HTML 이랑 CSS, JS의 속성 영어 용어가 다르구나~ 정도로 알아두면 좋을 듯. 구분하면 유식해 보일 수도.. 

 

 

너비(width, height)

width 와 height 의 기본값은 auto 이다.

직접적으로 값을 주고 싶다면 px, em, rem, vw, vh 를 사용하면 된다.

 

 

인라인 요소의 auto 값

인라인 요소의 auto 값은 width , heigth 모두 요소의 콘텐츠 크기만큼 자동으로 할당된다.

 

 

 

블록 요소의 auto 값

블록 요소의 auto 값은 width 의 경우 부모 요소의 크기 만큼 자동으로 늘어난다.

height 같은 경우 콘텐츠의 크기 만큼 자동으로 줄어든다.

 

 

 max-width, max-height

요소가 커질 수 있는 최대 가로/세로 너비

max-width 와 max-height 의 기본값은 none 이다.

 

 

min-width, min-height

요소가 작아질 수 있는 최소 가로/세로 너비

min-width 와 min-height 의 기본값은 0 이다.

 

 

Q) width와 height 속성의 역할은?

내생각 : 개발자 요소를 원하는 너비로 조정할 수 있도록 한다.

 

width 는 요소의 가로 너비

height 는 요소의 세로 너비

 

Q) width와 height 속성의 기본값은?

width 와 height 모두 Auto

 

Q) max-width와 max-height 속성의 기본값은?

둘다 none

 

Q) min-width와 min-height 속성의 기본값은?

둘다 0

 

 

CSS 단위

 

상대적 백분율 %

예시를 통해서 알아보자.

아래 예시에서 child 는 parent 의 자식 요소이다.

따라서 child의 width 에 100% 를 주게 되면 부모의 넓이 만큼 width 를 가지게 된다.

 

 

그러면 width를 50% 로 주면 어떻게 될까?

바로 부모의 width 의 50% 에 해당하는 값이 child 의 width 가 된다.

(height 도 동일) 

 

 

브라우저 폰트 기본값

브라우저는 font-size 가 할당 되어있지 않으면 기본값으로 font-size: 16px 을 가진다.

 

 

em

em 은 요소가 가지는 font-size 를 1em 으로 가진다.

따라서 HTML 에 기본 폰트값은 16px 이고, 이전에 이러한 폰트값은 상속된다고 하였으니 별다른 font-size 가 할당되어있지 않은 .child 요소의 font-size 는 16px 이 된다. 

이와 같은 이유로 아래 예시에서는 1em = 16px 이 되고, 10em 은 160px 이 된다.

 

 

rem

em 을 사용했을 때는 각 요소마다 font-size 가 정해져있는 경우 또는 font-size의 상속이 발생하는 경우 내가 원하는대로 값을 주기에 번거로움이 있다. 

* 통일성이 없다고 해야할까? 어떤 요소는 10px 로 되어있을 수도 있고 어떤 요소는 16px 로 되어있을 수도 있고 이런경우에는 1em 이 같는 값이 모두 다르기 때문이다.

 

rem 을 사용하면 이러한 문제점을 해결할 수 있다. 왜냐? rem 은 root(HTML 태그)의 font-size 를 1rem 의 단위로 사용하기 때문이다.

 

 

vw, vh

width: 50vw 로 값을 주면, 전체 뷰포트의 가로 넓이가 100vw 이므로 절반 만큼의 너비를 가지게 된다.

(vh도 동일하다.)

 

 

 

Q) em 단위의 기준은?

em 단위를 사용하는 요소의 font-size 를 1em 으로 정합니다.

 

 

Q) 0px 과 0vw 중 더 큰 값은?

둘다 0 인데 더 큰 값이 있을리가~

 

0 이라는 값을 표현할때는 단위를 붙이지 않고 0 으로 표현한다.

* 흠 그러면 프로젝트 진행할 때 0 vs 0px 어떤게 좋을까? 찾아보니까 성능적인 이점도 미미해서 팀원과 맞춰야하는 컨벤션 부분인 것 같다. 나는 아마 0으로 하자고 할듯 이유는? 짧아서 ㅋㅋ 정말 짧다는 이유밖에 없다.

 

이러한 질문을 오픈채팅방에 드려봤다. 결과는~ 정말 컨벤션적인 문제 고수분들도 0 또는 0+단위로 의견이 분분하다.

 

 

외부 여백(margin)

• 기본값은 0 이다.
• auto 로 값을 설정하면 가운데 정렬에 사용된다.
• 특별하게 margin 에는 음수 값을 줄 수있다. 이 경우에는 양수값의 반대로 동작한다.

 

 

 

단축 속성

margin 은 상하좌우 값을 margin 하나의 속성으로 나타낼 수 있는 단축 속성을 가진다.

 

 

단축 속성을 사용하지 않고 한 방향에만 단일으로 margin 을 줄 수도 있다.

 

 

Q) margin: 40px 30px 20px; 

위 코드에서 30px 은 어느 방향을 의미하는가?

좌우를 의미합니다~

 

Q) margin: 20px 10px; 

위 코드에서 20px 은 어느 방향을 의미하는가?

위 아래 를 의미합니다~

 

 

내부 여백(padding)

• 기본값은 0 이다.
• padding 을 사용하면 요소의 크기가 커진다.

 

 

 Padding 을 사용하면 요소의 크기가 커진다.

다음과 같은 요소가 있다. 

첫번째 .item class 를 가지는 요소에 padding 을 주면 어떻게 될까?

 

 

padding 영역이 추가되어 요소의 크기가 커진 것을 확인할 수 있다.

 

 

단축 속성

 

Q) padding 속성의 역할은?

요소의 내부 여백을 할당할 수 있다. 

 

Q) padding: 20px 10px 40px 30px

위 코드에서 30px은 어느 방향을 의미하는가?

왼쪽 여백을 의미한다.

 

Q) padding 속성의 특징은?

모르겠는데? padding 값을 부여하면 요소의 크기가 커진다.

 

 

테두리 선(border)와 색상 표현

테두리선 설명에 앞서 강사님이 중요한 것을 알려주셨는데, 코드는 독창적이여서는 안된다. 최대한 대중적으로 많이 쓰는 방식으로 코드를 작성해야한다. 대중적으로 코드를 작성해야 추후 내가 아닌 사람도 유지보수가 가능하기 때문이다. 

 

물론~ 독창적인 코드가 그만큼의 따당한 이유가 있으면 가능하겠지만.

 

 

border 를 사용하면 요소의 크기가 커진다.

아래 예시를 보면 border: 10px 로 인해 요소의 크기가 커진 모습을 볼 수 있다.

 

 

border 의 단축 속성

 

 

색상 표현 방법

 

 

강의를 통해 색상 이름을 사용하는 경우 '브라우저마다 색상 이름에 할당되는 색의 값이 상이할 수 있다.' 라고 언급을 해주셔서 이를 지양해야할 근거가 생긴 것 같다. RGBA 또한 Alpha(투명도)가 사용되는 경우 해당 값을 사용해야하는 것도 알게되었다.

 

하지만 HEX 와 RGB 와 같은 경우 어떠한 경우에 선택을 해야하는지 타당한 근거가 생각나지 않아 매니저님께 질문 드렸다.

답변을 정리해보면 투명도가 자주 사용되지 않는이상 코드가 짧고, 색상 팔레트 추천이 HEX 로 제공되기 때문에 HEX 로 사용하게 될 것이라는 답변이였다. 만약 투명도가 자주 사용된다면 RGBA 를 사용할 것 같다는 말씀도 해주셨다.

 

Q) border 속성의 특징은?

border를 사용하면 요소의 크기가 커지는 특징이 있다.

 

Q) 두께 2px, 종류 실선, 색상 빨강의 테두리 선을 코드로 작성하시오!

border: 2px solid red;

 

모서리 둥글게(border-radius)

border-radius 의 단축 속성

오.. 왜 몰랐던거 같지 

 

단축 속성 순서는 다음과 같다.

 

 

Q) 요소의 모서리를 깍기 위한 속성은?

border-radius

 

 

크기 계산 (box-sizing)

 

 

기본적인 .item 의 CSS 는 다음과 같다.

 

 

만약 첫번째 요소에 border 과 padding CSS 를 적용하면 어떻게 될까?

앞서 배웠듯이 border 과 padding 를 적용하면 요소의 크기가 커진다.

 

 

가로크기 변화에 대해서만 설명해보면 border:4px 이므로 왼쪽 4px + 오른쪽 4px 총 8px 이 늘어나고,

padding:10px 가 적용되면 왼쪽 10px + 오른쪽 10px 총 20px 이 늘어나기때문에 

원래 100px + 28px 되어 128px 이 된다.

 



그런데~ 나는 요소가 100px 의 크기를 가지길 원한다.

그러면 border 와 padding 으로 인해 요소의 크기가 커질 것 까지 고려하여 width: 52px , height: 52px 로 두어야할까?

이렇게 일일이 계산하기는 쉽지 않은 일이다.

그럴때 사용할 수 있는 속성이 box-sizing: border-box 이다. 

 

box-sizing: content-box

Content 를 기준으로 width 와 height 가 정해진다.

 

 

box-sizing: border-box

border, padding, content 모두 고려된 영역을 기준으로 width 와 height 가 정해진다.

 

 

Q) width: 100px; padding: 20px; border: 1px solid red;

위 코드가 지정된 요소의 실제 가로 너비는?

142px

 

Q) width: 100px; padding: 20px; border: 1px solid red; box-sizing: border-box;

위 코드가 지정된 요소의 실제 가로 너비는?

100px

 

Q) box-sizing 속성의 기본값은?

content-box

 

 

overflow

 

overflow 의 기본값은 visible 이기 때문에 넘친 자식요소가 그대로 보이는 모습이다.

 

 

overflow: hidden 일때는 자식요소가 잘려 안보인다.

 

 

overflow: scroll 을 하면 스크롤이 생긴다.

다만 scroll을 사용할 경우 세로 영역은 넘침이 발생하지 않지만 스크롤이 생기는 모습이다. 

이러한 것을 막기 위해 auto 사용이 권장된다.

와 이것도 모르고 사용하고 있었네.

 

 

따라서 overflow: auto 를 사용하면 넘치는 부분만 스크롤이 생성된다.

 

 

 

개별 속성으로 제어 가능

 

Q) 요소 넘침을 잘라낼 때 사용하는 속성과 값은?

overflow:hidden;

 

Q) overflow 속성의 기본값은?

overflow: visible

 

 

출력 특성(display)

 

Q) HTML <a></a> 에 가로 너비를 지정하기 위해 사용해야 하는 속성과 값은?

display: block;