Dev

[CSS] float 요소와 clear 요소

- float(띄우다) 속성 - 객체를 어느 위치에 띄울지 설정하는 속성 - clear(해제하다) 속성 - float 속성 값을 해제하는 속성 - float 속성 값 - none : float를 설정을 하지 않음 - left: 왼쪽에 배치 - right : 오른쪽에 배치 - clear 속성 값 - none : 속성을 해제하지 않음 - left: float에 left 속성을 해제 - right : float에 right 속성을 해제 - both : float에 right 또는 left를 해제 - flaot : none -> float 속성이 되지 않음 - float : left -> 왼쪽으로 배치 - float : right -> 오른쪽으로 배치 - clear test 텍스트 부분은 현재 float요소로 ..

[CSS] overflow 속성

- overflow 속성 - 지정된 요소를 크기를 벗어났을 때 처리하는 방법 - overflow 속성 값 - visible : 지정된 요소를 벗어나도 출력 - hidden : 지정된 요소를 벗어난 부분은 출력을 하지 않게 처리 - scroll : 지정된 요소에 대한 크기를 벗어나지 않아도 스크롤이 출력 - scroll-y : 세로 축 스크롤 - scroll-x : 가로 축 스크롤 - auto : 지정된 요소를 벗어나면 스크롤이 나오고 넘지 않으면 스크롤이 출력이 되지 않음 - overflow : visible -> width는 200px, height는 50px로 설정이 되어도 visible 속성에 따라 텍스트가 벗어남 - overflow : hidden -> width와 height의 따라서 나머지 부..

[CSS] position 속성

- position 속성 - 웹 페이지 상에 어떤 위치에 배치할지 설정하는 요소 - position 속성 값 - static : position의 초기값으로 자동으로 배치 top, right, bottom, left가 설정이 되지 않으며 즉, position에서 생략이 가능 - relative : 부모 요소에 의해서 이동 되는 속성 값 이 속성 부터 top, right, bottom, left를 사용을 할 수 있음 - absolute : 부모 요소에 대한 지장을 받지 않으며 자신의 단독으로 위치를 설정이 가능 - fixed : 어떠한 요소에도 지장을 받지 않으며 사용자가 설정한 위치에 따라서 고정으로 배치 - sticky : 사용자 스크롤 위치에 따라서 설정이 됨 해당 위치 부터 top: 0이 되면 fi..

[CSS] display 속성

- display 속성 - 화면에 어떻게 보여줄 지 설정을 하는 요소 - display 속성 값 - inline : 인라인 요소이며 block 요소를 inline요소로 변경 div태그의 기본 성질은 block을 가지고 있으며 해당 요소를 span 태그처럼 사용이 가능 width와 height 요소가 무시가 됨 앞 뒤 줄바꿈이 되지 않음 - block : 블록 요소이며 inline 요소를 block요소로 변경 span태그의 기본 성질은 inline을 가지고 있으며 해당 요소를 div태그처럼 사용이 가능 앞 뒤 줄바꿈이 가능 - none : Box가 생성이 되지 않으며, 웹 페이지에 공간을 차지하지 않음 - inline-block : inline 요소와 block 요소의 성질을 둘 다 가지고 있음 width..

[CSS] margin과 padding

- margin(마진)이란? - 요소 바깥쪽 여백 - 즉, border(테두리) 바깥쪽 여백을 설정하기 위해서 사용 - padding(패딩)이란? - 요소의 안쪽 여백을 설정 - 즉, Content(내용) 바깥쪽 여백을 설정하기 위해서 사용 - margin과 padding의 기본 사용법 - margin 기본 구조 : margin : [Top(상단)]px [Right(오른쪽)]px [Bottom(하단)]px [Left(왼쪽)]px; - padding 기본 구조 : padding : [Top(상단)]px [Right(오른쪽)]px [Bottom(하단)]px [Left(왼쪽)]px; - margin과 padding 응용 사용법 - margin : 20px; -> border(테두리) 바깥쪽의 상 하 좌 우 여..

[CSS] CSS 정의

- CSS란? - Cascading Style Sheet 약자 - HTML문서를 시각적으로 표현 - 즉, HTML이 사람이면 CSS는 옷으로 표현을 할 수 있음 - CSS 속성 - 여러 속성값이 들어가게 되면 공백으로 구분 - 속성이 선언이 되지 않으면 HTML 태그의 기본으로 설정된 속성으로 사용이 됨 - CSS 기본 구조 - 선택자(Selector) : HTML태그, class값, id값 등을 선택 - 프로퍼티(Property) : CSS설정 요소 - 값(Value) : CSS 요소에 대한 설정값 - CSS 사용 방법 - 현재 웹 페이지에 출력된 결과는 위 내용은 일반적인 태그로 사용 아래 내용은 CSS를 추가한 내용 1. HTML 문서에서 style 속성으로 사용 - HTML 태그에서 사용할 수 있..