본문 바로가기

CSS

[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코드 설명
[CSS]웹 디자인 해보기-blog 2편 구현-1 [Blog] 웹 뷰만 만들어보자.1. state search는 icon으로 만들거예요. https://fontawesome.com/ 아이콘을 무료로 html에 넣을 수 있는 사이트예요. (자세히보기) 2.html 실행 코드1234567 Alencion's blog Colored by Color Scriptercs html을 이용해 state를 만들어보았어요. 블로그 이름과 search박스를 아이콘과 input태그를 이용해서 표현했어요. 3. CSS실행 코드12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758.state{ /* box model */ padding: 2..
[CSS]웹 디자인 해보기-blog 1편 기획 [Blog] 웹 뷰만 만들어보자.1. 뷰 기획하기. 만들고자하는 blog는 3단형 blog입니다. 먼저 각 부분을 나누어봤어요. div 태그로 감쌀부분(wrapper)의 이름을 굵은 글씨로 정해 놓구요. 좀 더 구체화 해서 기획 했어요. 기획에서 구체적으로 하지 않으면 나중에 무얼할지 모르게 되요. wrapper가 가려서 안보이는 부분은 투명도를 줘서 굵은 글씨가 보이도록 했어요. 반응형 웹으로 기획하자. width가 1100px 이상일 때. width가 600px 이상 ~ 1100px 미만일 때 sidebar를 없앴어요. width가 600px 미만일 때 header가 state 와 contents사이로 이동하도록 했어요. 2편에선 구현을 시작할게요.
[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된 박스나 절대적 위치 혹은..