웹 개발의 기록들

안녕하세요. Nerd-Lee입니다. 공부 내용은, 인프런 박매일님의 [NarP Series]MVC 프레임워크는 내 손에[나프1탄] 을 참고하였습니다. 1. 정적 페이지 ? 동적 페이지 ? 정적 페이지가 어떤 것이고, 동적 페이지가 어떤 것이냐 1분마다 시간을 물어본다고 예를 들어보도록 하자. 그런데, 정적인 페이지는 시간이 변경이 되질 않는다. 하지만 동적인 페이지는 2시 50분이면, 2시 50분이라고 출력이 되고 1분 뒤에는 2시 51분이 출력되게 된다. 가장 큰 차이점은, 프로그래밍을 할 수 있느냐 없느냐라는 것이다. 2. 홈페이지 파일의 역할 HTML 뼈대를 나타내는 파일이며, 홈페이지의 쌩얼이라고 생각하자. CSS Casting Style Sheet의 약자로, 꾸미기 위한 파일이며, 홈페이지의 색..

Box 하나만을 화면 정가운데에 정렬하고 싶을 때가 있는데 가운데로 정렬할 수 있는 방법은 있지만, 정가운데로 정렬하는 방법을 모를 수가 있다. 코드는 다음과 같다. [ HTML ] [ CSS ] body{ width: 100vw; height: 100vh; } .box{ position: relative; left: 50vw; top: 50vh; transform: translate(-50%, -50%); width: 200px; height: 200px; background-color: black; } 이렇게 하면 정가운데로 정렬이 가능하다.

css에서, border를 사용하면 기본적으로 inner가 아닌 outer로 설정이 되어 있기 때문에 border의 px 사이즈가 커지면 커질수록 찌그러지는 현상이 나타나는데, 이걸 inner로 변경할 수 있는 방법이 있다. 그게 바로 box-sizing 속성이다. .클래스 { box-sizing: border-box; } [ box-sizing 미적용시 이미지 ] [ box-sizing 적용시 이미지 ] 저 이미지는 width와 height가 300px로 된 원이다. box-sizing을 하지 않게 되면, outer로 설정이 되어 있어서 300px보다 더 큰 원이 생성된다. 하지만, box-sizing을 border-box로 하게 된다면, inner로 그려져서, 원의 크기가 변하지 않고 border가 ..

css에서, 배경색을 투명색으로 만들고 싶을 때가 있다. rgba 함수를 사용해서, opacity를 0으로 만들어 투명색을 만들 수도 있지만 간단하게 만들 수도 있다. .클래스{ background-color: transparent; } 위 코드를 사용하면 투명색으로 만들 수 있다. transparent가 투명색을 의미한다.

[ 이전 글 보기 ] https://includecoding.tistory.com/218 1. HTML의 기본 형식 퇴사한 지 1년이 넘은 시점.. 아직 코딩 실력은 줄지 않았겠지 라고 생각하고 C#에서 javascript로 넘어가 javascript/typescript와 react.js를 독학하고 구글링하면서 1달 반동안 헤딩한 결과 주식 계산기 토 includecoding.tistory.com .... 1. 태그는, 시작이고, 끝을 의미하며, 이런식으로도 사용이 가능한데 value 만약, value가 필요가 없거나 해당 태그 안에 다른 자식태그를 넣지 않아도 된다면, 로도 사용할 수 있다. 그리고 element라고도 불린다. .... 2. attribute는, 태그에 대한 더 구체적인 설명을 제공한다..

퇴사한 지 1년이 넘은 시점.. 아직 코딩 실력은 줄지 않았겠지 라고 생각하고 C#에서 javascript로 넘어가 javascript/typescript와 react.js를 독학하고 구글링하면서 1달 반동안 헤딩한 결과 주식 계산기 토이 프로젝트와 비디오 스트리밍 '나튜브'를 만들었다. 주식 계산기 링크 : https://stock-calculator.vercel.app/home 주식 계산기 stock-calculator.vercel.app 나튜브 링크 : https://natube-frontend-portfolio.vercel.app/ 나튜브 natube-frontend-portfolio.vercel.app 당연히 비전공자에 비해, 새로운 언어를 습득하기에는 어려움은 없었고, 극복하기에도 쉬웠던 건 ..