커서(cursor) 디자인 정하기cursor 속성을 이용하면 마우스가 위치할 때, 마우스 커서의 형태를 지정할 수 있습니다.   커서 디자인 종류defaulte-resizepointerne-resizemovenw-resizeno-dropn-resizeautose-resizecrosshairsw-resizetexts-resizewaitw-resizehelp      cursor의 속성값은 style="cursor:         "로 입력한다.style="cursor:default" style="cursor:pointer"style="cursor:move"style="cursor:no-drop" style="cursor:auto"style="cursor:crosshair"style="cursor:text"..

리스트 마크 종류 disc 검정색 원 circle 흰색 원 square 사각형 decimal 숫자 decimal-leading-zero 숫자 앞에 0이 붙음 ex) 01, 02, 03 ... lower-roman 소문자 로마어 upper-roman 대문자 로마어 upper-latin 대문자 알파벳 lower-latin 소문자 알파벳 upper-alpha 대문자 알파 disc : 검은색 원 list-style-type: disc; circle : 흰색 원 list-style-type: circle; square : 사각형 list-style-type: square; decimal : 숫자 list-style-type: decimal; decimal-leading-zero : 숫자 앞에 0이 붙음 ex) 0..

박스 내부의 글자와 이미지를 디자인을 조정하는 속성들에 대해 알아보겠습니다. ㅣ ㅣ V [HTML] 안녕소프트 anyeong-soft 안에 위와 같이 넣어주면, 가장 기본적인 폰트와 기본색, 기본 크기로 표기가 됩니다. [CSS] div { color: #fa0; font-family: 'Montserrat', sans-serif; font-size: 32px; font-weight: bold; letter-spacing: 5px; line-height: 1; text-align: center; text-decoration: underline; } color: 글자색을 지정 글자색을 주황색 (#fa0)으로 지정합니다. font-family: 사용할 폰트 지정 "Montserrat" 또는 "고딕계열의 폰트..

링크 박스 만들기 안녕소프트 블로그로 이동할 수 있는, 링크 박스를 만들어 보겠습니다. 링크 추가하기 로 마크업 하고 href 속성을 지정한다. 기본설정에 의하여 글자크기는 16px , 밑줄 있는 파란 글씨로 출력된다. 안녕소프트 블로그 바로가기 링크를 버튼형태로 만들기 버튼 크기 정하기 padding으로 버튼 안쪽 여백을 넣어 글자보다 크게 출력되도록 한다. *padding:(위아래) (왼쪽오른쪽); padding : 10px 30px; 버튼 디자인과 색상 정하기 버튼 색상 정하기 background-color로 버튼의 색을 지정한다. background-color: blue; 버튼 디자인 하기 border-radius를 이용해 버튼의 각을 조절 한다. border을 이용해 테두리를 만들어 준다. *b..

토글 버튼 만들기 토글 버튼 추가 button만들기 사이트 이름 설정 뒤에 을 추가하고 type 속성으로 버튼의 종류를 "button"으로 지정한다. 아이콘 출력하기 범용태그 을 추가하고, 클래스 이름으로 출력하고 싶은 아이콘 종류를 지정한다. 어떤 버튼인지 알려줄 수 있게 title속성에 "MENU"로 지정한다. 큰 화면에서 버튼 보이지 않게 설정 화면의 너비가 768px 이상일 때, 버튼이 보이지 않게 설정 하려고 한다면 css에서 @media 를 이용해 설정 해주고, display를 "none"으로 설정한다. (큰 화면에선 토글버튼이 보이지 않고, 작은화면에서만 보이게 된다.) @media (min-width: 768px) { .headC { display: none; } } 작은 화면에서 버튼 위..

flexbox 플렉스 레이아웃 모드에서 부모요소 , 자식요소 같은 형태를 가지게 됩니다. 웹 페이지의 표준 레이아웃 모드는 박스를 세로방향으로 정렬합니다. 이를, 가로방향으로 정렬하고 싶으면 CSS 에서 부모 요소의 display 속성을 "flex"로 지정하면 됩니다. flex 자식요소의 너비를 부모요소의 너비에 맞게 출력할 때 flex 속성을 사용합니다. flex의 값은 다음과 같이 지정합니다. flex : 확대비율 축소비율 기본너비 ; 자식요소마다 너비 다르게 지정하기 itemA만 150px로 고정하고, itemB,itemC는 flex를 1로 지정하면 부모요소의 너비에 따라 A는 150px로 고정되며, B,C는 변화합니다. flex-direction 자식요소의 정렬 방향을 지정할 때 사용합니다. fl..