공부/스파르타코딩클럽
[스파르타코딩클럽]웹개발종합반 1주차
먼지투성이밤
2022. 9. 13. 16:43
🌟묶어서 자주 쓰는 CSS
<style>
* {font-family: 'Gowun Dodum', sans-serif;} /*웹폰트넣기*/
.mytitle {
background-color: gray;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))/*배경 이미지 어둡게 하기*/,
url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");/*배경이미지 넣기*/
background-position: center;
background-size: cover;
width: 100%;
height: 250px;
/*여기부터*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/*여기까지의 네줄은 세트로 함께 쓴다!*/
color: white;
}
.mytitle > button /*mytitle 안의 button에 스타일 주기*/ {
width: 200px;
height: 50px;
background-color: transparent; /*배경 이미지 투명*/
color: white;
border-radius: 50px;
border: 1px solid white;
margin-top: 10px;
}
.mytitle > button:hover /*mytitle 안의 button에 마우스 올렸을때 (hover)*/ {
border: 3px solid slateblue;
}
.mycomment {
color: gray;
}
.wrap {
width: 1200px;
margin: 20px auto 0px auto;
}
.mypost {
box-shadow: 0px 0px 3px 0px gray; /*박스 그림자 만들기*/
margin: 20px auto 20px auto;
padding: 20px;
max-width: 500px; /*최고 가로길이*/
width: 95%; /*가로길이*/
}
.mybutton {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.mybutton>button {
margin-right: 10px;
}
</style>
🌟왜 브라우저에서는 자바스크립트를 사용할까?
모든 인터넷에서 자바스크립트를 사용하기로 '약속' 해놓은 것이다. 이것을 '표준'이라 부른다.
예를 들어 각 브라우저에서 서로 다른 언어를 사용한다면 크롬 자바버전, 크롬 파이선 버전, 크롬 자바스크립트 버전 등 여러 버전을 준비해야 할 것이다. 매우 번거롭고 비효율적이다.
🌟자바스크립트 기초 사용법
<script>
function hey(){
alert('안녕!');
}
</script><button onclick="hey()">영화 기록하기</button><head> </head> 안에 <script> ~</script> 로 공간을 만들어 작성한다.
위 코드는 hey라는 함수를 만들어 버튼에 연결시킨것이다.
🌟자바스크립트 기초문법
https://iancoding.tistory.com/131
[JavaScript 입문] 자바스크립트 기초 문법 총정리
자바스크립트란? HTML은 구조, CSS는 디자인, 그리고 자바스크립트(JavaScript)는 동작을 담당한다고 생각하면 쉽다. 자바스크립트 프레임워크인 리액트(React), 뷰(Vue.js), 앵귤러(Angular)를 제대로 활
iancoding.tistory.com