[Html/Css] 기초 정리

Html&Css

[Html/Css] 기초 정리

swimKind 2021. 11. 5. 16:29

[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>