728x90 반응형 KDT82 CSS의 텍스트(Text) 1. color 텍스트의 색상을 설정 기본값은 검정색 2. letter-spacing 텍스트 내에서 글자 사이의 간격을 설정 예) 안녕하세요. 오늘은 화요일.. 아직도? ㄴ> 안 녕 하 세 요 . 오 늘 은 화 요 일 . . 아 직 도? 3. word-spacing 텍스트 내에서 단어 사이의 간격을 설정 예) 안녕하세요. 오늘은 화요일.. 아직도? ㄴ> 안녕하세요. 오늘은 화요일.. 아직도? 예제 코드 CSS 텍스트1 letter-spacing CSS의 letter-spacing 속성 테스트 word-spacing CSS의 word-spacing 속성 테스트 4. text-align 텍스트 수평 방향 정렬을 설정(left, right, center, justify) 5. text-indent 단락의 첫 .. 2023. 3. 28. CSS의 색상(Color) 1. 색상 이름으로 표현 red, yellow, blue, salmon, ... 2. RGB 색상값으로 표현 rgb(0~255, 0~255, 0~255) -> rgb(0, 0, 255) RED GREEN BLUE rgba(0~255, 0~255, 0~255, 0~1의 소수) ALPHA 3. 16진수 색상값으로 표현 #0000FF -> 파랑 00 00 FF -> #00F R G B 2023. 3. 28. 선택자의 종류 2 6. 자식 선택자 부모의 요소 하위의 자식요소의 스타일을 적용 body > p { color: deepskyblue;} 7. 자손 선택자 조상요소 하위의 모든 요소의 스타일을 적용 자손은 자식을 포함 body p {color: deepskyblue;} 예제 코드 자식, 자손 선택자 네이버 구글 다음 네이트 8. 인접 형제 선택자 동일한 부모의 요소를 갖는 자식 요소들의 관계 연속된 동생 요소의 스타일을 적용 h2 + p {color: deepskyblue;} 9. 일반 형제 선택자 형제 관계를 갖는 요소 중에서 요소 다음에 나오는 모든 동생 요소의 스타일을 적용 h2 ~ p {color: deeppink;} 예제 코드 형제 선택자 첫째 둘째 셋째 넷째 다섯째 여섯째 10. 속성 선택자 HTML 요소에서 .. 2023. 3. 28. 선택자의 종류 1 1. 전체 선택자 스타일을 모든 요소에 적용 '*' 기호를 사용해서 표현 너무 많은 요소가 있는 HTML 문서에 사용할 경우 클라이언트에 부하를 줄 수 있음 { 속성명1: 속성값; 속성명2: 속성값 ...} ✔ 개별적으로 적용한 스타일은 전체 선택자에 적용한 스타일보다 우선! 예제 코드 전체 선택자 스타일을 모든 요소에 적용 '*' 기호를 사용해서 표현 너무 많은 요소가 있는 HTML 문서에 사용할 경우 클라이언트에 부하를 줄 수 있음 2. 요소 선택자 특정 요소가 쓰인 모든 요소에 스타일을 적용 예제 코드 요소 선택자 특정 요소가 쓰인 모든 요소에 스타일을 적용함 span 요소 strong 요소 ins 요소 mark 요소 3. 상속 선택자 부모 요소의 속성값이 자식 요소에게 전달되는 것 https://.. 2023. 3. 28. CSS란? CSS(Cascading Style Sheet) * 웹 페이지의 특정 요소 또는 요소 그룹에 적응할 스타일 그룹을 지정하는 규칙을 정의하는 언어 참고 * MDN : https://developer.mozilla.org/ko/ CSS 문법 HTML 문서 인라인 스타일 HTML 요소 내부에 style 속성을 사용하여 적용하는 방법 2. 내부 스타일 HTML 문서의 사이에 요소를 사용하여 적용하는 방법 예제 코드 CSS를 적용하는 방법 인라인 스타일 내부 스타일 외부 스타일 3. 외부 스타일 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 적용하는 방법 예제 코드 CSS /* css.css 작성일: 2023-03-28 내용: 외부 스타일 적용 방법 */ h2 { font-size: 50px; } .. 2023. 3. 28. HTML의 디스플레이 1. inline content 크기 만큼만 자리를 차지하는 요소 텍스트, img, span 텍스트의 특징을 가지고 있음 2. block 라인을 모두 차지하는 요소 p, h, ul, li, div, ... 명의 특징을 가지고 있음 span 태그 줄 단위로 영역이 설정 inline 특징을 가지고 있음 div 태그 면 단위로 영역이 설정 block 특징을 가지고 있음 시맨틱 태그(Sementic) Sementic: 의미론적인 의미가 있는 태그를 사용 시맨틱 태그의 장점 검색 엔진 최적화 스크린 리더를 사용하여 페이지를 탐색할 때 도움 div>div>div>div>div>... 끝없는 div를 탐색하는 것보다 효율적 개발자에게 명확한 의미를 전달 디스플레이 1. span 태그 영역입니다. div 태그 영역 2023. 3. 27. 이전 1 2 3 4 5 6 7 8 ··· 14 다음 728x90 반응형
