CSS의 텍스트 -택스트의 색상을 설정 -기본값은 검정색 ●letter-spacing 텍스트 내에서 글자 사이의 간격을 설정 예)안녕하세요. 오늘은 화요일.. 아직도? 안 녕 하 세 요. 오 늘 은 화 요 일 . . 아 직 도 ? ●word-spacing 텍스트 내에서 단어 사이의 간격을 설정 예)안녕하세요. 오늘은 화요일.. 아직도? 안녕하세요. 오늘은 화요일.. 아직도? ●text-align 텍스트 수평 방향 정렬을 설정(left,right,center,justify) ●text-indent 단락의 첫줄의 들여쓰기를 설정 ●line-height 줄 높이를 정하는 속성 예) 글자크기가 40px 일 떄 line-height : 1.5 -> 줄높이는 40px의 1.5배인 60px -> 글자 크기는 40px..
CSS 컬러 1. 색상 이름으로 표현 red,yellow,blue ...... 2.RGB 색상 값으로 표현 rgb(0~255,0~255,0~255) red green blue rgba(0~255,0~255,0~255,0~1의 소수) ALPHA 3.16진수 색상값으로 표현 #0000FF ->vkfkd 00 00 FF -> #00F R G B
https://coding-diary100.tistory.com/45 CSS_ 기본 개념과 문법 CSS(Cascading Style Sheet) 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 CSS 문법 HTML 문서 사이에 요소를 사용하여 적용하는 방법 각각 페이지 마다 coding-diary100.tistory.com 가상 선택자 - 클래스를 추가할 필요없이 요소 중에서 순서에 따라 원하는 요소를 선택 li: first-child li 요소 중에서 첫번째 해당하는 요소의 스타일을 적용 ex) ul>li:first-child {color:deeppink;} li:last-child li 요소 중에서 마지막에 해당하는 요소의 스타일을 적용 li:nth-chi..
속성 선택자 -HTML 요소에서 src,href,style,type,id,clss.. 등 속성을 선택자로 지정해서 스타일을 적용 CSS [src] {border : 3px solid red;} [src ='apple.png']{width: 200px; height: 200px} HTMl HTML 코드 속성 선택자 https://www.naver.com" target ="_blink">네이버 속성명과 속성값이 모두 일치하는 요소를 선택자로 지정
https://coding-diary100.tistory.com/45 CSS_ 기본 개념과 문법 CSS(Cascading Style Sheet) 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 CSS 문법 HTML 문서 사이에 요소를 사용하여 적용하는 방법 각각 페이지 마다 coding-diary100.tistory.com 기본 상속 구조 HTML 코드 HTML의 구조 HTML의구조입니다. 상속 구조를 위에서 부터 살펴보자 부모: html 자식 : head , body head 자식: tilte body 자식 :h2, p p 의 자식 :b 1.자식 선택자 - 부모의 요소 하위의 자식요소의 스타일을 적용 body>p {color:deepskyblue} 2. 자손..
https://coding-diary100.tistory.com/45 CSS_ 기본 개념과 문법 CSS(Cascading Style Sheet) 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 CSS 문법 HTML 문서 사이에 요소를 사용하여 적용하는 방법 각각 페이지 마다 coding-diary100.tistory.com 그룹 선택자 여러개의 요소를 나열하고 , 로 구분하여 스타일을 적용 h2,p{설정값} h2 와 p 모두 적용 HTML 코드 그룹선택자 여러개의 요소를 나열하고 ,로 구분해 스타일을 적용 선택자의 종류 전체 선택자 요소 선택자 아이디 선택자 클래스 선택자 그룹 선택자 .
https://coding-diary100.tistory.com/45 CSS_ 기본 개념과 문법 CSS(Cascading Style Sheet) 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 CSS 문법 HTML 문서 사이에 요소를 사용하여 적용하는 방법 각각 페이지 마다 coding-diary100.tistory.com class 선택자 -특정 집단의 요소를 한번에 스타일을 적용 -.기호를 사용해서 같은 class 이름을 가진 요소에 스타일을 적용 - 두개이상의 클래스를 적용할 경우 class 안에서 띄어쓰기로 적용 CSS h2{font-size :20px;} 안녕하세요,반갑습니다 적용 h2.hello {color:deeppink;} 안녕하세요 적용 .he..
id 선택자 - 웹 문서안의 특정 부분 스타일을 적용 - #기호를 사용해서 id속성을 가진 요소에 스타일을 적용 - CSS도 덮어쓴다. -> 순서가 중요 CSS h2 {font-size : 30px;} 1. 2. 둘다 적용 h2#hello {font-size :20px;} 1. 20px로 변함 #hello {color :pink}*1. pink 컬러로 적용 HTML 1. 안녕하세요 2. 반갑습니다 HTML 코드 id 선택자 div 첫번째 영역 div 두번째 영역
https://coding-diary100.tistory.com/45 CSS_ 기본 개념과 문법 CSS(Cascading Style Sheet) 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 CSS 문법 HTML 문서 사이에 요소를 사용하여 적용하는 방법 각각 페이지 마다 coding-diary100.tistory.com 상속 1.부모 요소의 속성값이 자식 요소에게 전달되는 것 2.상속되고 상속되지 않는 스타일이 있다. 사이트 참고(inherited) https://www.w3.org/TR/CSS22/propidx.html HTML 코드 상속 div 영역 상속이란 부모 요소의 속성값이 자식 요소에게 전달되는 속성
https://coding-diary100.tistory.com/45 CSS_ 기본 개념과 문법 CSS(Cascading Style Sheet) 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 CSS 문법 HTML 문서 사이에 요소를 사용하여 적용하는 방법 각각 페이지 마다 coding-diary100.tistory.com 요소 선택자 -특정 요소가 쓰인 모든 요소에 스타일을 적용 ✔상속 부모 요소의 속성값이 자식 요소에게 전달되는 것 상속되고 상속되지 않는 스타일이 있다. 사이트 참고(inherited) ✔https://www.w3.org/TR/CSS22/propidx.html Full property table 'cursor' [ [ ,]* [ auto |..
