전체 글
움직이는 웹사이트 제작
1. Transform transform은 특정 영역을 회전시키거나, 확대/축소시키거나, 각도를 변경, 위치를 변경등의 효과를 적용 rotate() : 입력한 각도만큼 화면 scale(2,3) : 숫자는 비율을 의미. width를 2배 height 를 3배 skew(10deg,20deg) : x축 y축을 기준으로 입력한 각도만큼 비틂 translate(100px,200px) : 선택한 오브젝트의 좌표 변경 결과 2. Transition property : width 효과를 적용하고자하는 css속성 duration : 효과가 나타나는데 걸리는 시간 timing-function : 효과의 속도 (linear : 일정하게) delay : 특정 조건 하에서 효과 발동 .translate:hover{width:3..
웹사이트 레이아웃에 영향을 미치는 요소
1. 박스모델 margin과 padding의 차이 margin : border 바깥쪽에서 여백을 만듬. padding : border안쪽에서 여백을 만듬. 공간이 여백을 포함한 크기로 변경 top right bottom left 순으로 한줄로 사용 가능 2. Block 요소와 Inline 요소 Inline 요소는 margin/padding top,bottom사용할수 없음. 3. 마진 병합 현상 -형제지간의 마진병합 -부모자식간의 마진병합 main { width: 100%; height: 400px; background-color: yellow; } article { width: 100px; height: 100px; background-color: red; margin-top:100px; } 부모 자식간..
CSS
CSS 구성요소 선택자 { 속성 : 속성값; } 선택자 : 디자인을 적용할 HTML 영역 속성 : 어떤 디자인을 적용할지 정의 속성값 : 어떤 역할을 수행할지 구체적으로 명령. 세미콜론(;) 필수 입력. h1{ font-size:20px; font-family:sans-serif; color:blue; background-color:yellow; text-align:center; } CSS 연동 방법 세가지 1. Inline Style Sheet Hello World 2. Internal Style Sheet 3. External Style Sheet CSS 선택자(Selector) TYPE : 태그 //Hello world CLASS : 태그 별명 //Hello world ID : 태그 이름 // ID..
HTML
HTML 태그 구성요소 컨텐츠 HTML 문서의 기본구조 ->html 5 문서 선언 -> 문서의 시작과 끝 -> 웹사이트의 눈에 보이는 정보 태그 태그 Hello World Hello World heading 의 약자로 제목이나 부제목을 표현. 태그는 가장 중요한 정보를 담으므로, 하나의 html문서에서 한번만 사용됨. 태그 Paragraph의 약자로 본문내용을 표현 웹사이트의 중요정보를 담는 태그 태그 메뉴1 메뉴2 Unordered list의 약자로 순서가 없는 리스트 생성 메뉴 버튼을 만들때 사용되는 태그 태그 메뉴1 메뉴2 ordered list의 약자로 순서가 있는 리스트 생성 메뉴 버튼을 만들때 사용되는 태그 HTML 태그 구성 요소 목차 본문 부록 목차를 잡을 때 사용하는 태그 header :..