전체 글 (68) 썸네일형 리스트형 레이아웃 스타일2 ▶ 요소의 영역(여백) 관련 속성HTML 요소는 총 4가지 영역으로 구성되어 있음content 영역- 요소의 내용이 작성되어지는 영역 : 시작태그와 종료태그 사이에 작성되는 내용padding 영역- content 영역과 border 영역 사이border 영역- 요소의 테두리가 지정되는 영역- content 보다 바깥쪽에서 content를 감싸고 있음margin 영역- 다른 요소와의 간격을 나타내는 영역기준내용border 영역내용content 영역내용padding 영역내용margin 영역내용내용.box{ width: 100px; height: 100px; background-color: lightcoral;}/* content 영역 */.content{ width: 150px; .. 레이아웃 스타일1 ▶ 레이아웃(layout)레이아웃(layout)- 사전적 의미 : 배치, 정리- 기술적 의미 : 구성 요소를 제한된 공간에 효율적으로 배치하는 것을 의미화면 배치 방법(형식) : display 속성- 요소가 화면에 어떻게 보여질지 형식을 지정하는 속성1) block : 화면을 수직 분할(행을 나눔) + width / height 속성 사용 가능2) inline : 화면을 수평 분할(하나의 행에 컬럼을 나눔 == 글자처럼 생각하면 됨) + width / height 속성 사용 불가능3) inline-block : inline의 수평 분할 + block의 크기 조정4) none : 화면에 요소가 표시되지는 않으나 존재하고 있는 상태5) flex : 요소의 정렬되는 방향, 요소간의 간격을 유연하게 처리하는 방.. 표 관련 태그 ▶ 표 관련 태그table 태그: 웹 문서에서 자료 정리를 위해 주로 사용하는 태그: 행과 열로 이루어져 있으며, 행과 열이 교차하는 지점을 셀(cell)이라고 함: table 태그는 테이블을 나타내는 행과 열이 작성될 수 있는 영역을 지정함tr 태그: Table Row의 약자로 한 행을 나타내는 태그td 태그: Table Data의 약자로 한 행의 한 컬럼( == 셀)을 나타내는 태그th 태그: Table Header의 약자로 컬럼명을 표시하는 용도의 태그: 기본 성질은 td 태그와 같으나, 추가적으로 굵은 글씨, 가운데 정렬이 이루어짐caption 태그: 테이블의 제목이나 설명 내용을 추가하는 태그 웹 브라우저의 종류 .. 목록 관련 태그 ▶ 목록 관련 태그ul (Unordered List) 태그: 순서가 없는 목록을 작성하는 태그(영역)li (List Item) 태그: 목록에 들어가는 내용을 작성하는 태그 돈가스 햄버거 서브웨이 ol (Ordered List) 태그: 순서가 있는 목록을 작성하는 태그(영역)ol 태그의 type 속성- 기본값 : 1부터 1씩 증가하는 숫자- type = "a" → 영어 소문자 순서- type = "A" → 영어 대문자 순서- type = "i" → 로마숫자 소문자 순서- type = "I" → 로마숫자 대문자 순서+ 추가 속성- start = "5" → 순서가 5부터 시작- reversed → 순서를 반대로 .. 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코드; }→ 속성값이 특정값을 포함하는 요소.. 이전 1 ··· 4 5 6 7 8 9 다음