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

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

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

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

- HTML5 이전에 레이아웃 구조 설정 - 위의 사진에 방법처럼 class또는 id 속성으로 설정을 많이함 - 현재로서도 이런식으로 많이 쓰이기도 함 - HTML5에 시멘틱 레이아웃 구조 설정 - 이러한 형태로 시멘틱 태그로 레이아웃을 설정을 할 수 있음 - Tag : 주로 머리글을 지정 -> class = "headeer" - Tag : container 영역 -> class="container" - Tag : 주로 메뉴로 설정 -> class="nav" - Tag : content 실제 내용을 적용 -> class="content" - Tag : 하단을 지정 회사정보, 저작권 등 -> class="footer"