HTML, CSS, JavaScript/CSS (15) 썸네일형 리스트형 레이아웃 스타일1 ▶ 레이아웃(layout)레이아웃(layout)- 사전적 의미 : 배치, 정리- 기술적 의미 : 구성 요소를 제한된 공간에 효율적으로 배치하는 것을 의미화면 배치 방법(형식) : display 속성- 요소가 화면에 어떻게 보여질지 형식을 지정하는 속성1) block : 화면을 수직 분할(행을 나눔) + width / height 속성 사용 가능2) inline : 화면을 수평 분할(하나의 행에 컬럼을 나눔 == 글자처럼 생각하면 됨) + width / height 속성 사용 불가능3) inline-block : inline의 수평 분할 + block의 크기 조정4) none : 화면에 요소가 표시되지는 않으나 존재하고 있는 상태5) flex : 요소의 정렬되는 방향, 요소간의 간격을 유연하게 처리하는 방.. CSS 선택자 우선순위 CSS 선택자 우선순위: 기본적으로 CSS 속성은 style 태그 또는 CSS 파일에 작성된 순서(위 → 아래)대로 해석이 진행되지만, 같은 요소에 여러 CSS 속성이 설정되는 경우 우선 순위가 적용된다.★ 알아둬야 할 것1) 동일한 우선 순위로 CSS 속성이 설정된 경우 → 제일 마지막에 작성된 CSS 속성이 반영됨2) 여러 선택자를 이용해서 같은 요소를 선택하더라도 지정되는 CSS 속성이 다르면 모두 반영됨1순위: CSS 속성 : 속성값 !important;2순위: inline-style 속성 (요소에 직접 작성되는 style 속성)3순위: 아이디 선택자 (#아이디 속성명)4순위: 클래스 선택자 (.클래스 속성명)5순위: 태그 선택자 (태그명) .. CSS 선택자5 ▶ 기타 선택자:only child: 특정 요소의 자식이 하나밖에 없을 때 선택 자식1 자식2 --> /* :only-child */#test1>p:only-child{ background-color: antiquewhite;}:only-of-type: 특정 요소의 자식 중에서 지정된 형태와 같은 자식 요소가 하나만 있을 때 선택 자식1 자식2 자식1 --> 태그가 하나 더 존재하면 CSS코드 적용 안 됨 --> /* :only-of-type */#test2>p:only-of-type{ background-color: antiquewhite;}:empty: 자식 요소가 없는 요소를 선택※ 자식 .. CSS 선택자4 일반 구조 선택자: 형제 관계에 있는 요소 중 특정 요소를 선택하는 선택자(중요) 위치를 기준으로 구분함:first-child:last-child:nth-child(수열):nth-last-child(수열) 테스트1 테스트2 테스트3 테스트4 테스트5 테스트6 /* 일반 구조 선택자 *//* first-child : 형제 관계의 요소 중 첫 번째 요소 */#test1 > p:first-child{ background-color: pink;}/* last-child : 형제 관계의 요소 중 마지막 요소 */#test1 > p:last-child{ background-color: tomato;}/* #test1 .. CSS 선택자3 문자열 속성 선택자: 속성값의 문자열을 확인하여 스타일 적용하는 방식의 선택자1) 선택자[ 속성명 ~= "특정값" ]{ CSS코드; } → 띄어쓰기로 구분되어있는 여러 속성값이 작성된 속성 중 속성값이 특정값을 단어로 포함하는 요소를 선택2) 선택자[ 속성명 |= "특정값"]{ CSS코드; }→ 속성값이 특정값을 단어로 포함하는 요소를 선택 단, "-" 기호로 구분, "-" 앞의 내용이 동일해야함3) 선택자[ 속성명 ^= "특정값"]{ CSS코드; }→ 속성값이 특정값으로 시작하는 요소를 선택 ※ ^ : 캐럿4) 선택자[ 속성명 $= "특정값"]{ CSS코드; }→ 속성값이 특정값으로 끝나는 요소를 선택5) 선택자[ 속성명 *= "특정값"]{ CSS코드; }→ 속성값이 특정값을 포함하는 요소.. CSS 선택자2 기본 속성 선택자: 태그에 작성된 특정 속성을 선택하는 선택자(id, class도 선택 가능하지만, 보통 #, . 을 사용함)- [ 작성법 ]: 선택자[ 속성명 = "속성값"]{ CSS코드; }(참고 사항)1) 선택자는 생략 가능 → 특정 속성을 가진 모든 요소 선택2) "속성값" 양쪽의 쌍따옴표(" ")는 홑따옴표(' ')로 변경하거나 생략할 수 있음 div1 div2 div3 div4 p1 p2 p3 p4/* CSS 파일 파일 전체가 태그 내부라고 생각하면 됨 *//* 기본 속성 선택자 */div[name="name-1"]{background-color: aqua;}[name="name-2"]{background-color: antiquewhite;.. CSS 개요 / CSS 선택자-1 CSS(Cascading Style Sheets): 마크업 언어(HTML)가 실제로 화면에 표시되는 방법(색상, 크기, 스타일 등)을 기술하는 언어 ( == HTML 코드가 화면에 어떤 스타일로 보여질지 지정하는 언어) W3C(웹 표준 지정 기관)에서 CSS를 표준으로 지정함CSS Selector(선택자): 현재 HTML 문서 내에 같은 태그를 선택하는 선택자- [ 작성법 ]: 태그명{ CSS코드; } strong 태그에 작성된 내용입니다. span 태그에 작성된 내용입니다. strong 태그에 작성된 내용입니다. span 태.. 이전 1 2 다음