스파르타코딩(22.8.29~22.12.31)/웹개발반 기초강의 복습(메모)(10)
-
자바스크립트란? 뜻
- 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어 웹서버에서 공통적으로 약속한 언어. 버튼을 눌렀을때 표시,숨기기 마우스를 버튼에 올렸을 때 버튼 색깔이 바뀐다 팝업(알림창)이 뜬다 이미지를 늘렸다 줄였다(확대 축소)한다 페이지 내에서 음악을 틀거나 비디오를 튼다. 전체적으로보니 말 그대로 움직임을 뜻한다. 클라이언트(접속자)가 서버에 요청하면 서버는 클라이언트에게 HTML 구조 뼈대 (글자 , 이미지 틀, 글상자 , 꾸미지 않은 버튼) CSS (글자색,이미지의 효과(그림자), 글상자의 테두리 굵기,버튼의 색,스타일) Javascript (위에서 얘기했던대로 동작들) 준다. 아마 여기까지 읽었으면 이해 했을것 같은데 우리가 아는 웹사이트는 HTML+CSS+Javascript로 이루어져 있..
2022.09.03 -
자바스크립트란
자바스크립트란 로 공간을 만들어 작성합니다. 2.안에 내용을 넣어보겠습니다 3. 아래 functon(함수)에 hey(이름)을 넣고 alert(알림경보)를 넣고 function hey(){ alert('안녕!'); } 4.이전에 부트스트랩 게시글에서 배웠던 버튼 태그옆에 onclick="hey()"를 넣어줍니다.
2022.08.30 -
부트스트랩 (예쁜 CSS를 모아둔 것)
• bootstrap이란? 부트스트랩이란? 예쁜 CSS를 미리 모아둔 것 (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많습니다. 자 그럼 부트스트랩 사용법에 대해 알아보겠습니다. 부트스트랩은 예쁜 CSS를 만들어 놓은 거라고 했는데요 아래 사이트가서 버튼을 둘러봅니다. https://getbootstrap.com/docs/5.0/components/buttons/ Buttons Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and mo..
2022.08.30 -
폰트,주석,파일분리
• 폰트(글씨체) 변경,적용하는 방법 https://fonts.google.com/?subset=korean Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 1.구글 폰트모음집(위 링크)에서 원하는 폰트를 골라 +버튼후 해당 font의 주소 중 3번째 링크를 드래그 합니다. 2.복사해서 밑에 링크를 붙여줍니다. font-family: 'Bebas Neue', cursive; 3.아까 복사했었던 곳 아래 주소도 복사한 후 4.밑에 스타일을 지정 *(모든 태그에 사용하겠다!)하고 복사한 주소를 붙여주면 전체폰트가 적용됩니다! • 주석 (단축키 CTRL + / ) 1) 필요없어진..
2022.08.29 -
이미지 바깥여백(margin) 과 안쪽여백(padding)
여백(스타일)을 넣고 싶은 곳에 class를 꼭 지정해준후 작성해야됩니다! 사진예시 class="mybtn" 버튼 자 이제 마진과 패딩값을 설명드리겠습니다. • 마진 바깥여백(margin) • 사진을 보시면 설명을 위해서 1. 로그인페이지를 div를 구역을 설정한후 2. 스타일내에 login을 추가하여 값을 넣었습니다. 3. 배경을 초록색으로 바꾸고 4. 구역배경 구역의 가로 세로 길이를 조절했습니다. • 마진(바깥여백이란) 현재 위에 사진을보면 margin: 40px 40px 40px 40px 되어있는데요 순서대로 위 오른쪽 왼쪽 아래 가 되겠습니다. 을 기준으로 40px씩 띄워라라는 뜻입니다. 간단하게 조절하고 싶은곳을 설정하셔도 됩니다. margin-top: 10px; margin-right: 10..
2022.08.29 -
css 기초 이미지 삽입(크기조절,테두리 등)
이전 글에서처럼 해당 body안에 mytitle(임의로 해도 상관없음) 설정하고 위에 스타일에서 mytitle을 작성하고 url 태그를 사용하여 에 이미지를 넣었습니다. 이미지 관련한 태그 같이 첨부합니다. 사진보시면 태그밑에 부연설명 해두었습니다 background-image: url('이미지 링크'); background-position: center; background-size: cover; border-radius: 10px; 테두리 둥그렇게(원하는 만큼 조절)
2022.08.29