Tiny Bunny

본문 바로가기

💻/CSS16

위치 속성 / html 요소 배치하기 (position, float, clear) css의 position 속성으로 html요소를 기본 흐름에서 벗어나서 원하는 곳에 배치할 수 있다. CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정한다. 그리고 float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정한다. 1.position 속성 ( static / relative / absolute / fixed / sticky / z- index ) 2. float 속성( none / left / right ) 1.position: 속성값; 1.1. static postition값을 static으로 지정하면 아무런 변화가.. 2024. 1. 7.

박스 모델 속성(margin, border, padding, content) [ 박스모델 ] 박스모델은 CSS에 포함되는 모든 요소의 외장이고, 이 박스를 이해하는 것은 CSS을 통해 레이아웃을 생성하거나, 아이템과 다른 아이템을 정렬하는 것을 가능하게 한다. - 박스 모델은 html 요소가 사각형 박스에 둘러 쌓여있음. - 박스 모델은 'margin- border- padding- content' 로 구성 margin 요소 외부 여백 border 요소 테두리(경계선) padding 요소 내부 여백 content 요소 내용 각 영역별로 그 특징과 어떤 변화값을 줄 수 있는지 알아보자. 1. Margin 영역 영역에서 margin 크기를 설정 한 모습 [여러 속성 사용법] margin-top: margin-bottom: margin-left: margin-right:.. 2024. 1. 7.

텍스트 속성들 정리 / textarea 고정하는법 1. 체크박스 다음을 만들기 위해 사용된 코드는 이렇다. html은 저번에 사용했던 틀과 동일하다. ㄴ 체크하면 지정된 label의 색상을 변경하겠다는 의미색은 빨간색으로 설정했다. 사용된 +a 여러 텍스트 속성들을 정리해보자면, 1. font-size: 사이즈px 2. font-weight: 3. font-family: 글꼴 유형; 유사 유형 4. font-style: 5. font-variant: 6. Color: 7. text-decoration: 8. letter-spacing: (normal =웹브라우저 기본값) 9. line- height: 10. text-align: 이렇게 앞으로 css에서 자주 사용될 text 꾸미기 속성들을 몇 가지 정리해보았다! 2. 로그인/ 메모 박스 저번에 .. 2024. 1. 7.

CSS적용방식 / 내부스타일 시트, 외부스타일 시트, 인라인스타일 드디어 CSS 시작 ! 먼저 css의 문법 기본틀은 이렇다. 선택자{속성: 값;} ex) p{color:green;} 위 안에 있는 세 개의 문단들을 각각 다른 방식을 적용해서 글자 색상을 변경해보겠다.ㅎㅎ 글자의 색을 바꾸는 문법의 종류에는 세 가지가 있다. 내부 스타일 시트/ 외부 스타일 시트/ 인라인 스타일 1. 내부 스타일 시트 - 태그를 사용, html 문서에 바로 적용함. - 태그 내에 작성함. 태그를 태그를 사용하여 내부 스타일 시트 방식으로 변경 완료. 이 밖에 내부 스타일 시트 2. 외부 스타일 시트 (*가장 많이 사용) - 외부에 있는 .css(stylesheet 파일) 문서를 연결함. -실무에서 사용, 가장 많이 사용 -안에 외부의 .css문서 파일 링크와.. 2024. 1. 7.

이전 1 2 다음

티스토리툴바