전체 글 134

[CSS] 영역 관련 스타일

영역 구분(바깡쪽에서 안쪽 순서) margin : 바깥쪽 여백 영역 border : 테두리 영역 => 여기까지가 실제 요소의 크기 padding : 내용물영역이랑 테두리 영역 사이의 거리(안쪽여백) content : 실제 내용물이 들어있는 영역 => 실제요소의 크기(영역) == content + padding + border padding 내용물 영역(content)와 테두리 영역(border) 사이의 거리(여백)을조절하는 스타일 속성 margin 타 요소들 사이의 간격을 조정할 때 사용 실제 영역에는 포함이 안되므로 실제 요소 크기에 영향을 미치지 않는다.

*HTML & CSS* 2021.12.07

[CSS] 기타 선택자

1. 속성 선택자 스타일을 부여하고자 하는 요소 내에 작성되어있는 속성을 이용해서 선택하는 방법 기본선택자 뒤에 []를 이용해서 속성과 속성값을 제시해서 선택하는 방법 2. 자손선택자와 후손선택자 자손 : 바로 하위 요소들 후손 : 하위 요소들 전부 3. 동위(같은레벨) 선택자 동위 관계(같은 레벨) 선택자 4. 반응 선택자 마우스의 반응에 따른 속성을 설정 할 수 있다. 5. 상태 선택자 요소의 상태에 따라서 선택되는 선택자 선택할 수 있는 상태의 종류 checked 상태 focus 상태 enabled 상태 disabled 상태 - 선택자 우선순위 기본적으로 css는 스타일이 위에서 아래 순으로 적용됨 동일한 요소를 다양한 선택자로 css가 부여된 경우 우선순위에 다라 적용된다. *선택자 우선순위(높은..

*HTML & CSS* 2021.12.03

[CSS] 기본 선택자

CSS(Cascading Style Sheets) HTML 구조는 그대로 두고 style태그로 구조를 꾸미는 역할을 하는 표현언어 HTML과 마찬가지로 웹 표준이며, CSS3버전까지 존재하고 보통은 3버전을 사용한다. 웹표준 : W3C (WWW Consortium)에서 지장 - CSS 스타일 부여 방식 인라인 스타일 방식 : 스타일을 부여하고자 하는 요소 내에 style속성을 사용해서 직접 기입하는 방식 내부 스타일 방식 : 현재 이 html문서에 적용시키고자 하는 스타일 정보들을 영역에 태그 내에 기입하는 방식 외부 스타일 방식 : 스타일정보만을 따로 관리하는 .css 외부 문서를 만들고 태그를 통해 연결시켜주는 방법 -선택자란? 특정 html요소를 선택하고자 할 때 사용하는 기능 1. 모든(전체) 선..

*HTML & CSS* 2021.12.03

[HTML] 영역 관련 태그 / iframe 태그

1. 블럭 요소 : 한 줄 단위로 영역을 차지하는 요소, 줄바꿈이 적용되어 이미 존재하는 요소 다음줄에 출력 (textarea, p, pre, h1~h6, ......., "div") 2. 인라인 요소 : content 내용만큼만 영역을 차지하는 요소, 줄바꿈이 적용되지 않아 옆으로 연이어 져서 출력 (input, label, mark, s, img, ..., "span") ※ 쉽게 구분하는 법 두 태그를 연이어 썼을때 옆으로 생성되면 인라인요소 자동으로 한줄 개행하고 다음줄에 생성되면 블럭요소 iframe 태그 현재 이 문서 내에 다른 웹페이지를 추가하는 태그

*HTML & CSS* 2021.12.03