Grid system 그리드 시스템 사용법 참고 : https://getbootstrap.com/docs/3.4/css/#grid 예시 칼럼1 칼럼2 CSS 2019. 11. 21. 12:45
메뉴만들기연습3 문제 back-drop의 display 값이 변경되는 것을 상태값으로 관리해보세요. 1. javascript의 상태값 개념을 알고 사용할 줄 안다. 2. 상태값이 어떤 것을 기준으로 변경되어야하는 줄 안다. 답 css 변경없음 html 변경없음 javascript CSS 2019. 11. 20. 14:26
메뉴만들기 연습2 문제 img 사진을 넣어 contents의 높이가 자동으로 img 사이즈로 출력되게 해보세요. backdrop 만들기 (1)page로딩 시점에는 back-drop이 안 보임 (2)menu를 클릭하면 back-drop이 보임 (3)menu의 list를 클릭하거나 back-drop을 클릭하면 dackdrop이 안보임 1. display 속성을 알고 사용할 줄 안다. 2. z-index속성을 알고 사용할 줄 안다. 3. 엘리먼트에 javascript로 css 속성을 넣어줄 줄 안다. 답 css html 메뉴입니다 짜장면 짬뽕 볶음밥 menu 메인 컨테츠 입니다. Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatem suscipit cum.. CSS 2019. 11. 20. 13:43
메뉴만들기 연습1 문제. menu버튼을 클릭했을때 menu가 오른쪽으로 움직이게 해보세요 1. css속성의 position이 부모요소와 자식요소 혹은 자손요소에 있을 경우 어떻게 출력되는지 안다. (참고 : https://www.w3schools.com/cssref/tryit.asp?filename=trycss_position2) 2. overflow 속성이 무엇인지 알고 어느 위치에 써야할지 안다. (콘텐츠가 요소의 상자를 벗어났으므로 요소의 상자에 overflow 속성을 써야한다.) 3. javascript를 이용해 css속성을 추가할 수 있다. (javascript로 CSS속성을 추가하면 inline으로 요소에 속성을 넣는것) 답 메뉴입니다 짜장면 짬뽕 볶음밥 menu CSS 2019. 11. 19. 23:49
CSS+Javascript 1 문제 박스를 클릭할때마다 오른쪽으로 움직이게 해보세요. 1. top, right, bottom, left는 CSS의 position 속성으로 현재 좌표를 알려줘야 javascript로 움직일 수 있음. (margin,padding, border, contents 등은 알려주지 않아도 됨.) 답 CSS 2019. 11. 19. 18:33
이미 만들어져 있는 css요소를 div에 적용해보기 문제 위의 css 요소를 div 요소에 자유롭게 적용해보세요. HTML문서의 class 속성 값을 다중으로 줄 수 있다. 답 div1 div2 div3 div4 div5 CSS 2019. 11. 19. 18:08
p 요소 변경하기 문제 p요소의 1. 배경색을 검정색으로 2. 글자의 색상을 흰색으로 3. 글자의 크기를 30px로 4. 마진은 0으로 바궈 보세요 답 quas laboriosam. Quos ipsam laboriosam repudiandae? CSS 2019. 11. 19. 18:02
가상클래스 PseudoClass / 가상요소 PseudoElement 가상클래스 PseudoClass 표기방법 div:가상클래스{ } //예시 div:hover{background-color: yellow;} 종류 hover mouseover 할때 나타나는 css 동작 focus focus가 왔을때 나타날 css동작 active 마우스 클릭시 나타날 css설정 active link 한번도 방문하지 않은 링크 a:link{color: olive;} visited 이미 방문했던 링크 a:visited{color: brown;} :nth-child 선택기는 부모에 관계없이 n번째 아이인 모든 요소와 일치한다. 가상요소 PseudoElement 표기방법 //문법 선택자::가상요소{ } //예시 p::first-letter 종류 ::first-letter 지정된 선택자의 첫 번째 .. CSS 2019. 11. 19. 17:56
속성(Properties)과 값(Value) background-color element의 배경색을 설정하는 속성 border와 padding을 포함한 영역을 칠합니다. margin 영역은 칠하지 않습니다. {background-color: #cecece;} color 글자색을 지정 {color: white;} position html문서는 고정되어 있고 Web Browser Window를 움직여서 문서를 보는 것임. html문서는 좌 상단이 기준점(0,0)임. default값은 static이다. 부모요소 부모요소의 position값이 static일 경우, 자식요소의 position은 동작하지 않음. value 설명 static 기본값. 구성요소는 문서 흐름에서 나타나는 순서대로 렌더링함 (문서기준으로 정적인 위치에 있음) relative rela.. CSS 2019. 11. 19. 12:43
BoxModel BoxModel 박스모델 설정 변경하기 margin, padding /*예시*/ 버튼 버튼1 버튼2 버튼3 버튼3 버튼3 border margin 1. 위아래의 요소의 margin은 서로 겹쳐지며, 사이즈가 큰 것만 남는다. CSS 2019. 11. 19. 12:43
