CSS12 CSS Box Model 웹 문서에서 내용 배치 시>> 각 요소를 박스 형태로 구성 : CSS Box Model각 박스 모델은 실제 내용이 들어가는 콘텐츠 영역과 테두리, 여백으로 구성블록 레벨 요소 & 인라인 레벨 요소블록 레벨(Block-lovel)요소태그를 사용해 요소 삽입 시 혼자 한 줄을 차지하는 것→ 해당 요소의 너비가 100%블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다인라인 레벨 (inline-level) 요소태그를 사용해 요소 삽입 시 해당 콘텐츠만큼만 영역을 차지→ 나머지 공간에 다른 요소 삽입 가능한 줄에 여러 개의 인라인 레벨 요소 삽입 가능 박스 모델의 기본 구성웹 문서의 ‘블록 레벨 요소’는 모두 박스 형태>> 스타일 시트에서는 이렇게 박스 형태인 요소를 ‘박스 모델(Box Model) 요.. 2024. 8. 21. CSS List/Table Listlist-style-type 속성 불릿 모양과 번호 스타일을 지정 순서 없는 목록의 경우 목록 앞에 불릿 모양 지정순서 있는 목록의 경우 번호 스타일을 지정list-style-image 속성불릿 대신 이미지를 사용list-style-image: | none속성값으로 none 사용 시 list-style-type 속성에서 지정한 형태로 표시불릿에 들어갈 이미지는 불릿 크기만큼 작아야 좋다.list-style-position 속성목록을 들여쓰는 속성불릿이나 번호의 위치를 들여 쓸기텍스트 문단 사이에 있는 목록을 더 쉽게 구분list-style-position 속성값inside: 불릿 OR 번호가 실제 내용이 시작되는 위치보다 들여쓰기 효과 적용outside: 기본값list-style 속성목록 속성을.. 2024. 8. 20. CSS_Text Style 글꼴 관련 스타일웹 폰트 사용하기텍스트 관련 스타일목록 스타일표 스타일 글꼴 스타일: 텍스트에 적용되는 글꼴에 영향을 주고, 적용되는 글꼴, 크기, 굵기, 이탤릭체 등에 영향을 주는 속성이다.텍스트 레이아웃 스타일: 텍스트의 간격 및 기타 레이아웃 기능에 영향을 주는 속성으로, 예를 들어 선 과 문자 사이의 간격 및 내용 박스 내에서 텍스트가 정렬되는 방식을 조작할 수 있다.글꼴 관련 스타일텍스트 스타일: 사용하는 글자의 모양새를 지정하는 글꼴 스타일 & 웹 문서에서표시되는 텍스트를 지정하는 문단 스타일 font-family 속성글자 크기를 지정한다.: 글자 크기의 단위는 px이나 pt등으로 지정 혹은 백분율 사용한다.'키워드'를 사용하여 글자 크기 지정한다.: xx-small '단위'를 사용하.. 2024. 8. 17. CSS_Selector(3) CSS고급 선택자: 가상 클래스와 가상요 특정 상태의 HTML요소에 스타일을 적용하기 위해 사용>> 요소의 상태, 사용자의 동작, 문서 구조에 따라 구분 1. 사용자의 동작에 반응하는 가상 클래스 선택자:link - 방문하지 않은 링크에 스타일 적용:visited - 방문한 링크에 스타일 적용:active - 웹 요소를 활성화했을 때의 스타일 적용 - 사용자가 요소를 클릭하고 있는 동안 적용:hover- 웹 요소에 마우스 커서를 올려놓을 때 스타일 적용 - 요소 위로 마우스를 올렸을 때:foucs- 요소가 포커스를 받을 때(초점이 맞추어졌을 때) 스타일 적용 사용자 동작에 반응하는 가상 클래스의 순서: link > :visted > :hover > :active 2. 요소의 상태에 따른 가상 클래스 선택.. 2024. 8. 16. CSS_Selector(2) CSS 고급 선택자 : 연결 선택자/ 속성 선택자/ 가상 클래스와 가상 요소연결 선택자: 선택자와 선택자를 연결해 적용 대상을 제한하는 선택자이다.>> 특정 패턴에 따라 요소들 간의 관계를 기반으로 스타일을 적용한다. 1. 자손 선택자(하위 선택자)부모 요소에 포함된 '모든 하위요소'에 적용한다.선택자 A와 B 사이에 공백을 두어 사용한다.상위요소(A) 하위요소(B){...}div요소 내의 모든 p요소에 스타일 적용한다.2. 자식 선택자자식요소에 스타일을 적용하는 선택자이다.A의 직접적인 자식인 B요소에게만 적용한다.선택자 A와 B사이에 > 기호를 사용한다.3. 인접 형체 선택자같은 부로를 가진 형채 요소 중 첫 번째 동생 요소에만 스타일 적용한다.선택자 A와 B사이에 + 기호를 사용한다. 4. (일반).. 2024. 8. 12. CSS_Selector(1) Selectors:선택자는 웹 문서에서 어느 부분에 스타일을 저용할 지 알려주는 기능 전체 선택자 스타일을 문서의 모든 요소에 적용할 떼 시영주로 모든 하위 요소에 스타일을 한꺼번에 적용 할떼 사용 타입 선택자(type selector)>>특정 부분에 스타일 적용태그 선택자(tag selector) = 요소 선택자(element selector)타입 선택자를 사용해 스타일을 지정하면 해당 태그를 사용한 모든 요소에 적용클래스 선택자(class selector)클래스 이름을 사용하여 다른 선택자와 구별>> 클래스 이름 앞에 마침표(.)를 반드시 붙여서야한다.클래스 스타일: 클래스 선택자를 사용해 만든 스타일클래스 스타일 적용>> 태그 안에 class="클래스명" : class속성을 사용하여 지정id 선택자.. 2024. 8. 10. 이전 1 2 다음
