프로그래밍105 CSS 적용 순서 1. 완전 똑같은 선택자가 나중에 또 나오면, 이전에 나온 스타일을 덮어쓰게 된다. 나중에 나온 것으로 덮어씌워줘 h1 { color: blue; text-align: center; } h1 { color: green; } 원래는 가운데 정렬에 파란색으로 표시하라고 했지만 나중에 초록색으로 바꿨다. 얘는 결국 가운데 정렬에 초록색으로 나온다. 2. 명시도(specificity) : 같은 요소를 가리키지만 선택자가 다르다면, 명시도에 따라 우선 순위가 결정된다. 명시도 계산 방법 1) 인라인 스타일이 가장 우선 순위가 높다. 2) 선택자에 id가 많을 수록 우선 순위가 높다. 3) 선택자에 class, attribute, pseudo-class가 많을 수록 우선 순위가 높다. 4) 그 다음은 그냥 요소(또.. 2020. 7. 16. CSS Box Model - margin과 padding 완벽 이해 Box Model Box Model은 요소 1개를 기준으로 생각하면 된다. 요소는 실제 내용과 테두리로 이루어져 있다. 그리고 실제 내용과 테두리 사이의 공간인 패딩, 요소와 요소 사이의 간격인 마진이 존재한다. 실제 내용(content) 내용과 테두리 사이 여유공간(padding) 테두리(border) 이 요소와 다른 요소 사이의 간격(margin) margin과 padding만 잘 알아도 웹 페이지를 구성하기에 편리하다. margin은 요소 외부 여백(요소와 화면 여백)을, padding은 요소 내부 여백을 의미한다. 1. Margin 전체 wrap에 margin이 위 아래는 10px 들어가 있고 왼쪽 오른쪽은 auto로 가운데 정렬이다. 전체 요소를 묶은 wrap이라는 요소와 화면과의 여백을 나타낸.. 2020. 7. 9. HTML div와 span 를 사용하면 쭉 이어진 글 중간에서 끊기고 밑에 있는 줄로 넘어간다. span과 div는 요소들을 묶어준다는 공통점이 있다. 차이점은 div태그는 글을 새로운 줄을 놓고 span은 원래 있는 위치에 영향을 주지 않는다. 2020. 7. 8. HTML 폰트 - google 무료 폰트, 내 컴퓨터 폰트, 다운받은 폰트 적용하기 1. 폰트 종류 1)Serif폰트 Times New Roman 궁서체 2) Sans-Serif폰트 Arial 굴림체 3) Monospace폰트 : 프로그래밍 폰트로 많이 쓰임. Courier Courier New 4) Cursive Comic Sans MS Monotype Corsiva 5) Fantasy Impact Haettenschweiler 2. 폰트 설정 방법 1) 폰트가 내 컴퓨터에 이미 설치되어 있는 경우 예를 들어 내 컴퓨터에 Times New Roman이 있을 경우 html에는 따로 써줄 것이 없다. CSS에 font-family를 적어주면된다. font-family에 내가 적용하고 싶은 폰트를 1차로 적는다. 없을 경우 제 2의 폰트인 Times를 사용하도록 적는다. Times사용도 실.. 2020. 7. 8. CSS Text Styling : font-size, font-weight, text-align, text-decoration(폰트 사이즈, 굵기, 정렬 등) 오늘은 가장 기본적인 텍스트 스타일링을 정리해보려한다. '놀면서 배우는 코딩 : 마이크로비트로 정글 탐험하기' 책 홍보 사이트를 만들면서 살펴보려한다. 책 보러 가기 책 홍보 사이트 메인 화면에 들어가는 태그를 한 개 가져왔다. 유튜브에 '놀코'를 검색해보세요! 1. CSS로 스타일링을 해보자. .information{ font-size: 20px; font-weight: bold; } information클래스에 있는 글자들을 스타일링 해주었다. '유튜브에 를 검색해보세요!' 라는 글자들은 폰트 크기 20픽셀, 굵게로 설정되었다. 이번에는 information클래스 중 a태그인 '놀코' 글자를 스타일링 해보자! 텍스트 데코레이션을 없애버렸다. 밑줄, 윗줄, 가운데줄을 없애버리고 아무 효과도 안 준 상태.. 2020. 7. 7. 이전 1 ··· 8 9 10 11 다음
