CSS기초14 폰트 관련 CSS CSS 공부를 시작하며 이미 알고 있는 것도 있고, 예전에는 알았지만 잊어버린 것도 있고, 새롭게 알게 된 것도 있고 해서 글꼴 관련 스타일 시트를 정리해두고자 한다. 폰트 종류 지정하기 body {font-family: "맑은 고딕", 돋움, 굴림} /* 첫번째 글꼴이 없다면 다음 글꼴로 차례대로 넘어가며 적용 */ /* 글꼴이 두 단어 이상이라면 큰 따옴표로 묶어서 표시 */ 웹 폰트 사용하기 구글 폰트 (아래 링크) 페이지에 들어가서 link 항목을 복사하여 웹 폰트를 적용할 수 있다. fonts.google.com/earlyaccess Google Fonts Making the web more beautiful, fast, and open through great typography fonts.g.. 2020. 9. 11. CSS 여백 margin(마진) 속성 이해하기 margin 이란 정의된 테두리 요소 주위에 여백을 만들어 준다. 추가 TIP ) margin 과 padding 의 차이점 : padding은 공간 내부에서 형성, margin은 공간은 그대로 유지한 채 외부 공간을 확보하는 개념이다. padding은 안쪽 여백, margin은 바깥쪽 여백이라고 이해하면 된다. 테두리(border)를 경계로 나뉜다. margin 속성 margin-top : 상단 여백 margin-right : 오른쪽 여백 margin-bottom : 하단 여백 margin-left : 왼쪽 여백 - auto : 브라우저가 여백을 직접 계산한다 - pt, px, cm 등으로 길이 여백을 지정하거나 %를 사용하여 비율 여백을 지정할 수 있다. - inherit 속성값은 여백이 상위 요소에서.. 2020. 8. 29. 스타일과 스타일 시트, 주요 선택자 내부 스타일 시트 웹 문서 안에서 바로 스타일을 사용할 예정이라면, 사이에 태그를 만들어 그 안에 작성한다. 외부 스타일 시트 .css 라는 파일 확장자를 사용하여 외부에 별도 파일을 만든다. 웹 문서 안에서는 사이에 아래와 같이 link 태그를 사용하여 css 파일을 연결해 준다. 인라인 스타일 해당 태그에 style="속성:속성값;" 형태로 바로 입력이 가능하다. 주요 선택자 전체선택자 : *{속성:속성값; 속성:속성값; ...} → 모든 요소에 스타일 적용 태그선택자 : 태그{스타일} → 특정 태그를 사용한 요소에 스타일 적용 p{font-size:24px; font-family:굴림;} 클래스선택자 : .클래스명{스타일} → 특정 클래스에 스타일 적용 아이디선택자 : #아이디명{스타일} → 특정 .. 2020. 8. 25. CSS 기초 - style 태그, 선택자 Style 속성을 이용해서 CSS 사용하기 html의 문법 style=" ~속성(property)~ " 자바스크립트 Style 태그를 이용해서 CSS 사용하기 : 어떤 의미도 기능도 없는 태그, css/자바스크립트 등으로 제어하고 싶을 때 감싸줌, 한줄 전체를 쓰는 태그이므로 자동으로 줄바꿈이 됨 → 줄바꿈이 되지 않는 태그가 필요하다면 을 쓰자! 해이나는 공부를 하는 중이다. 해이나는 공부를 하는 중이다. → 이 웹페이지에 있는 태그 이름이 js라면 폰트를 굵게, 색상을 빨간색으로 바꾼다. → 만약 이 글에서 해이나가 1억번 반복되더라도 상단의 선택자를 통해 한 번에 수정할 수 있다. CSS 선택자 해이나는 공부를 하는 중이다. → 클래스 앞에는 마침표(.)를 붙이고 아이디 앞에는 샾(#)을 붙인다. .. 2020. 5. 31. 이전 1 2 다음
