> padding과 margin
padding : 박스 테두리와 안쪽 콘텐츠 사이의 여백
margin : 박스 테두리 바깥의 여백
- 패딩과 마진의 사용법 차이 예시)
버튼을 만든다고 가정 해 볼 때, 마진이 아닌 패딩까지만 버튼으로 인식한다.
마진은 박스 테두리 밖의 여백을 의미하기 때문에 클릭 가능한 여백이 아닌 것!!
반면 패딩은 테두리 안쪽의 여백을 의미하기 때문에 클릭할 수 있는 영역이 늘어나는 효과를 볼 수 있다.
> 길이, 크기를 표현하는 다양한 단위
width, height, font-size, padding, margin등 같이 길이, 크기를 표현하는 속성은 굉장히 많다.
자주 사용되는 단위 4가지
- 픽셀(px)
픽셀은 어떠한 상황에서도 변하지 않는 절대값을 의미
- em/rem
절대값인 픽셀과 달리, em과 rem은 상대값이다.
em은 상위(부모)요소의 글자 크기(font-size)를 1em으로 두고 계산하며,
rem은 최상위(html 태그) 요소의 글자 크기(font-size)를 1rem으로 두고 계산한다.
em과 rem은 도대체 왜? 언제? 누가? 사용할까?
- 반응형 웹사이트를 만들경우 px보다는 em, rem을 권장!
- 화면 크기가 변할 때 변해야하는 수치인가? = em, rem
- 화면 크기가 변해도 변하지 않는 수치인가? = px
em은 부모 요소에 영향을 받기 때문에 코드가 꼬일 확률이 높다.
따라서 주로 rem을 많이 사용하는 경향이 있다.(정답X)
- 퍼센트(%)
전체 크기 중에 비율로 설정할 수 있다.
일반적으로 폰트 크기보다는 너비나 높이 등에서 주로 사용이 된다.
주의해야 할 점은, 퍼센트에서의 비율도 상위 요소 기준이라는 것!!
> 반응형 웹(Responsive Web)이란?
다양한 사이즈의 디스플레이에 따라 자동으로 화면의 크기가 변하도록 만드는 것을 의미한다.
※참고사항
- 간혹 모바일 기기에서 주소가 바뀌는 사이트가 있다. (naver -> m.naver.com)
- 이 경우 모바일 용 웹사이트를 별개로 디자인/개발한 사례이므로 반응형이라고 하기 어렵다.
- 반응형 웹사이트의 경우 주소가 바뀌지 않고 화면 크기에 따라 디자인만 조금씩 변경된다.
> div VS span
"아니 도대체 div랑 span은 왜 쓰는거지? 차라리 h1, a, button 같은 거 쓰는게 낫지않아?"
실제로 그 어떤 태그보다도 div와 span이 많이 사용된다.
- div와 span의 차이
div는 자동으로 줄바꿈이 되고,
span은 줄바꿈 없이 나열 된다.
> 왜 div와 span 태그를 많이 사용할까?
h1, a, p, button, ul, li 등의 태그들은 기본적으로 여러가지 디자인 속성이 설정 되어있다.
div 태그에도 p와 똑같은 css속성을 직접 설정한다면 둘의 차이는 사라진다.
하지만 div나 span은 디자인의 자유도가 높기 때문에, 입맛대로 디자인 속성을 적용할 수 있는 백지 상태의 div나 span 태그를 주로 사용한다!
> display 속성
display 속성에 지정할 수 있는 속성 값은 block/inline-block/inline 이렇게 총 3가지 이다.
✅ display: block
display : block 의 대표주자 div 태그를 생각하면 된다!
기본적인 속성에서 width: 100% 이므로 한 줄 전체를 차지하게 된다.
width, height, margin, padding 값을 지정할 수 있다.
✅ display: inline
display : inline의 대표주자는 span 태그이다.
display: inline 속성을 가진 태그는 내부의 텍스트/콘텐츠의 크기만큼 공간을 차지하게 되므로,
width, height, margin(위, 아래), padding(위, 아래)은 지정할 수 없다.
다만, margin(좌, 우), padding(좌, 우)는 가능!!
✅ display: inline-block
간혹 div 태그를 한 줄 전체가 아니라 붙여서 사용하되,
width, height, margin, padding 속성을 모두 설정하고 싶을 때가 있다.
그럴 때에는 display: inline-block 속성을 적용하면 됨!
inline 처럼 텍스트/콘텐츠 크기만큼 차지하되, width, height, margin, padding 도 설정할 수 있다.
div 태그와 span 태그 둘 중에서는 div 태그가 더 보편적이며,
div 태그에 display: inline-block; 속성을 설정하여 사용하는 경우도 많다.
span 태그의 경우 주로 div 태그 내에서 색깔, 폰트 크기가 다른 글자가 들어가야 할 경우에 많이 사용된다.
> position 속성?
position 속성은 요소(태그)들을 어디에 배치할 지 결정하는, 즉 화면의 레이아웃을 만들때 유용하게 사용되는 속성이다.
position 속성값
- static 값
static 값은 모든 태그의 기본 position 속성이다.
즉, position 속성을 따로 설정하지 않았을 대의 기본 값!!
- relative 값
relative 값일 경우 상대적으로 위치를 지정할 수 있다.
static일 때의 원래 위치를 기준으로 상대 위치를 지정할 수 있다.
- absolute 값
absolute 값일 경우 position:relarie 속성인 상위 요소를 기준으로
상대 위치를 지정할 수 있다.
- fixed 값
fixed 값은 화면(디스플레이)을 기준으로 상대적인 위치를 설정할 수 있다.
