본문 바로가기

HTML

[Nodejs] Pug 사용법 [Nodejs]Pug 사용법Pug는 Nodejs Express Template Engine이다. html 대신 사용한다.장점 HTML을 간단하게 표현해서 가독성이 좋다.정적인 부분과 동적인 부분을 따로 할 수 있다.타 Express Engine보다 Google Trend 수치가 높다.HTML과 차이 닫는 태그가 없다.들여쓰기로 종속성을 구별한다.태그를 선언할 때 이름만 쓰면된다.ID와 CLASS를 정해줄때 CSS의 기본 선택자를 사용하면 된다. ex) div.class, div#id태그 없이 ID와 CLASS만 선언할시 div 태그를 사용한다. ex) .class == div.class태그에 속성은 괄호를 이용한다. ex) input(type=”text”)여러 줄을 사용하고 싶으면 |를 사용한다.Scri..
[PCNJ]hover effect 버튼 만들기 1 Hover effect Button : scale See the Pen EGPxBJ by 이정준 (@alencion) on CodePen. 코드와 결과는 여기서 보시면 돼요. YouTube 동영상 CSS코드 분석
[PCNJ]hover effect 버튼 만들기 2 Hover effect로 버튼 만들기! [PCNJ] Hover effect ButtonSee the Pen GPZKPP by 이정준 (@alencion) on CodePen. Youtube 영상 CSS코드 설명
[PCNJ]hover effect 버튼 만들기 : slide button Hover effect로 슬라이드 버튼 만들기! [PCNJ] Hover effect Button : Slide ButtonSee the Pen qLZVwg by 이정준 (@alencion) on CodePen. Youtube 영상 CSS코드 설명
[PCNJ]hover effect 서치바 만들기 [PCNJ] See the Pen pqbdyj by 이정준 (@alencion) on CodePen. Youtube 영상 CSS코드 설명
[html]fontawesome - 무료 아이콘 넣기. html문서에 아이콘 넣어보자Font Awesome fontawesome.com (링크 걸어뒀어요.)을 이용하면 쉽게 html에 icon을 넣을 수 있어요. start Using Free를 눌러줍시다. 밑에 코드가 나옵니다. 저기 빨간 박스안에 버튼을 누르면 코드가 자동 복사 됩니다. 1234567891011 Colored by Color Scriptercs head태그 안에 붙여넣기 해줍시다. 원하는 아이콘을 검색해서 클릭하면 다음과 같은 화면으로 넘어옵니다. 이번엔 위에 빨간박스 코드를 클릭하면 자동 복사가 됩니다. 1234567891011 Colored by Color Scriptercs 자신의 html에 아이콘을 넣고싶은 곳에 넣습니다. 결과화면
[CSS]Property Dictionary 속성 사전 박스모델편 박스모델 margin 엘리먼트(콘텐트)와 엘리먼트(콘텐트) 사이의 간격을 지정한다. 값 px, vh, em, rem, %, inherit, auto, ... value width[길이] similar margin-top, margin-buttom, margin-left, margin-right ex) div{margin : 20px;} Tip) margin: 10px 20px -> margin (top & bottom) (right & left); margin: 10px 20px 30px 40px; -> margin: (top) (right) (bottom) (left); 마진을 갖는 박스들이 입전해 있는 경우 수평 마진은 통합되지 않지만, 수직 마진은 통합된다. ※ float된 박스나 절대적 위치 혹은..