[Html/Css] 기초 정리
기본 글씨 서체
font-size : 20px; /*글자 크기*/
font-family : 'gulim'; /*서체*/
color : black; /*글자 색*/
letter-spacing : -1px; /*자간*/
text-align : center; /*글자 정렬 위치*/
font-weight : 600; /*글자 굵기*/
가운데 정렬
display : block;
margin-left : auto;
margin-right : auto;
* span과 p의 차이
span = inline 속성 -> 요소의 폭 높이 등 설정 불가 (기본적으로 display:inline;)
p = block 속성 -> 요소의 폭 높이 등 설정 가능 (기본적으로 display:block;)
네모 박스 디자인 속성
width: 200px; /*너비*/
background-color: cadetblue; /*배경색*/
margin: 10px; /*여백*/
padding: 40px; /*안쪽 여백*/
border: 4px solid black; /*테두리 (두께 종류 색상)*/
border-radius: 5px; /*테두리 둥글게*/
* inherit
일부 속성은 상속이 가능하다. 예를 들어 글자와 관련된 스타일들이 주로 inherit 된다.
레이아웃 만들기
기본적으로 header, navbar, content, footer로 나눈다. (공통적으로 div -> block 속성)
- float 사용
.container{
width: 1000px;
} /* 해당 레이아웃의 흘러넘침을 방지하는 감싸는 컨테이너*/
.header{
width: 100%; /*부모 요소의 style의 %를 따름*/
height: 100px;
background-color: black;
}
.navbar{
width: 20%;
height: 400px;
background-color: red;
float: left; /* 해당 요소를 공중에 띄워서 left 정렬*/
}
.content{
width: 80%;
height: 100px;
background-color: blue;
float: left; /* 해당 요소를 공중에 띄워서 left 정렬*/
}
.footer{
width: 100%;
height: 100px;
background-color: yello;
clear: both; /* float 속성으로 인해 공중에 뜬 태그들의 다음으로 정렬하기 위해 사용*/
}
- inline-block 사용
.container{
width: 1000px;
} /* 해당 레이아웃의 흘러넘침을 방지하는 감싸는 컨테이너*/
.header{
width: 100%; /*부모 요소의 style의 %를 따름*/
height: 100px;
background-color: black;
}
.navbar{
width: 20%;
height: 400px;
background-color: red;
display: inline-block; /*inline-block 속성 추가*/
vertical-align: top; /* inline 요소에 사용*/
}
.content{
width: 80%;
height: 100px;
background-color: blue;
display: inline-block; /*inline-block 속성 추가*/
}
.footer{
width: 100%;
height: 100px;
background-color: yello;
}
* display: block; = 한 행을 전부 차지 함.
* display: inline-block; = 내 크기 만큼 차지 함.
*** inline-block는 html의 태그 간에 띄어쓰기(공백)가 생기면 그대로 공백이 반영 된다. ***
- 해결 1) 태그 사이에 공백을 제거한다. (사실 상 안쓰는게 나음)
<div class="navBar"></div><div class="content"></div>
- 해결 2) 주석을 사용한다.
<div class="navBar"></div><!--
--><div class="content"></div>
- 해결 3) 부모의 폰트 사이즈 0으로 만들기
<div style="font-size: 0px;">
<div class="navBar"></div>
<div class="content"></div>
</div>
* inline or inline-block 속성을 사용하게되면 vertical-align: top; 태그를 사용한다.
vertical-align을 사용하는 이유는 inline 속성의 주변에 글씨를 쓸 때 baseline이 존재할 경우, baseline 위 쪽에 오려고 하기때문에 vertical-align으로 위치를 지정해 주어야 한다.
셀렉터
.content li{} /* 자식의 요소 전부 다 */
.content > li{} /* 직계 자식 요소 만 */<div class="content title"></div> <!-- 클래스 여러개 부여 -->
배경
.background {
background-image : url(../img.jpg); /*배경 이미지 url*/
background-size : cover; /*배경 크기 cover: 꽉 채움, contain: 배경이 안짤리게 꽉 채움*/
background-repeat : no-repeat; /*배경 이미지 반복 안함*/
background-position : center; /*배경 위치*/
background-attachment : fixed; /*스크롤 시 고정효과*/
/*filter 속성을 사용하면 더욱 스타일 효과를 줄 수 있음*/
}
*margin collapse
두개의 박스에 테두리가 겹치면 하나의 박스에 스타일을 부여했을 시 같이 움직이는 현상.
- 해결: padding을 1px 준다.
좌표 레이아웃 설정
.box {
position: relative; /*좌표 속성의 기준 점*/
top : 20px; /*위에서 20px*/
left : 30%; /*왼쪽에서 30%*/
}
* position
- 좌표 이동을 가능하게 한다.
- 공중에 뜬다 (like float)
.box {
position : static; /* 기준이 없음 (기본 값) */
position : relative; /* 기준 */
position : absolute; /* 기준이 부모 중 relative 속성이 있는 것 */
position : fixed; /* 기준이 브라우저 창 (viewport) */
}
- position: absolute 일 때, 가운데 정렬하기
.button {
position : absolute;
left : 0;
right : 0;
margin-left : auto;
margin-right : auto;
width : 아무값이나
}
max-width & box-sizing
* max-width
- 기본적으로 width와 같이 사용. width 값을 %로 지정 해놓고 max-width 값을 설정하면 창이 커질 때 최고 width 값이 max-width 값으로 정해진다. (min-width는 반대)
* box-sizing
div {
box-sizing : border-box; /*박스의 폭은 border까지 포함*/
box-sizing : content-box; /*박스의 폭은 padding 안쪽*/
}content-box의 width는 margin, padding, border를 포함 하지 않은 값으로 해당 하는 값이 더 해진 값이 box 값이지만 border-box는 해당 하는 값과 width 값의 총 합이 설정한 값이 된다.
vertical-align 상하정렬 속성
- 테이블
td, th {
vertical-align : middle;
}
- inline 요소
span {
vertical-align: top;
vertical-align: super;
vertical-align: middle;
vertical-align: sub;
vertical-align: bottom;
}
div 태그 table로 바꾸기
.box {
display : table;
display : table-row;
display : table-cell;
}
Pseudo-class 셀렉터
:any-link /*방문 전, 방문 후 링크 한번에 선택할 때*/
:playing /*동영상, 음성이 재생중일 때*/
:paused /*동영상, 음성이 정지시*/
:autofill /*input의 자동채우기 스타일*/
:disabled /*disabled된 요소 스타일*/
:checked /*체크박스나 라디오버튼 체크되었을 때*/
:blank /*input이 비었을 때*/
:valid /*이메일 input 등에 이메일 형식이 맞을 경우*/
:invalid /*이메일 input 등에 이메일 형식이 맞지 않을 경우*/
:required /*필수로 입력해야할 input의 스타일*/
:nth-child(n) /*n번째 자식 선택*/
:first-child /*첫째 자식 선택*/
:last-child /*마지막 자식 선택*/* hover, focus, active 스타일의 순서 -> 차례로 적용해야 작동이 잘 됨.
OOCSS, BEM
- OOCSS
btn {
font-size : 10px;
padding : 8px;
border : none;
cursor : pointer;
}
.bg-red {
background : red;
}
.bg-blue {
background : blue;
}<button class="btn bg-red">빨간버튼</button>
<button class="btn bg-blue">파란버튼</button>
- BEM(Block__Element--Modifier)
<div class="main">
<img class="main__img">
<h4 class="main__h1">이름</h4>
<p class="main__content">소개글</p>
<button class="main__button--red">빨간버튼</button>
<button class="main__button--blue">파란버튼</button>
</div>
'Html&Css' 카테고리의 다른 글
| [Html/Css] 고급 정리 (SASS) (0) | 2021.11.17 |
|---|---|
| [Html/Css] 중급 정리 (0) | 2021.11.15 |
