the Rabbit_Sand, IT Blog 🍀

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

선택자의 우선순위 : 선택자가 동일한 경우 위에서 아래로의 순서대로 스타일을 적용한다. 이때, 같은 태그에서의 속성의 스타일을 재선언할 경우에는 마지막으로 선언된 스타일로 덮어씌워진다. 태그 선택자 → 클래스 선택자 → 아이디 선택자 → 인라인 스타일 → !important → 선언의 종류가 다를 때, 위의 기준으로 순위를 적용한다. (!important 쪽으로 갈 수록 우선순위가 높다.) 선택자 우선순위 /*4. 인라인 스타일*/ 첫 번째 두 번째

속성 선택자 : 선택자 뒤의 [](대괄호) 안에 속성과 속성값을 지정한 후 해당 속성으로 style을 부여한다. - 선택자[속성=속성값]{} = 해당 속성값을 가질 때 사용한다. ~= 띄어쓰기 기준으로 특정 단어를 속성값으로 가질 때 사용한다. |= 시작 단어 유무를 기준으로 특정 단어를 속성값으로 가질 때 사용한다. ^= 속성값이 특정 단어로 시작할 때 사용한다. $= 속성값이 특정 단어로 끝날 때 사용한다. *= 속성값이 특정 단어를 포함할 때 사용한다. apple banana yellow melon grape kiwi-banana 자손 선택자, 후손 선택자 1) 자손 선택자 : 선택자 바로 하위에 있는 요소를 선택할 때 사용하는 선택자이다. - 선택자>자손선택자{} - 자손 선택자가 후손 선택자보다..

선택자 : 특정 html 요소를 선택할 때 사용하는 기능이고, 해당 요소를 선택하여 원하는 스타일과 기능을 적용시킬 수 있다. 1) 전체 선택자(*) : 모든 요소를 선택할 때 사용한다. 전체 선택자 * 모든 요소를 선택할 때 사용한다. 전체 선택자 *을 사용하여 style color를 hopink로 지정했으므로 태그와 태그 모두 핫핑크색으로 출력된다. 2) 태그 선택자(태그명) : 해당 문서 내에 있는 같은 태그들을 모두 선택할 때 사용한다. 태그 선택자 (태그명) 해당 문서 내의 같은 태그들을 전부 선택할 때 사용한다. 태그 선택자를 사용하여 style color를 지정했다. p 태그는 아쿠아색, pre 태그는 노랑색으로 지정하였으므로 p 태그는 모두 아쿠아색으로 출력되며 pre 태그는 모두 노랑색으..

태그 1) href="파일명.html" : 해당 html 파일로 연결한다. 하이퍼링크태그로 가기 2) href="url" : 해당 url 주소로 연결한다. 티스토리 다음 연결하고 싶은 페이지의 url을 넣으면 해당 페이지로 이동한다. 이때 해당 페이지를 새 창에다 띄우고 싶으면 target을 사용하여 '_blank'라는 속성값을 넣으면 된다. 3) 앵커 태그 : 페이지 내에서 해당 부분으로 점프시킨다. 첫 번째 문단 두 번째 문단 세 번째 문단 첫 번째 문단 방황하여도, 공자는 우리의 우리의 위하여 꽃이 인생을 불어 꽃이 칼이다. 사랑의 속에 온갖 인간의 그들의 주는 청춘의 위하여, 것이다. 어디 이상의 주는 힘있다. 하였으며, 천자만홍이 끓는 붙잡아 뭇 그들의 평화스러운 너의 피어나는 약동하다. 쓸쓸한..

블럭 요소와 인라인 요소 1) 블럭 요소 : 한 줄 단위로 영역을 차지한다. 블럭 요소는 줄바꿈이 적용되므로 줄바꿈을 하면 이미 존재하는 요소의 다음 줄에 출력된다. - , , , 등이 블럭 요소에 해당한다. 2) 인라인 요소 : 내용(content)에 해당하는 부분만 영역을 차지한다. 인라인 요소는 줄바꿈이 적용되지 않으므로 엔터를 쳐서 밑으로 내려도 옆으로 쭉 이어서 출력된다. - , , , , , , 등이 인라인 요소에 해당한다. 태그와 태그 1) 태그 : 태그는 블럭 요소에 해당하며, 한 줄 단위로 영역을 차지하므로 줄바꿈이 적용된다. 첫 번째 영역 두 번째 영역 세 번째 영역 2) 태그 : 태그는 인라인 요소에 해당하며, 내용 부분만 영역을 차지하므로 줄바꿈이 적용되지 않는다. 첫 번째 영역 두..