프로그래밍/CSS25 07 CSS 글자 크기 및 폰트 설정 글자 크기 설정 [문법] 선택자{ font-size: 크기값; /*단위: %,px,em,rem...*/ } [예시] 안녕하세요 font-size Test 입니다. 안녕하세요 font-size Test 입니다. 안녕하세요 font-size Test 입니다. [결과] 폰트 설정(font-family) font-family - 글꼴을 설정할 때 쓰는 속성이다. - 하나의 글꼴도 설정할 수 있고, 여러개의 글꼴도 설정할 수 있음 - 여러개의 글꼴이 설정되어 있는 경우 웹 브라우저에서 순서대로 사용여부를 판단한 뒤 적용된다. - 글꼴 이름에 띄어쓰기가 있을 경우 반드시 따옴표로 감싸줘야한다. [문법] 선택자{font-family: 글꼴이름, 글꼴이름, 글꼴이름} font-weight - 텍스트의 굵기 설정 - 기.. 2021. 4. 27. 06 CSS의 텍스트 다루기 CSS의 텍스트 다루기 1) color 텍스트의 색상을 설정, 기본값은 검정색이다. 자세한 내용은 아래 글을 참고해주세용 (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧ yoonhihi.tistory.com/95 05 CSS의 컬러 다루기 CSS의 컬러 다루기 1) 색상 이름으로 표현하기 [문법] 선택자 {color: 색상이름;} [예시] Color 클래스 아이디 p태그 [결과] 2) RGB 색상값으로 표현 [문법] 선택자{color: rgb(0~255정수,0~255정수,0~255정.. yoonhihi.tistory.com 2) letter-spacing과 word-spacing letter-spacing 텍스트내에서 글자 사이의 간격을 설정 적용 전 : 안녕하세요 적용 후 : 안 녕 하 세 요 word-spacing 텍스트내에.. 2021. 4. 27. 05 CSS의 컬러 다루기 CSS의 컬러 다루기 1) 색상 이름으로 표현하기 [문법] 선택자 {color: 색상이름;} [예시] Color 클래스 아이디 p태그 [결과] 2) RGB 색상값으로 표현 [문법] 선택자{color: rgb(0~255정수,0~255정수,0~255정수);} 선택자{color: rgba(0~255정수,0~255정수,0~255정수,0~1 소수);} /*alpha:투명도*/ [예시] Color 클래스 아이디 p태그 [결과] 3) 16진수 색상값으로 표현 [문법] /*rgb색상값을 16진수로 0 ~ FF까지 범위를 가짐*/ 선택자 {color: #0000FF;} 잘모르겠다면, 네이버에 rgb 색상표라고 검색하면 원하는 색상의 값을 알 수 있다 :) [예시] Color 클래스 아이디 p태그 [결과] 열심히 공부하고.. 2021. 4. 27. 04 CSS 선택자 - 2 CSS 선택자 - 2 1) 속성 선택자 HTML 요소에서 src, href, style, type, id, class..와 같은 속성을 선택자로 지정해서 스타일을 적용한다. [속성명] {선언문} 네이버 속성명과 속성값이 모두 일치하는 요소를 선택자로 지정 [결과] 위의 속성 선택자는 가장 기본적인 형태이고 아래처럼 다양하게 사용한다. [속성명 ~= "속성값"] 속성값이 완벽히 일치하는 문자를 가지는 요소를 선택합니다. [속성명 *= "속성값"] 속성값이 포함된 모든 문자를 가지는 요소를 선택합니다. [속성명 $= "속성값"] 속성값이 접미사로 끝나는 모든 문자를 가지는 요소를 선택합니다. [속성명 |= "속성값"] 속성값이 접두사로 시작되는 문자 중에서 완벽히 일치하는 문자 또는 '-'으로 연결된 문자를.. 2021. 4. 25. 03 CSS 선택자 - 1 CSS 선택자 - 1 CSS의 문법은 선택자(selector)와 선언부(declaratives)로 구성된다. 이 선택자에 대해 알아보자 :) 선택자의 종류는 굉장히 많기때문에, 자주사용하거나 꼭 알아야하는것들로 몇가지만 적어봅니당 1) 전체 선택자 스타일을 모든 요소에 적용할 때 사용한다. * { 속성: 속성값; } [예시] 2) 요소 선택자 특정 요소가 쓰인 모든 요소에 스타일을 적용한다. 선택자 { 속성: 속성값; } [예시] 여기서 잠시 상속에 대해 간단하게 알아보자 상속 : 부모 요소의 속성 값이 자식 요소에게 적용되는 속성 이 말이 무슨 말이냐면! 상속하는 속성임 상속하는 속성임 상속하는 속성임 상속하는 속성임 위와 같은 코드를 입력했을 때, 태그 내에 있는 ,,,에도 컬러를 deepskyblu.. 2021. 4. 25. 02 CSS 적용( 인라인,내부,외부 스타일) CSS 적용 HTML 문서에 CSS 스타일을 적용할 때에는 다음과 같이 세 가지 방법을 사용할 수 있다. 1. 인라인 스타일(Inline style) 2. 내부 스타일 시트(Internal style sheet) 3. 외부 스타일 시트(External style sheet) 1) 인라인 스타일(Inline style) 인라인 스타일은, HTML 요소 내부에 style 속성을 사용하여 적용하는 방법이다. 인라인 스타일 이 방식은 한 번 설정된 스타일을 변경하기가 매우 어려우며, 스타일 시트를 사용하는 많은 이점을 잃게 된다. 따라서 꼭 필요한 경우에만 사용해야 한다. 2) 내부 스타일(Internal style sheet) HTML 문서의 3) 외부 스타일(External style sheet) 웹 사이트.. 2021. 4. 24. 01 CSS란? CSS(Cascading Style Sheets)란? CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어이다. HTML이 정보를 표현하는 언어라면, CSS는 HTML문서를 시각적으로 꾸며주는 역할을 하는 언어이다. CSS의 문법 선택자 { 속성명: 속성값; 속성명: 속성값 ... } 위와 같은 문법을 사용하며, 바로 예시로 살펴 보자 :) [예시] h2 { text-align: center; font-size: 50px; color:red;} p { text-align: center;} 해석 : h2태그의 text를 가운데정렬, 폰트 사이즈는 50px, 색깔은 빨강으로 변경하기 p태그의 text를 가운데정렬 [적용하기] CSS란 HTML이 정보를 표현하는 .. 2021. 4. 24. 이전 1 2 3 다음 반응형
