<!DOCTYPE html>
<html>
<head>
<style>
div {
/* 배경색의 지정: 콘텐츠 영역과 패딩 영역에 적용된다. */
background-color: lightgrey;
/* 콘텐츠 영역의 너비 */
width: 300px;
/* 패딩 영역의 두께 */
padding: 25px;
/* 테두리: 두께 형태 색상 */
border: 25px solid navy;
/* 마진 영역의 두께 */
margin: 25px;
}
</style>
</head>
<body>
<h2>Box Model</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
width / height 요소의 너비와 높이를 지정하기 위해 사용 → Content 영역을 대상으로 함. → 만약 width, height로 지정한 영역보다 실제 콘텐츠가 크면 content 영역을 넘치게 됩니다.
min-width / max-width : 최소 너비 / 최대 너비 지정
min-height / max-height : 최소 높이 / 최대 높이 지정
💡 box-sizing : width, height 프로퍼티 대상 영역을 변경할 수 있다. box-sizing 프로티의 값 content-box(기본값) → width, height 대상 영역이 content 영역을 의미 border-box : margin을 제외한 박스 모델 전체를 width, height 대상 영역으로 지정 가능
margin / padding 바깥 여백 / 안쪽 여백을 지정하는 프로퍼티 top, right, left, bottom 각 방향에 전부 지정 가능
💡margin을 모든 방향 한번에 줄 수 있고 따로 따로 줄 수 있는데 코드를 한 줄로 적을 수도 있고, 나눠서 적을 수도 있다.
margin: 25px; = top, right, bottom, left 전부 25px
margin: 25px 50px; = top, bottom 25px & left, right 50px
margin: 25px 50px 75px; = top 25px & left,right 50px & bottom 75px
margin: 25px 50px 75px 100px; = (순서대로) top 25px & right 50px & bottom 75px & left 100px
border-style 테두리 선의 스타일을 지정하는 데 사용
border-color 테두리 선의 색상을 지정
border-radius 테두리 모서리를 둥글게 표현할 때 사용
display
layout 정의에 자주 사용되는 아주 중요한 프로퍼티
프로퍼티값 키워드
설명
block
block 특성을 가지는 요소(block 레벨 요소)로 지정
inline
inline 특성을 가지는 요소(inline 레벨 요소)로 지정
inline-block
inline-block 특성을 가지는 요소(lnline-block 레벨 요소)로 지정
none
해당 요소를 화면에 표시하지 않는다. (공간조차 사라진다)
block (레벨) 요소 = display : block; 줄바꿈이 들어가 다른 요소들을 다른 줄로 밀어내고 혼자 한 줄을 차지함 ex) <div> <p> <h1> 등 width, height, margin, padding 속성이 모두 반영됨 기본적으로 화면 크기 전체의 가로폭을 차지함 (width: 100%)
inline (레벨) 여서 = display : lnline; 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치됨 ex) <span> <a> <em> 등 주의할 점 : width, height 속성을 지정해도 무시된다. + margin, padding은 좌우만 반영된다. inline 요소 내에 block 레벨 요소를 포함할 수 없다.
inline-block = display: inline-block; inline + block 두 레벨의 요소를 합친 하이브리드 줄바꿈 없이 한 줄로 다른 요소들과 나란히 배치(inline) + width, height 가능(block) + margin, padding 상하좌우 가능(block) ex) <button> <input> <select> 등
background
background-image : 배경 이미지 지정
background-repeat : 배경 이미지 반복 지정 (반복 출력을 멈추고 싶을 때 no-repeat 설정)
background-size : 배경 이미지 width, height (하나 값만 지정하면 width를 의미, height는 auto) - background-size: cover; : 배경 이미지 크기 비율 유지한 상태로 부모 요소의 width, height 중 큰 값에 배경이미지를 맞춤 - background-size: contain; : 배경 이미지의 크기 비율을 유지한 상태에서 부모 요소의 영역에 배경 이미지가 보이지 않는 부분 없이 전체가 들어갈 수 있도록 이미지 스케이을 조정
background-attachment : 일반적으로 화면을 스크롤하면 배경 이미지도 함께 스크롤된다. - background-attachment: fixed; : 화면이 스크롤 되더라도 배경이미지는 스크롤되지 않고 고정된다.
background-color : 배경 색상 지정(색상값 혹은 transparent 지정 가능)
font / text
font-size: 10px; : 텍스트 크기
font-family: Arial, Helvetica, sans-serif; : 폰트 지정 - 첫번째 폰트가 클라이언트에게 설치되어 있지 않은 경우, 다음 지정된 폰트를 적용한다. - 따라서 마지막에 지정하는 폰트는 대부분 OS에 기본적으로 설치되어 있는 generic-family 폰트(Serif, Sans-serif, Mono space)를 지정하는 것이 일반적임.
font-weight: bold; : 폰트 굵기 지정
line-height: 70%; : 텍스트 높이 지정
letter-spacing: 2px; : 글자 사이 간격 지정
text-align: center; : 텍스트 수평 정렬
position - 요소 위치 정의
position: static; : position의 기본값, 지정하지 않았을 때와 같음.
position: relative; : 기본 위치를 기준으로 좌표 프로퍼티(top, bottom, left, right)를 사용하여 위치를 이동시킴. - static을 선언한 요소와 relative를 선언한 요소의 차이점은 좌표 프로퍼티의 동작 여부뿐, 그외는 동일하게 동작합니다.
position: absolute; : 부모 요소 또는 가장 가까이 있는 조상 요소(static 제외)를 기준으로 좌표 프로퍼티(top, bottom, left, right)만큼 이동 - 만약 부모 또는 조상 요소가 static이라면 doument body를 기준으로 위치함 - absolute 선언 시, block 레벨 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정하여야 한다.
position: fixed; : 부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표 프로퍼티(top, bottom, left, right)을 사용하여 위치를 이동 - 스크롤 되어도 화면에서 사라지지 않고 항상 같은 곳에 위치함. - fixed 선언 시, block 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width 지정해야 함
💡position 과 짝꿍으로 자주 사용되는 z-index 프로퍼티
z-index : 값에 큰 숫자를 지정할 수록 화면 전면에 출력됨 단, position 이 static 이외인 요소만 적용됩니다.
float
주로 레이아웃 구성할 때 block 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기범
float : 이 속성은 원래 이미지 주위를 텍스트로 감싸기 위해 만들어진 것
프로퍼티값
Description
none
요소를 떠 있게 하지 않는다. (기본값)
right
요소를 오른쪽으로 이동시킨다.
left
요소를 왼쪽으로 이동시킨다.
float 선언 시, widthrk inline 요소와 같이 콘텐츠에 맞게 최소화되고, 다음 요소 위에 떠 있게 한다.
float 사용 시 겪을 수 있는 문제
float 선언된 요소 & 선언되지 않은 요소간 margin 사라짐 → 해결 방법 : float 프로퍼티 선언하지 않은 요소에 overflow: hidden; 선언하는 것 → overflow: hidden;는 자식 요소가 부모 요소보다 클 경우 넘치는 부분을 안 보이게 해주는데 여기서는 float 프로퍼티가 없어서 제대로 표현되지 못하는 요소를 제대로 출력해줌
float 선언된 자식 요소를 포함하는 부모 요소의 높이가 정상적 반영 X → 문제 원인 : float 요소가 일반적 흐름 상에 존재 X → float 요소의 높이를 알 수 없다. 즉, 자식요소 높이 모르기 때문에 부모 요소가 높이를 자동으로 잡지 못하는 것 해결 방법 : float 선언된 자식 요소의 부모 요소에 overflow: hidden; & :after 가상 요소 선택자 사용
overflow: hidden; / overflow: auto; a. float 속성을 가진 요소의 부모 요소에 적용 시켜준다. b. overflow: auto; : 자식의 너비가 부모의 너비보다 크다면 가로 스크롤바가 생김 c. overflow: hidden; : 넘치는 부분이 잘리기 때문에 사용하지 않는 것이 좋다.
빈 엘리먼트에 clear 속성 적용 a. 첫번째와 비슷한데 이건 진짜 빈 태그를 만들어서 clear: both; height: 0; overflow: hidden; 를 적용하여 높이가 0인 보이지 않는 태그를 만들어 float 해제하는 방법 b. 하지만 의미 없는 태그를 만들어야 하기 때문에 권장하지 않는다.
float로 대응 a. float 속성을 가진 자식 요소의 부모 요소에 똑같이 float 적용해주는 방법인데 반응형 웹에 적합하지 않기 때문에 권장하지 않는다.
즉, 여러 블록 요소의 상하 마진이 겹칠 때 제일 큰 여백의 크기를 가진 단일 여백으로 합쳐지는 브라우저 나름의 랜더링 규칙 정도
마진 상쇄가 일어나는 상황
1. 인접 형제 박스 간 상하 마진이 겹칠 때
→ 겹쳐진 두 마진 값 중 더 큰 마진 값으로 상쇄해 랜더링하고, 두 값이 동일한 경우 중복을 상쇄한다.
2. 빈 요소의 상하 마진이 겹칠 때
→ 빈 요소란? height가 0인 상태의 블록 요소
즉, height/min-height/padding/border 등 상하로 늘어나는 프로퍼티 값을 명시적으로 주지 않았거나
명시적으로 주지 않았거나 내부에 inline content가 존재하지 않는 요소
→ 빈 요소가 위 아래를 가르는 경계가 없으므로 자신의 상단, 하단의 마진 값을 비교해 더 큰 값으로 상쇄하고
, 두 값이 동일한 경우 중복을 상쇄
3. 부모 박스와 첫 번째 자식 상단 마진 혹은 부모 박스와 마지막 자식 하단 마진 겹칠 때
a. 부모 margin top과 첫 번째 자식의 상단 margin top 겹칠 때
b. 부모 margin bottom과 마지막 자식의 하단 margin bottom 겹칠 때
마진 상쇄가 일어나는 상황이 적용되는 규칙 1. 인접한 두 박스가 온전한 block-level 요소일 경우에만 적용 a. inline, inline-block, 등 요소는 block level이 아님 2. 마진값이 0이더라도 상쇄 규칙은 적용된다는 점 3. 좌우 마진은 겹쳐도 상쇄되지 않아요. only 상하 마진만 상쇄 규칙 적용됨
마진 상쇄는 어떻게 해결할까? 1. 부모 상단 혹은 하단에 padding 혹은 border 값으로 일종의 벽을 만들어주는 것이 안전하다. 2. 박스가 position: absolute; or float: left/right; 상태일 때 (상쇄 규칙 적용 예외처리됨) 3. 박스가 display: flex; or display: grid; 일 때 내부 item (상쇄 규칙 적용 예외처리됨)
CSS에는 상속과 우선 순위가 있어요. (= cascading)
상속 : 상위 요소에 적용된 프로퍼티를 하위 요소가 물려 받는 것
상속 O
상속 X
width / height
visivility
margin
opacity
padding
font
border
color
box-sizing
line-height
display
text-align
background
white-space
text-decoration
position
top / right / bottom / left
z-index
overflow
float
캐스캐이딩 (cascading) : CSS 적용 우선순위 ! (추후 면접 질문이 될 수도?!) 요소가 하나 이상의 CSS 선언에 영향을 받을 수 있다. 이 때 충돌을 피하기 위해 필요한 것이 CSS 적용 우선 순위이다.
cacading 규칙
중요도 : CSS가 어디에 선언 되었는지에 따라서 우선순위가 달라짐
1. head 요소 내의 style 요소 2. head 요소 내의 style 요소 내의 @import 문 3. <link> 로 연결된 CSS 파일 4. <link> 로 연결된 CSS 파일 내의 @import 문 5. 브라우저 디폴트 스타일시트
명시도 : 대상을 명확하게 특정할수록 명시도가 높이지고, 우선순위가 높아짐
!important > 인라인 스타일 > 아이디 선택자 > 클래스/어트리뷰트/가상 선택자 > 태그 선택자 > 전체 선택자 > 상위 요소에 의해 상속된 속성
