본문 바로가기

분류 전체보기311

[Web] Javascript 없이 이벤트 효과를 주고 싶다면 pseudo 아래 예시를 참고해보자. HTML 삽입 미리보기할 수 없는 소스 대표적인 예시로는 hover, focused, active가 있다. 더 많은 pseudo는 아래 링크에서 확인하면 된다. https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes Pseudo-classes - CSS: Cascading Style Sheets | MDN A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the .. 2022. 5. 4.
[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.

티스토리툴바