프로그래밍/Web38 [Web] form 태그를 활용하여 contact us 페이지 만들기 요런 페이지를 만들어보자. 코딩애플 숙제다. contact us Your Email First name Last name Message Subscribe SEND .container { width: 400px; height: 600px; padding: 1px; background-color: white; } h4{ margin: 0px; } .wh100{ width: 100%; height: 100%; } .w55{ width: 55%; } .marg-left{ margin-left: 30px; } .marg-top{ margin-top: 30px; } .f-black{ color: black; } .f-margin{ margin-bottom: 10px; } .mid-btn{ padding: 10px;.. 2022. 5. 4. [Web] 내가 쓰는 VS Code Extension 실제 내가 사용하는 Extension만을 소개한다. 1. prettier code의 줄바꿈 등 코드를 일관성있고 이쁘게 보여주는 프로그램이다. mac에서는 shift + option + f 를 입력하면 정렬이 된다. 2. auto rename tag hello 이런 코드를 h3로 바꾸려고 한다면 열리는 태그, 닫히는 태그 총 2번 바꿔야한다. 이런 수고를 덜어주는 프로그램이다. 3. css peek HTML 문서에서 디자인을 입히는 작업을 하려면 css 파일로 넘어가서 작업을 해야한다. 그 과정을 줄여주는 프로그램이다. html 파일에서 클래스명 같은걸 선택하고 option + f1(mac)를 누르면 해당 css 코드가 표시된다. 너무 편한 프로그램이다. 4. html preview HTML이 바뀔 때마.. 2022. 5. 2. [HTML/CSS] position - static/relative/absolute/fixed/z-index position 속성은 말 그대로 좌표를 통하여 위치를 선정하는 속성이다. 아래 사진과 같이 개체들을 겹치고 싶거나, 위치를 고정하고 싶을 때 사용하는 방법이다. *position 속성을 통해 위치를 이동한 개체는 모두 float 상태이다. Static 모든 태그들은 기본적으로 static 상태이다. static 상태에서는 position을 이용한 위치변경이 불가능하다. Relative position: relative; 를 통해 기준점을 잡을 수 있다. 기준점이 생기고 난 뒤에는 top, bottom, left, right를 통하여 개체의 위치를 조절할 수 있다. Absolute position: absolute; 를 통해 개체를 옮길 수 있다. 이때 기준점은 static이 없는 태그이다. 만약 전부 .. 2022. 5. 1. [HTML/CSS] 브라우저 호환성 최적화 normalize 방법 각 브라우저간에 통일된 스타일을 적용하고 싶으면 참고하면 좋은 방법이다. https://github.com/necolas/normalize.css/blob/master/normalize.css GitHub - necolas/normalize.css: A modern alternative to CSS resets A modern alternative to CSS resets. Contribute to necolas/normalize.css development by creating an account on GitHub. github.com 이 css 파일을 복사붙혀넣기 하거나 link 태그로 불러오면 nomalize가 될 것이다. 2022. 5. 1. [HTML/CSS] 블로그 게시물 디자인 만들어보기 이렇게 생긴걸 만들어 보려고 한다. 우선은 왼쪽과 오른쪽으로 나눈다. 그리고 다시 왼쪽은 닉네임, 제목, 내용, 공감으로 나눈다. 이걸 코드로 나타내면 아래와 같다. 2022. 5. 1. [JS][Vanilla] import, export로 코드를 간결하게 만들기 코드를 간결하게 만드는 것은 굉장히 중요하다. 보기도 좋을 뿐더러 유지보수 측면에서 훨씬 유리해서 더욱 높은 차원의 결과물을 만들어낼 수 있다. https://ko.javascript.info/import-export 모듈 내보내고 가져오기 ko.javascript.info 위의 사이트에 굉장히 자세히 설명이 되어있다. 나는 대표적인 몇개만 들고와서 설명해 볼 것이다. 우선 main.js과 같은 폴더에 test.js를 생성한다. 그리고 아래와 같이 입력해보자. 2개의 예시를 들건데, 모두 같은 결과를 낸다. 상황에 따라 골라서 쓰면 된다. // test.js // 각각 내보내기 // 변수 내보내기 export let number = 5; // 배열 내보내기 export let car = ['hyundai.. 2021. 12. 7. 이전 1 2 3 4 5 6 7 다음
