CSS

CSS CSS란 cascading style sheet의 약자이다. CSS는 HTML의 색, 크기, 정렬 등을 변경하여 꾸며주는 언어이다. 특성 특성에는 색, 크기, 정렬 등이 존재한다. div { color: red; color: rgb(255,0,0); /* RGB */ color: #FF0000; /* HEX 값 */ font-size: 20px; /* 글자크기 */ font-weight: 300; /* 글자두께 */ text-align: center; /* 가운데 정렬 */ font-family: arial; /* 글꼴 */ width: 300px; /* 넓이 */ height: 300px; /* 높이 */ background-color: red; /* 배경색 */ border: 1px solid..

• format_list_bulleted Frontend/CSS
• · 2022. 12. 17.
• textsms

글꼴 관련 스타일

font-family 속성 태그, 태그, 태그처럼 텍스트를 사용하는 요소에 주로 사용됨 font=family : | [, ] 글꼴 이름을 2개 이상 지정할 때는 두 글꼴 이름 사이에 쉼표(,)를 넣어 구분. 글꼴이 없을 경우를 대비해서 두 번째, 세 번째 글꼴까지 생각해야 한다. body { font=family : "맑은 고딕", 돋움, 굴림 } [기본형] 표기 방식은 W3C 표쥰 규약에서도 사용한다. 표기 방식은 아래와 같다. '|' 는 나열한 옵션 중 하나가 값이 되어야 한다는 의미이다. font-size: 값1 | 값2 | 값3 // 값1 이나 값2, 값3 중 하나가 font-size 속성값이 된다. 속성값을 나열할 때 키워드(약속한 값)는 그대로 나열합니다. font-variant : norma..

• format_list_bulleted Frontend/CSS
• · 2022. 11. 25.
• textsms

캐스케이딩 스타일 시트(cascading style sheet)

캐스케이딩(cascading) 'C"는 cascading의 줄임말이며 스타일 시트에서는 우선순위가 위에서 아래, 계단식으로 적용된다는 의미이다. CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정. 스타일 상속 : 태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달합니다. 스타일 우선순위 스타일 우선순위는 캐스케이딩에서 가장 중요합니다. 우선순위는 다음 3가지 개념에 따라 지정됩니다. 얼마나 중요한가? 사용자가 지정한 스타일과 웹 문서를 제작한 제작자의 스타일,그리고 웹 브라우저가 기본으로 정해 놓은 스타일을 함께 사용한다. 스타일에 따른 우선 순위는 아래와 같다. 적용범위는 어디까지인가? 스타일 작용 범위가 좁을수록, 즉 정확히 필요한..

• format_list_bulleted Frontend/CSS
• · 2022. 11. 25.
• textsms

기본 선택자

전체 선택자 스타일을 문서의 모든 요서에 적용할 때 사용함. 표시할 때는 별표(*)로 표시함 * { 속성: 값; } 마진과 패딩 : 브라우저 창에 바짝 붙지 않도록 문서 내용과 부라우저 테두리 사이에 여백을 약간 두는 것. 타입 선택자(요소 선택자) 특정 태그를 사용한 모든 요소에 스타일을 적용함. 태그명 { 스타일 규칙 } 클래스 선택자 특정 부분만 선택해서 스타일을 적용함. .클래스명 { 스타일 규칙 } 클래스 스타일 : 클래스 선택자를 사용해 만든 스타일 이미 만들어둔 스타일을 적용할 때는 태그 안에 class="클래스명" 입력 하나의 요소의 두개 이상의 클래스 적용도 가능함. // 앞에 이미 .accent .bg라는 클래스가 선언이 되었다고 가정 내용입력 // 클래스가 적용이 되었음. id선택자 ..

• format_list_bulleted Frontend/CSS
• · 2022. 11. 25.
• textsms

스타일과 스타일 시트

스타일 형식 선택자 { 속성1: 속성값1; 속성2: 속성값2; } 스타일의 주석 표시 /* 내용을 입력 */ 소스 경량화 CSS소스는 네트워크를 이용해 파일로 내려받으므로 되도록이면 파일 크기가 작은 것이 좋음. 경량화 프로그램이 존재 하므로 사요아면 됨. (cssminifier.com) 스타일 시트 알아보기 스타일 시트 브라우저 기본 스타일 사용자 스타일 인라인 스타일 내부 스타일 시트 외부 스타일 시트 인라인 스타일 브라우저의 기본 스타일이라고 함. 우리가 HTML 태그를 작성하고 바로 보는 화면을 말함 적용하는 방법 내용을 입력 내부 스타일 시트 스타일을 여로 곳에 적용할 때 쓰는 내부 스타일 시트 내용 // 내용에 style이 적용됨. . . . 외부 스타일 시트 사용할 스타일을 별도 파일로 저장..

• format_list_bulleted Frontend/CSS
• · 2022. 11. 25.
• textsms