웹 페이지 레이아웃 구현 실습 예제 Chania The Flight The City The Island The Food The City Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city. You will learn more about web layout and responsive web pages in a later chapter. Footer Text HTML 삽입 미리보기할 수 없는 소스 웹 페이지 레이아웃 구현 실습 2) 기능추가 - css_layout.html CSS Layout Float In this..

CSS Layout Float - float 속성은 콘텐츠의 위치를 지정하고 형식을 지정하기 위해 사용한다. 예를 들어, 이미지가 컨테이너의 텍스트 왼쪽에 떠 있도록 할 수 있다. - float 속성은 다음과 같다. left : 컨테이너 왼쪽에 떠있는다. right : 컨테이너 오른쪽에 떠있는다. none : 떠있지 않는다. inherit : 상위 요소의 float 값을 상속받는다. 실습 예제 - css_float.html float 속성 이해하기 Div 1 Div 2 Div 3 실습 예제 - css_float_clear.html Without clear div1 div2 - Notice that div2 is after div1 in the HTML code. However, since div1 flo..

CSS Layout Position - position 속성은 요소에 사용되는 위치를 지정한다. Position 속성 - 아래와 같은 position 요소에 사용되는 위치 유형 값이 있다. static relative fixed absolute sticky - 지정한 다음 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성을 사용하여 위치를 지정한다. - position 속성을 먼저 설정하지 않으면 작동하지 않는다. - 또한, 위치 값에 따라 다르게 작동된다. position:static - HTML 요소는 기본적으로 static으로 배치된다. - static 위치 요소는 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성의 영향을 받지 않는다. - 항상 페이지의 일반적인 흐름에 따라 위치가 지정된다. position:static ..

CSS Display 속성 - display 속성은 요소가 웹 페이지에 표시되는 방식을 기본 표시 동작으로 변경하기 위해 사용한다. - 기본 표시 값은 block 또는 inline이다. block 요소 : 항상 새 줄에서 사용 가능한 전체 너비를 차지한다. block 예시 : , - , , , style display : 화면 숨김 우리나라 우리님군 황천이 도으사 님군과 백성이 한가지로 만만세에 길거하야 태평독립 하여보세 브라우저의 영역을 차지하지 않고, 표시가 안됨 마무리 실습 2 - css_visibility.html style visibility : 화면 숨김 우리나라 우리님군 황천이 도으사 님군과 백성이 한가지로 만만세에 길거하야 태평독립 하여보세 브라우저의 영역을 차지하고, 표시가 안됨

CSS Tables - CSS를 사용하여 표를 만들기 위한 속성이다. Table Border - CSS에서 표 테두리를 지정하려면 border 속성을 사용 - , 및 요소를 사용한다. Table Border CSS 예시 코드 table, th, td { border: 1px solid; } Table 전체 너비(Width) - 전체 화면에 걸쳐 있어야 하는 테이블이 필요한 경우 width: 100%를 사용한다. table { width: 100%; } Table 테두리 접기 - border-collapse 속성은 테이블 테두리를 축소하는지 아닌지 여부를 설정한다. table { border-collapse: collapse; } - 테이블 주위에만 테두리를 주길 원하는 경우에는 border 속성만 지정하..