Amazing Story

일반적으로 사용되는 웹사이트의 기본 레이아웃에 대해 알아보겠습니다. 아래 그림과 같은 형태입니다. 왼쪽 또는 오른쪽 content 부분은 생략할 수도 있지만,헤더, 메뉴바(내비게이션), 메인 콘텐츠, 푸터보통은 이러한 형태를 갖고 있죠.이때 주의할 점은, body는 모든 요소를 그룹화하고 있으나 body아래 전체 요소를 그룹짓는 요소를 생성하는 것이 좋습니다. HTML5의 시멘틱 태그를 사용해서같은 형태로도 사용할 수 있고, 아래처럼 div에 id나 class를 선언해서 사용할 수도 있습니다. 어떤 형태로 쓰셔도 상관없지만, 중요한 건!!각각 그룹을 지어 사용한다는 점만 주의하시면 될 것 같아요. ■ 예시1 123456789101112131415161718192021222324252627282930313..

지난번에 이어 아래 소스로 드롭다운 메뉴바를 만들겠습니다. 버튼에 마우스를 올리면 아래로 메뉴가 촤르륵 뜨는 형태입니다. ■ HTML 소스 12345678910111213141516 Dropdown Link 1 Link 2 Link 3 ■ 스타일 소스※ 아래 소스를 복사해서 HTML 소스의 스타일 태그 안에 넣어주세요. 여기에 넣어주세요. 1234567891011121314151617181920212223242526272829303132333435.dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer;}.dropdown { position: relative;..

오늘은 4개의 카테고리를 가진 세로 메뉴바 / 가로 메뉴바를 만들어보겠습니다. w3school에 있는 예제를 참고했구요, html 소스는 다음과 같습니다. ■ HTML 소스 1234567891011121314 Home News Contact About 1. 세로 메뉴바 ■ 스타일 소스1※ 아래 소스를 복사해서 HTML 소스의 스타일 태그 안에 넣어주세요. 여기에 넣어주세요. 123456789101112131415161718192021ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1;}li a { display: block; color: #000; padding: 8px 16px; text-de..

1. 퍼센트(%) 사용하기- body에 height 100%, 직계 자식요소의 width, height 값 100% 적용하기 ■ 예시1123456789101112131415161718레이아웃2 *{margin:0; padding: 0;} html, body{height: 100%;} .box{width: 100%; height: 100%; background-color: #00f;} .box1{width: 100%; height: 100%; background-color: #0f0;;} ■ 실행결과1※ 스크롤을 내려 확인해보세요. 각각의 div상자가 페이지 전체를 차지하고 있는 형태입니다. 2. 포지션(position) 사용하기 ■ 예시2 1234567891011121314레이아웃2 *{margin:0;..

1. 좌우 가운데 정렬 - 계층구조에서 부모요소에게 width값을 선언, height 값은 자식요소인 콘텐츠의 내용으로 사용. - 부모요소에 height를 고정값으로 넣지 말것!- width 값을 필수로 입력하고, 좌우 마진값을 auto로 설정한다. margin:0 auto; ■ 예시1 12345678910111213141516레이아웃 *{margin:0; padding:0;} .center{width: 200px; height: 100px; background-color: #ccc; margin:0 auto;} 블록요소의 가운데 정렬 ■ 실행결과1 2. 화면 가운데 배치하기- 화면 정가운데 배치는 position을 사용- left:50%; top:50%; margin-left: -(width의 1/2)..

이전에 로렘입숨에 대해서 설명 드린 적이 있습니다. 영어, 한글로 된 의미없는 텍스트의 나열로, 전체적인 레이아웃을 살펴 보기 위해, 임의로 작성하는 텍스트라고 말씀 드렸네요. 그럼.. 이미지는 어떨까요? 이미지도 전체적인 레이아웃을 보기 위해서 임의로 넣을 수는 없을까요? 그 해답을 들고 왔습니다. 두 군데 사이트를 알려드릴께요. 먼저, https://placeholder.com/ 위에 그림처럼 생겼구요, 보이는 것처럼이미지 태그 안에 src 속성에 "http://via.placeholder.com/가로길이x세로길이" 를 넣으면 된답니다. 바로 이렇게 이미지가 생성됩니다. 이 이미지에 색상이나 글자를 넣을 수도 있어요. 어떻게 나오는지 한번 볼까요? 깔끔하게 나왔네요^^ 두번째로,https://dumm..