기본 속성
width,height : 박스의 높이, 너비
auto를 사용하면 자동적으로 브라우저 크기에 맞춰준다
div {
width: 100px;
height: 100px;max-width,height : 박스의 최대 높이, 너비
브라우저 크기에 맞춰 크기를 설정할 경우 최대 크기를 지정 가능하다.
div {
max-width: 500px;
max-height: 500px;
}margin,padding : 박스 외/내부 여백
지정 방식에 따라 일괄적으로 지정하거나 개별로 지정이 가능하다.
인라인 요소처럼 한 줄로 이루어진 요소는 좌/우 지정만 가능하다.
음수값도 지정 가능하다
div {
padding:40px; /*4방향 전체 적용*/
padding:40px 20px: /*상하,좌우 방향 적용*/
padding:40px 20px 10px; /*상, 좌우, 하 적용*/
padding:40px 20px 10px 15px; /*상 하 좌 우 개별 적용*/
}margine/padding top, right, left, bottom : 여백 개별적용
코드 량은 늘어나는 대신 좀 더 직관적으로 알아 볼 수 있다.
div {
padding-top: 40px;
padding-left: 30px;
padding-right: 20px;
padding-bottom: 10px;
/* 여백 위, 왼쪽, 오른쪽 아래 적용*/
}여백의 경우 개별 요소간의 충돌이나 상쇄가 일어날 수 있다.
예시
<style> .line1 {margin-bottom: 30px;} .line2 {margin-top:20px;} </style> <p class="line1">첫번째 줄</p> <p class="line2">두번째 줄</p> <!--두 개의 여백 지정이 충돌할 경우, 둘이 합쳐지지 않고 더 큰 여백을 따라간다. 위의 예시 코드 사이의 간격은 20+30=50px이 아니라 30px이다-->
또한 부모와 자식 요소간의 여백을 분리할 권한이 없을 경우 상쇄가 발생한다.
부모와 자식을 분리하는 방법:
부모에 테두리 넣기(border)
부모와 자식 사이에 콘텐츠 넣기
부모에 내부 여백(padding) 넣기
예시
<style> .parent {margin-top:20px;} .child {margine-top:30px;} </style> <div class="parent"> <p class="child">자식 요소</p> </div> <!-- 해당 요소애서 부모와 자식 요소간의 구분지어주는 요소가 없으므로 여백이 상쇄되어 자식 요소 여백은 30px이 적용된다-->
그리고 컨텐츠가 없는 빈 요소들일 경우 공백간의 상쇄가 발생한다
예시
<style> .parent {margin-top:20px;} .child {margin-top:30px;} </style> <div class="parent"> <p class="child"></p> </div> <!--위 요소에서 둘 다 콘텐츠가 없기 때문에 margine이 결합된다.-->
테두리
border:박스의 네 면에 테두리를 그릴 수 있다. border는 세부 속성을 다수 가지는데 속성에 따른 효과를 정리하자면 다음과 같다.
div { border:1px solid #000000; /*테두리 두께 1px, 선, 색 검은색(RGB 16비트) */ border-bottom-width: 3px; /*바닥 테두리 두께 3px*/ border-bottom-style: dotted; /*바닥 테두리 점선*/ border-bottom-color: red; /*바닥 테두리 붉은색*? /*css에서는 rgb255나 16비트 기반이 아닌 미리 정해진 색으로도 칠할 수 있다.*/
box-sizing:박스의 내/외부 여백을 포함할지 안할지 결정하는 것
content-box의 경우 : padding,width/height,border width의 크기가 모두 더해진다.
border-box의 경우 : width/height 값에 padding, border의 크기가 더해진다.
예시
.content-box { /* 100px+20px+2px=11px */ box-sizing: content-box; width:100px; border: 1px solid red; /* 1+1=2px */ padding: 10px /* 10 + 10 = 20px*/ .border-box {/* 100px */ box-sizing: border-box; widht:100px; border: 1px solid red; /* 1+1=2px */ padding: 10px /* 10 + 10 = 20px*/ }
초과,투명도
overflow : 콘텐츠 박스가 지정한 크기를 초과했을때 어떤 식으로 표시할 지 나타낼 옵션으로, 크게 4가지 옵션이 있으며 이를 overflow-x, overflow-y로 분리 가능하다.
옵션 :
visible (무조건 노출, 기본 옵션)
hidden (숨김)
scroll(스크롤로 무조건 노출)
auto(브라우저가 자체적으로 설정하도록 함)
으로 나룰 수 있다.
opacity : 투명도, 기본값은 1이며 0~1까지 설정 가능하다. 투명도가 적용되면 자식 요소도 똑같이 적용되나 이 값이 상속되지는 않는다.(자식 요소에 개별 설정 가능)
표시 유형과 레이아웃
display:html 요소들을 block 혹인 inline 방식으로 보여 주는 것과 그에 대한 설정 변경(CSS 속성 설정)의 값을 가능하게 한다. 아니면 none 설정을 통해 해당 요소를 존재하지 않는 것 처럼 변경 가능하다.
visiblity:레이아웃을 변경하지 않고 시각적으로 볼수 있는지에 대한 여부를 설정한다. display의 none 설정과는 달리 hidden 설정은 공간을 차지하고 해당 요소의 존재 자체는 보존된다.
float:문맥의 흐름으로부터 빠져 좌/우로 배치되는 속성으로, left나 right로 대체 가능하다.
flexbox/grid
flexbox:유연함을 가진 일차원 레이아웃으로, 다양한 속성을 지정 가능하다
가로축 정렬:justify-content
세로축 정렬:align-item
유연성 조절:flex-grow,flwx-shrink
크기 조절:flex-basis
축 바꾸기:flex-direction
여백과 순서:gap,order
※주의 사항:
1.클래스,id 명 사용 시 대소문자 주의(대소문자에 선택자 안될 수 있음)
2.한글 사용 지양(한글 사용 시 유니코드를 제외한 인코딩에서 문제가 생길 수 있음)
3.마크업 순서와 CSS 작성 순서는 서로 같게(나중에 유지보수나 추가 작업할때 유리)
4.기본적으로 CSS는 위에 써진 순서대로 적용하므로 여러 CSS를 중복으로 작업하거나 상속을 잘 파악하기
5.세부 선택자를 잘 잡았는지 확인하기
6.선택자에 숫자를 먼저 쓰거나 숫자만 쓰지 않기
