무루무루 개발일지

과제. 홈페이지 첫 화면에 애니메이션 효과 적용하기( index.html ) muru muru NEWS WEBSITE RESUME Login Sign in LOADING... [SAKAMOTO DAYS]  ( index.css )@font-face { font-family: 'KCC-Hanbit'; src: url('https://cdn.jsdelivr.net/gh/projectnoo..

1. Css 우선순위1) 동일한 속성을 적용할 경우 나중에 적용한 것이 우선2) 외부 스타일 시트와 내부 스타일 시트의 적용은 순서에 따라 나중에 적용한 것이 우선3) 내부, 외부, 인라인 스타일 시트 중 인라인을 우선시 적용되면4) 우선순위 계산    - inline: 1000점    - id: 100점    - class, 속성 선택자: 10점    - element: 1점5) !important를 적용하면 0순위 ex)   ( style.css )div { background-color: purple;} ( Html ) CSS 우선순위 div 1번 div 2번 div 3번 div 4번 div 5번 ..

1. 미디어 쿼리 1 미디어쿼리1 2. 미디어쿼리2 ( 미디어쿼리2.css ) * { margin: 0; padding: 0; box-sizing: border-box; } header { width: 100%; background-color: black; margin-bottom: 20px; } nav > ul { height: 50px; list-style: none; color: gold; } nav > ul > li { float: left; padding: 10px; margin: 5px 5px; font-size: 12px; } /* 구형폰: 320px 일반폰: 360px */ nav, #contents { width: 320px; margin: 0 auto; } #intro > img { w..

1. z-index - HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠 수 있음 - 겹쳐지는 요소들이 쌓이는 순서를 결정할 때 z-index를 사용 - 순서는 숫자의 크기가 클수록 위에 위치하고 작을수록 아래 위치하게 됨 z-index 1번째 div 2번째 div 3번째 div 2. float - HTML 요소가 주변(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만듦 - float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려짐 - float를 적용받은 요소의 다음에 나오는 요소방향을 결정 (left, right) - 컨텐츠 크기 만큼만 영역을 설정(블록) - float를 적용받은 요소는 다른 요소보다(배경)보다 위에 위치 float1 Lorem ipsum do..

1. 정적 위치 지정방식- static position (기본값)- HTML 요소의 위치를 결정하는 기본적인 방식- 단순히 웹 페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식 2. 상대 위치 지정방식- relative position- HTML 요소의 기본 위치 (정적 위치 지정방식)를 기준으로 위치를 재설정하는 방식- top, left, right, bottom 속성값을 사용하여 재설정함 상대 위치 지정방식 상대 위치 지정방식1 상대 위치 지정방식2 상대 위치 지정방식3 3. 고정 위치 지정방식- fixed position- 웹 페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치- 뷰포트를 기준으로 위치를 설정하는 방식- top, left, right..

1. 패딩 - 내용과 테두리 사이의 간격 또는 여백 - padding-top, padding-right, padding-bottom, padding-left - padding: 위 오른쪽 아래 왼쪽 순으로 설정 ( HTML ) 안녕하세요 ( CSS ) div#padding {padding: 20px 50px 30px 10px;} 위 오 아래 왼 div#padding {padding: 20px 50px 10px;} 위 좌우 아 div#padding {padding: 20px 50px ;} 위아래 좌우 div#padding {padding: 20px;} 사방 패딩 Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde iusto dolorem place..