the Rabbit_Sand, IT Blog 🍀

웹 페이지는 크게 header(상단부)와 navigation bar(메뉴), content(내용), footer(하단부)로 나뉜다. - header: 홈페이지 로고, 검색창 - navigation bar: 메뉴 - content: 내용 - footer: 이용약관, 고객센터, 운영시간 등 크기를 지정할 때는 전체 틀에 대한 크기(px)를 제외하고는 %로 지정하는 것이 좋다. 새로운 틀이 추가되었을 때 px로 지정하면 일일이 다 변경해야 하므로 전체적으로 크기를 조절하기가 번거롭다. 그러나 %로 지정하면 알아서 크기 조절이 되어 편리하다.

애니메이션(animation) : 속성을 변화시켜 움직이게 하는 기법이다. - 트랜지션과 비교했을 때, 시작과 끝의 스타일을 부드럽게 이어주는 것은 같지만 애니메이션은 @keyframes를 이용하여 중간의 스타일을 지정할 수 있다. @keyframes : 애니메이션의 시작과 끝의 스타일을 지정하고 keyframes 이름도 지정한다. - 시작과 끝의 지점만 설정할 경우에는 from{} to{}로 설정한다. 애니메이션1 - 중간중간 다르게 적용할 스타일이 있으면 %로 구분하여 설정한다. 애니메이션2

** 선택자:hover → 마우스 커서를 선택자에 갖다댔을 때 선택자:active → 마우스 커서로 선택자를 클릭했을 때 1. 태그를 이동시키기 : translate 함수를 사용하여 설정 태그를 이동시킨다. ① transform: translate(px); : x축과 y축을 지정 px 만큼 이동시킨다. ② transform: translateX(px); : x축을 지정 px만큼 이동시킨다. ③ transform: translateY(px); : y축을 지정 px만큼 이동시킨다. 2. 태그를 확대/축소시키기 ① transform: scale(비율); : x축과 y축을 비율 만큼 확대/축소시킨다. ② transform: scaleX(비율); : x축을 비율 만큼 확대/축소시킨다. ③ transform: sc..

1. 블럭(block) 요소/인라인(inline) 요소 1) 블럭(block) 요소 : 한 줄 단위로 영역이 잡히고, 줄바꿈이 된다. - , , , 2) 인라인(inline) 요소 : 내용(content) 부분만 영역이 잡히고, 줄바꿈 없이 옆으로 배치된다. - , , , , 글자 관련 태그 2. width/height : 내용(content) 영역의 크기를 조절한다. ① 크기를 고정할 땐 px를 사용한다.(고정 길이) ② 크기를 변경할 수 있게 할 땐 %를 사용한다.(가변 길이) 3. display : 블럭 요소와 인라인 요소의 속성을 변경하여 배치 방식을 변경시킨다. - display: inline/inline-block/block; ① inline: content 영역만 잡히고 줄바꿈 없이 옆으로 ..

1. 배경과 관련된 스타일 1) background-color: 색상; : 배경색을 지정할 때 사용한다. 2) background-clip: border-box/padding-box/content-box; : 배경을 적용할 범위를 지정할 때 사용한다. ① background-clip: border-box; : 테두리까지 배경을 적용한다. ② background-clip: padding-box; : 테두리 바로 안쪽 패딩 영역까지 배경을 적용한다. ③ background-clip: content-box; : 내용이 있는 부분만 배경을 적용한다. 2. 배경 이미지와 관련된 스타일 1) background-image: url(경로); : 이미지를 가져올 경로를 작성하여 해당 이미지를 배경으로 설정한다. 2) ..

1. 테두리 스타일 ① border-style: none/dotted/dashed/solid/double/groove/ridge/inset/outset; ② border-위치-style: none/dotted/dashed/solid/double/groove/ridge/inset/outset; - border-style: none; : 테두리에 어떠한 스타일도 넣지 않는다. - border-style: dotted; : 얇고 동그란 점선 - border-style: dashed; : 얇은 점선 - border-style: solid; : 굵은 실선 - border-style: double; : 두 줄로 된 실선 - border-style: groove; : 액자 모양으로 된 바깥쪽 그림자가 진 선 - bo..

1. padding : 내용 영역(content)과 테두리 영역(border) 사이의 여백을 조정하는 속성이다. - 기준이 되는 (padding과 margin 적용할 때 사용) 1) padding: px; : 위아래쪽과 양 옆쪽과의 사이의 여백을 한번에 조정한다. 2) padding: px px; : 위아래쪽과 양 옆쪽 순으로 여백을 조정한다. 3) padding: px px px px; : 윗쪽→오른쪽→아래쪽→왼쪽 순(시계 방향)으로 여백을 조정한다. 4) padding-top: px; : 윗쪽과의 여백을 조정한다. 5) padding-left: px; : 왼쪽과의 여백을 조정한다. 6) padding-right: px; : 오른쪽과의 여백을 조정한다. 2. margin : 타 요소들 간의 간격을 조정..

1. list-style-type : 불릿 기호(글머리 기호)를 변경시킬 때 사용한다. 1) 순서가 없는 목록(ul)에서 사용하는 불릿 기호 ① list-style-type: disc; : 속이 차있는 동그란 불릿 기호 ② list-style-type: circle; : 속이 비어있는 동그란 불릿 기호 ③ list-style-type: square; : 네모난 불릿 기호 ④ list-style-type: none; : 불릿 기호가 안보이게 한다. 2) 순서가 있는 목록(ol)에서 사용하는 불릿 기호 ① list-style-type: decimal; : 기본 숫자(1, 2, 3, ...)로 된 불릿 기호 ② list-style-type: decimal-leading-zero; : 숫자 01, 02, 03,..

글자와 관련된 style 1) color : rgb 색상 사이트에 들어가서 색상의 rgb를 알 수 있다. - color: rgb(red, green, blue); - color: rgba(red, green, blue, alpha); => alpha는 투명도(1이 최대) - color: hsl(hue, saturation, lightness); - color: hsla(hue, saturation, lightness, alpha); 2) text-decoration(글자 꾸밈) - text-decoration: underline; (밑줄) - text-decoration: line-through; (취소선) - text-decoration: overline; (윗줄) - text-decoration: n..

폰트 설정하기 1) PC에 기본적으로 있는 글씨체 적용하기 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 - font-family : 글씨체 - font-size : 글씨 크기(크기 단위: px, %, em) - font-weight : 글씨 굵기 - font-style : 글씨 모양 만약 PC에 없는 폰트로 지정하면 기본 폰트로 적용된다. 해당 폰트가 없을 때('티스토리체') 예비로 PC에 있는 폰트('궁서체')를 옆에 더 지정해주면 예비 폰트가 적용된다. ☞ 적용된 폰트 2) PC에 기본적으로 없는 글씨체 적용하기 ① 구글에서 '구글 웹 폰트' 검색한다. 한국어로 된 폰트를 사용하려면 '구글폰트 바로가기'로 들어간다. ② 사용하고 싶은 폰트를 골라서 클릭하고 '+Select this..