반응형 Web/CSS16 CSS float 속성 float 속성 해당 html 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어준다 본래는 이미지와 글자를 함께 출력하는 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃을 잡을 때 사용 float 스타일 속성이 적용된 요소는 컨테이닝 블록 안쪽의 왼쪽 또는 오른쪽에 배치 (컨테이닝 블록 : 그 요소와 가장 가까운 block 레벨 조상 요소의 콘텐츠 영역) float 스타일 속성이 적용된 요소는 문서의 일반적인 흐름에서 제거되므로 부모 요소의 콘텐츠로 인식되지 않는다 (모든 자식 요소들에 float 스타일 속성이 설정되면, 부모 요소의 콘텐츠가 없어진다) 다른 콘텐츠는 float 스타일 속성이 적용된 요소의 영역을 피해서 배치 float 속성 문제점 float 속성을 가진 요소는 부모요소의 영역.. 2021. 8. 23. CSS 위치속성 position 속성 HTML 요소의 위치 설정을 지정하는 스타일 속성 속성값 설명 static(기본값) 요소를 문서의 일반적인 흐름에 따라 배치하도록 설정 relative 요소를 문서의 일반적인 흐름에 따라 배치하고, 요소의 영역을 기준으로 top, right, bottom, lefe 스타일 속성의 값에 따라 오프셋을 적용하도록 설정 absolute 요소를 문서의 일반적인 흐름에서 제거하고, 조상 요소 중에 가장 가까운 위치 지정 요소를 기준으로 배치하도록 설정 (조상 요소 중 위치 지정 요소가 없는 경우, 초기 컨테이닝 블록을 기준으로 배치) fixed 요소를 문서의 일반적인 흐름에서 제거하고, 브라우저 화면을 기준으로 배치하도록 설정 HTML 요소의 배치방법 1. HTML 요소의 배치 : 기본적인 .. 2021. 8. 11. CSS 목록속성과 그림자 속성 안녕하세요 : ) 오늘은 간단한 css 속성들을 정리해볼까 합니다. 바로 시작해보죠 CSS 목록 속성 HTML에서는 목록을 표시하는 태그가 , 이 존재합니다. 순서가 없는 목록과 순서가 있는 목록을 기본값이 아닌 다양한 형태의 목록을 만들 수 있습니다. 1. list-style-type : 목록의 불릿과 번호 스타일 지정 순서가 없는 목록 순서가 있는 목록 disc 채운 원 (기본값) decimal 1로 시작하는 십진수 (기본값) circle 빈원 decimal-leading-zero 앞에 0이 붙는 십진수 square 채운 사각형 lower-roman 소문자 로마 none 불릿 없음 upper-roman 대문자 로마 - - lower-alpha 소문자 알파벳 - - upper-alpha 대문자 알파벳 .. 2021. 8. 6. CSS 문단 속성 문단 속성 글자 사이의 간격이나 정렬, 들여 쓰기 등 문단에 관련된 스타일을 지정 1. letter-spacing, word-spacing letter-spacing : 글자 사이의 간격 / word-spacing : 단어 사이의 간격 값이 커지면 간격이 넓어지며, 음수 값도 가능하다 (음수 값일 경우 글자가 겹쳐질 수 있음) 글자 사이의 간격을 변화시키면 단어 사이의 간격도 변화 단어 사이의 간격을 변화시켜도 글자 사이의 간격은 변화 X Hello World Hello World Hello World Hello World Hello World 실행결과 2. text-align block 요소 안에 있는 inline 요소에 적용 가능 block 요소에만 text-align 속성을 적용 가능 정렬되는 건 .. 2021. 7. 15. 이전 1 2 3 4 다음 반응형
