생활코딩CSS 4

생활코딩 : JS 정리 -5. 낮/밤 버튼 (by 웹 어플리케이션 만들기)

JS 낮/밤 버튼 1.낮/밤 버튼을 만든다. 2.오른쪽 구석탱이로 옮긴다. #control { float: right; } : CSS태그이므로 style태그에서 조정한다. 3.배경색/글자색이 다른 낮/밤 태그를 만든다. body.white{ background-color: white; color:black; } : CSS태그이므로 style태그에서 조정한다. class속성은 white이다. body.black{ background-color: black; color:white; } : CSS태그이므로 style태그에서 조정한다. class속성은 black이다. 4.버튼을 누르면 바디태그의 속성이 달라진다. 5.완성된 4의 태그를 모든 페이지에 붙여넣기한다.

JavaScript 2020.08.29

생활코딩 : JS 정리 -4. 이벤트 태그 (by 웹 어플리케이션 만들기)

JS 이벤트 태그 -HTML tag -JS tag prompt("hello world"); alert("hello world"); :알림창 API. 태그 안에 있을땐 그냥JS 태그이다. : 태그 안에 들어오면 onclick은 이벤트 태그가 된다. alert은 HTML태그 안에 넣을 수 있다. onclick : 클릭하는 이벤트 onfocus : 커셔 갔다대는 이벤트 onblur : 다른곳에 갔다대는 이벤트 : text창에 내가 원하는 글을 쓰고, 버튼을 누르면, 알림으로 그 글이 나오는 코드이다. getElementById : 아이디를 통해 태그를 가져온다 는 뜻. document. : 함수 분류 태그 .value : 값을 표시하는 태그 id="user_input" : 의 아이디를 유저인풋으로 설정한다는 ..

JavaScript 2020.08.29

생활코딩 : CSS 정리 -2.박스모델, 중복의 제거, 크롬stylebot (by 웹 어플리케이션 만들기)

박스모델 {border:1px red solid;} : 테두리, 두께, 색상, 단선(solid)/점선(dotted) _띄어쓰기하면 됨 {padding: 30px;} : 콘텐츠와 테두리 사이의 여백 (안쪽) {margin: 50px;} : 테두리 사이의 상하좌우 간격 (바깥쪽) {width: } : 콘텐츠의 가로 크기 {height: } : 콘텐츠의 세로 크기 구글 크롬 개발자 모드 : 웹상에서 조절 미리보기 가능 박스모델 응용 밑에만 선긋기 - {border-bottom: 1px solid gray;} 여백 만들기 - {padding: 20px;} 오른쪽만 선긋기 - {border-right:1px solid gray;} 콘텐츠 가로 - {width:250px;} 콘텐츠 세로 - {height:600px..

CSS 2020.08.29

생활코딩 : CSS 정리 -1. 태그 (by 웹 어플리케이션 만들기)

--CSS는 디자인이다.-- : 태그 안에 쓴다, html의 태그이다 : id값이 selected인 태그(li)를 선택해서 효과를 줄 수 있다, id는 html의 속성이다 : class값이 em인 태그(li)를 선택해서 효과를 줄 수 있다 : 태그 안에 쓴다, html의 태그이다. 파일주소에 있는 css 파일을 그 웹페이지에 넣는다. 태그와 다르다. h1{} : 선택자, css의 태그이다 {color:red} : 색깔 설정, 서술, css의 태그이다 {font-size: 10px;}: 폰트 크기 설정, 서술, css의 태그이다 h1,h2{} : h2도 똑같은 효과를 주고 싶다면 콤마로 합치기 nav ol{} : nav 태그 중에서 ol 태그만이다 {list-style: none;} : 리스트 스타일 없앤..

CSS 2020.08.29