전체 글 141

CSS 레이아웃5 - 웹사이트 기본 레이아웃

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

IT/CSS 2018.08.10

CSS 레이아웃4 - 드롭다운 메뉴바 만들기

지난번에 이어 아래 소스로 드롭다운 메뉴바를 만들겠습니다. 버튼에 마우스를 올리면 아래로 메뉴가 촤르륵 뜨는 형태입니다. ■ 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;..

IT/CSS 2018.08.09

CSS 레이아웃3 - 메뉴바 만들기

오늘은 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..

IT/CSS 2018.08.08

CSS 레이아웃2 - full 페이지 만들기

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;..

IT/CSS 2018.08.07

CSS 레이아웃1 - 가운데 정렬

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)..

IT/CSS 2018.08.06

CSS 표(table) 스타일

14. 테이블 스타일※ 테이블에 스타일을 적용할 때, 자주 사용하는 속성을 알려드릴께요표의 선에는 border-spacing: 0; border-collapse:collapse; 를,제목을 나타내는 caption에는 display: none; 을 자주 사용합니다.(표제목은 웹접근성을 감안하여 꼭 작성해야 하지만, 디자인상 없애는 경우가 많습니다.) ■ 예시1 12345678910111213141516171819202122232425262728293031323334테이블 스타일 *{margin:0; padding: 0;} .aa{border: 5px solid #000; border-spacing: 0; border-collapse:collapse; } .aa *{margin:0; padding: 0;} ..

IT/CSS 2018.08.05

CSS 애니메이션(animation)

13. 애니메이션- 요소에 적용되는 CSS 스타일을 다른 스타일로 부드럽게 전환할 수 있다.- 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키 프레임들로 이루어짐. ■ 속성- animation-name: 호출할 애니메이션 이름작성- animation-duration: 애니메이션시간- animation-delay: 딜레이시간- animation-direction: 애니메이션 진행방향(alternate, normal)- animation-iteration-count:반복횟수(숫자 또는 infinite(무한반복)) ■ keyframe 사용한 애니메이션 룰 작성법- keyframe 룰을 이용하여 애니메이션 패턴을 지정하고 요소에서 애니메이션 패턴을 호출 @keyframes..

IT/CSS 2018.08.04

CSS 트랜지션(transition)

12. 트랜지션(transition) - 요소가 이벤트에 의해 값이 바뀔 때 애니메이션을 생성 ■ 속성 - trnasition-delay : 이벤트 발생 후 딜레이 시간 - transition-duration: 트랜지션 지속시간 - transition-property : 트랜지션 할 속성 - transition-timing-function : 속도변형 함수 (참고) http://cubic-bezier.com/ 사이트에서 transition 속성값을 생성할 수 있음) ■ 적용할 수 있는 커브 라이브러리의 종류 (위 사이트 참조) - linear(기본값 = 등속) - ease - ease-in - ease-out - ease-in-out ■ 효과를 줄 수 있는 속성들의 예 1) 위치 : top, left, ..

IT/CSS 2018.08.03

CSS 가시성 제어 - visibility, display, overflow

11. 가시성- 요소를 화면에서 보이거나 감출 수 있음 ※ 아래와 같은 예제로 visibility 속성과 display를 적용해 보겠습니다. 가시성 속성을 적용하기 전에는 빨간색과 초록색의 상자가 위아래로 나란히 있는 상태입니다. 123456789101112131415161718가시성 *{margin:0; padding:0;} .box1{width: 300px; height: 100px; background-color: #f00;} .box2{width: 300px; height: 100px; background-color: #0f0;} 적용 전 (1) visibility- 요소를 화면에서 show/hide 시킬 수 있으며 hidden visible 값을 사용- 화면에서 가려지나 자리를 지키고 있음 ■ ..

IT/CSS 2018.08.02

CSS 플로트(float)

9. 플로트(Float)(1) 플로트의 개념- 플로트는 블록, 인라인 요소를 좌우 정렬한다.(기준은 부모요소를 기준으로)- 플로트가 적용되면 자신의 자리를 다음에 오는 블록요소에게 내어준다.- 플로트요소는 플로트요소끼리만 정렬하며 일반요소와는 정렬하지 않음- 예시) float: left; (2) 플로트와 일반요소가 함께 있는 경우■ 작성법- float에 적용하는 값은 left, right- 플로트 적용시 자신이 있는 위치에서 부모요소를 기준으로 왼쪽 또는 오른쪽 정렬을 한다.- 자신의 자리를 다음 요소에게 내어줌. 다음에 오는 요소는 플로트 요소 아래에 배치됨 ■ 예시1 123456789101112131415161718192021222324252627282930313233343536Float *{marg..

IT/CSS 2018.08.01