Front-End Study89 6장_CSS 필수 속성 다루기_2 6.4 배경 속성으로 요소의 배경 설정하기 background-color 속성 요소의 배경에 색상을 입힐 때 사용background-color:; /*예시*/ div{ width:100px; height:100px; background-color:red; } - background-image 속성 요소의 배경에 이미지를 삽입할 때 사용 ```CSS background-image:url('이미지 경로'); /*예시*/ div{ width:160px; height:120px; background-image:url('이미지 경로'); } 1. 요소의 배경크기 작성 2. 이미지의 크기를 배경 크기와 맞출것! background-repeat 속성 요소의 배경 크기가 삽입 이미지보다 클 경우의 반복.. 2023. 11. 28. 6장_CSS 필수 속성 다루기_1 6.1 CSS의 특징 살펴보기 기본 스타일 시트 HTML 자체에는 꾸밈을 담당하는 역할을 가진 태그나 기능X 하지만 기본태그 각각의 속성값에 따른 스타일이 다른 이유 -> 내장된 기본 스타일 시트 적용 우선순위와 개별성 사용자 별도 스타일 속성 정의 > 기본 스타일 시트의 스타일 속성 정의(우선적) h1{ font-size:16px; font-weight:normal; } CSS는 스타일이 단계적으로 적용 -> 같은 스타일을 여러번 정의하면 마지막 속성이 적용 -> 단계적 적용(개별성 규칙) ```CSS p{color:red;} p{color:blue;} p{color:orange}; /*마지막 orange 스타일이 적용됨*/ 선택자 예 점수 전체선택자 * 0 태그선택자 div,.. 2023. 11. 28. 5장_CSS 선택자 다루기 5.1 기본 선택자 사용하기 전체 선택자 모든 요소를 한번에 선택자로 지정*{/*CSS 코드*/} - 태그 선택자 HTML 태그명으로 선택자를 지정 태그명과 ==일치하는 모든 요소==를 한번에 선택 ```CSS 태그명{/*CSS 코드*/} /*예시*/ p{ color:blue; } 아이디 선택자 HTML 태그에서 사용하는 id 속성값을 사용해 선택 # 기호를 사용하여 구분#id속성값{/*CSS*/} /*예시*/ ... 사용자 지정 /*이 부분의 색상이 yellow로 적용*/ - 클래스 선택자 HTML 태그에서 사용하는 class 속성값을 사용해 선택 속성값을 중복할 수 있는 특징을 통해 여러 곳에서 사용 가능 ==. 기호==를 통해 구분 ```CSS .class속성값{/*CSS 코드*/} /*예시*/ ... 2023. 11. 25. 4장_웹 스타일링을 위한 CSS 기초 배우기 4.1 CSS 문법 살펴보기 문법 형식 CSS 문법은 크게 선택자와 선언부로 구분 선택자 : CSS 스타일을 적용할 HTML의 태그 요소 선택 영역 선언부 : 선택자에서 선택한 태그에 적용할 스타일 작성 영역/*기본형식*/ h1{ font-size:24px; color:red; } --- ### 4.2 CSS 적용하기 - 내부 스타일 시트 적용하기 내부 스타일 시트 : HTML 파일 내부에 CSS 코드를 작성하는 방법 보통 ==head==태그 안에 사용(웹 브라우저는 HTML을 첫번째부터 순차적으로 해석함) -> HTML 문서 해석 시마다 매번 다시 읽는 단점 존재. ```html 외부 스타일 시트 적용하기 별도의 CSS 작성 파일을 HTML 문서와 연결s link 태그 사용 - 인라인 스타일 사용하기 .. 2023. 11. 25. 3장_실무에서 자주 사용하는 HTML 필수 태그 다루기_2 3.7 표 만들기 table 태그 HTML에서 표를 생성하는 경우 사용// 기본 형식 - caption 태그 table 태그 안에 사용하며 표의 제목을 지정할 때 사용 ```html // 기본 형식 표 제목 tr 태그 행 생성시 사용// 기본 형식 - th, td 태그 열 생성 시 사용 th는 제목을 나타내는 열, td는 일반적인 데이터를 나타내는 열 ```html // 기본 형식 제목 내용 rowspan, colspan 속성 기본적으로 tr 태그 안에 tr과 th, td를 사용하여 행과 열을 통한 테이블 생성 행과 행을 병합하는 경우 rowspan 사용 열과 열을 병합하는 경우 colspan 사용// 기본 형식 제목1 내용1 제목2 내용2 제목3 최종내용 - thread, tfoot, tbody 태그 .. 2023. 11. 22. 3장_실무에서 자주 사용하는 HTML 필수 태그 다루기_1 3.1 텍스트 작성하기 hn 태그 제목이나 주제를 나타내는 텍스트의 표현 h1~h6까지 6가지로 이루어져있으며, h = heading, n = 중요도(숫자)를 나타냄 1에서 6으로 갈 수록 글자가 작아지고 가늘어짐, 검색 엔진에서 "키워드"로 인식// 기본 형식 제목 - p 태그 본문의 문단을 작성할 때 사용 제목, 주제가 아니면 대부분 본문이므로 자주 사용 ```html // 기본 형식 내용 br 태그 문단에서 줄바꿈을 하는 경우 사용 HTML은 모든 명령과 지시를 태그로 해야하기 때문에 사용해야함// 기본 형식 안녕 하세요 - blockquote 태그 출처에서 인용한 문단 단위 텍스트 작성시 사용 출처가 확실할 경우 cite 속성으로 경로 명시! ```html // 기본 형식 문단 단위 텍스트 q 태.. 2023. 11. 21. 이전 1 ··· 11 12 13 14 15 다음