[새싹X코딩온]웹 풀스택

오늘은 드디어 백엔드에 대해서 배웠습니다...! 사실 프론트엔드를 하면서 조금 포스팅이 밀렸는데 이번주 내로 다 정리해서 올리는 것을 목표로... 그 전에 까먹지 않도록 이번주에 배운 내용부터 포스팅을 하도록 하겠습니다! 1.서버와 백엔드 우선 서버... server 많이 사용하는 말인데 어떤 의미일까요? 서버란 클라이언트에게 네트워크를 통해 서비스를 제공하는 "컴퓨터"를 의미합니다! 그래서 클라이언트는 프론트엔드, 서버는 백엔드라고 간단하게 생각해 볼 수 있어요! 클라이언트는 사람이 될수도, 컴퓨터가 될수도 있어요. 서버 하나에 여러개의 클라이언트가 연결되어있을 수 있습니다. 클라이언트(프론트엔드)와 서버(백엔드)는 어떤 관계일까요? 한번 회원가입을 하는 상황을 예를들어서 설명해보도록 하겠습니다. 위의..

이번 포스팅부터는 Javascript에 대해서 정리해보도록 하겠습니다! 그 전에! javascript가 어떤 역할을 하는지 알아야 잘 사용할 수 있겠죠? 프론트엔드에서 HTML로 뼈대를 만들고, CSS로 디자인을 했다면 Javascript는 html과 css로 꾸며놓은 웹 페이지에 동작을 불어넣는 역할을 한다고 보면 됩니다. 그럼 javascript 어떻게 사용할 수 있는지 한번 알아보도록 하겠습니다! script를 HTML에 불러오는 방법 방법1. head태그>script태그 안에 작성 방법2. head태그>script태그의 src속성에 js 파일 경로 작성 방법1과 2의 경우 모두 head태그 안에 태그를 넣는 방법인데요, 이 경우 웹페이지를 불러오기 전에 이미 동작하게됩니다. head태그 안의 내용..

이번 포스팅에서는 CSS속성 중에서 Animation에 대해서 알아보도록 하겠습니다! 우선 CSS에서 애니메이션을 사용하려면 사용하려는 대상이 있어야겠죠? 그리고 그 대상에 어떤 애니메이션을 줄 것인지가 지정되어야 합니다. 그래서 링크방식을 사용하려면 HTML에서 요소를 선택해서 그 안에 animation-name:입히고 싶은 애니메이션 이름;이 있어야하고, 해당 CSS파일 내에 @keyframe 입히고 싶은 애니메이션이름{...} 이렇게 두 줄이 필수적으로 있어야 합니다! 또한 animation속성에는 - animation-name: @keyframes 애니메이션 이름 지정 - 시작: from or 0% - 중간: 0~100% - 끝: to or 100% - animation-duration: 한 사이..

벌써 2주차가 되었네요..! 이번에는 display속성에 대해서 알아보도록 할 거에요!(조금 밀렸지만 그만큼 꼼꼼하게 다뤄보도록 하겠습니다) display속성들간의 차이점을 알아두는 것이 중요하고 특히 그 중에서도 flex가 중요하니 잘 알아두도록 합시다!! display 속성의 종류에는 inline block inline-block flex grid 등이 있습니다! 그럼 하나하나 알아보도록 할까요? 1. display: block, display: inline, display:inilne-block 먼저, display속성은 어떻게 사용하는 것인지? 사용하는 목적은 무엇인지 부터 알아야겠죠? https://developer.mozilla.org/ko/docs/Web/CSS/display display ..

이번에는 CSS의 transfrom이라는 속성에 대해서 알아보도록 할게요! 이건 입체적으로 생각해주면 조금 쉽고, 제 기준에서는 position보다는 확실히 더 쉬웠습니다! 1. transfrom transform은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew)효과를 부여히기 위한 함수를 제공합니다. 1) skew: 기울 2) roatate: 회전 3) translate:이동 .beach1{ /* 원래위치를파악하기 위한 배경색 */ background-color:aliceblue; width:400px; height:250px; position: absolute; top: 200px; left:200px; } img{ /* 크기의 단위로 %를 사용 :부모..

이번 포스팅에서는 다소 복잡하고 헷갈릴 수 있는 CSS속성인 position에 대해서 알아보도록 하겠습니다! 저도 이번 파트는 헷갈리는 부분도 많고 어떻게 적용되는건지 이해하는데 시간이 좀 걸렸기에 코드를 보면서 어떻게 적용되는 것인지 잘 생각하면서 따라오면 좋을 것 같습니다! position속성은 단어에서도 알 수 있듯이 위치를 설정하는 속성으로, HTML에서 어떤 요소의 원래 위치를 바꿀 때 사용하는 속성입니다. position속성에서 위치 지정 방식에는 static, relative, absolute, fixed 등이 있는데, ⚠️여기에서 주의해야할 점은 position속성이 먼저 선언 되어야 static, relative, absolute, fixed 이들 코드를 CSS파일에 입력했을 때 유의미하..

이번 포스팅에서는 자주 쓰이는 CSS속성들에 대해서 한번 알아볼거에요! 그에 앞서 다시한번 CSS작성법을 짚고 넘어갈게요~!! 선택자{프러퍼티(속성):값(value)}=선택자의 프로퍼티를 값으로 변경하겠다! 라고 해석할 수 있겠죠? 1. 자주 쓰이는 CSS속성 자주 쓰이는 CSS속성에는 color, background-color font-size,font-weight, font-familiy, font-style width, height, max-width, min-width, max-height, min-height border margin, padding 등이 있습니다! 속성들은 너무 많기때문에 다 외울 필요는 없고 필수적인 것들은 알아두되, MDN(CSS를 사용하여 HTML 스타일을 지정하는 방법 ..

2023.07.25 - [[새싹X코딩온]웹 풀스택] - [새싹X코딩온]웹 풀스택 1주차(7/21)회고록|CSS(2)-선택자(Selector)1 [새싹X코딩온]웹 풀스택 1주차(7/21)회고록|CSS(2)-선택자(Selector)1 이번에는 선택자에 대해서 알아보도록 할 거에요. 선택자가 어떻게 구성되어있는지부터 먼저 알아보도록 할게요~! 여기에서 p가 선택자이고 중괄{}를 열고 닫는 것을 블록이라고 해요. color:red; seeun0210.tistory.com 이번 포스팅에서는 지난 포스팅 마지막에서 언급했던 가상클래스선택자, 가상요소선택자, 속성선택자에 대해서 알아보도록 할게요! 1. 가상클래스 선택자 :사용자의 행동에 따라 변화하는 가상 상황에 따라서 요소를 선택하여 각 요소의 상황에 따라 사용자..