리스트 마크 종류 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; } } 작은 화면에서 버튼 위..

검색엔진 최적화(SEO) 메타 태그 웹페이지를 요약한 설명글입니다. HTML의 사이에 위치한 태그입니다. description : 한두 개 정도의 짧은 문장을 사용해 웹 페이지 정보를 전달할 수 있습니다. 검색 결과 페이지에서 페이지 제목과 URL 아래에 표시됩니다. keywords : 해당 웹페이지의 관련 키워드를 나열할 수 있습니다. author : 해당 웹페이지의 작성자를 표시해줄 수 있습니다. 메타 디스크립션 태그 주의사항 한글 77자, 영문 160자 이내로 핵심 정보 담기 타깃 키워드를 포함하고 있는지 체크하기 본문의 내용을 잘 요약하고 있는지 확인하기 콘텐츠와 메타 디스크립션의 관련이 깊은지 체크하기 CTA(call to action)을 포함하는지 확인하기 (사용자의 액션을 유도하는 문구) 타..

요소 태그 표기 ~ 로 마크업 하고 href속성을 지정한다. 임시 링크 # 에는 URL을 지정한다. 태그 속성href( hypertext reference) : 이동할 웹페이지의 주소를 정한다. target : 문서가 열리는 곳을 지정한다.title : 링크에 마우스 커서를 올리며 추가 설명을 띄울 수 있다. 태그 _텍스트에 링크 삽입하기 링크와, 텍스트를 태그로 묶어 마크업한다.이동할 URL 주소는 href속성으로 지정한다.("http://www.anyeong-soft.com/")클릭할 수 있는 텍스트를 와 사이에 입력해준다. => 텍스트 클릭시, URL로 이동하게 된다.( 텍스트표시는 방문 한 곳은 보라색, 방문하지 않은 곳은 파란색 으로 표기 되는것이 기본 설정이며CS..