본문 바로가기
반응형

IT/html + css28

Emmet 젠코딩 Zen Coding 문법 html 구조를 하나하나입력하는것도 나쁘지 않지만 좀더 빠른 입력을 하도록 도와주는 emmet이라는게 있는데 이번에 브라켓을 사용하면서 유용하게 잘 쓰게 되어 젠코딩 문법 포스팅을 올리는데 선택자만 잘 알고 있으면 생각보다 별게 없다. 우선 브라켓에서 젠코딩을 하려면 Emmet이라는 확장 프로그램을 설치해야합니다.. 태그 여러개 만들기 태그명*숫자 입력하고 tab키 누르면 아래처럼 div요소가 3개가 만들어 집니다. div*3 id, class명 입력해서 만들기 id를 입력하려면 div#content class를 입력하려면 div.content 를 입력하면됩니다. (속성에 맞는 선택자 입력하고 *숫자를 입력하면 동일한 class명이 개수만큼 생성 됩니다.) div.content*3 class명의 숫자값 .. 2020. 1. 16.
[CSS] visibility:hidden 과 display:none; visibility:hidden; 과 display:none;은 둘다 요소를 보이지 않게 하는 속성입니다. 차이점 visibility:hidden; -> 자리는 차지하지만 빈공간으로 남겨두어 보이지 않습니다. (visibility의 기본값은 visibility:visible; 입니다 = 요소를 표시 합니다.) display:none; -> 자리를 차지하지 않고 빈공간도 남겨두지 않으면서 보이지 않습니다. #wrap { position: relative; width: 100%; height: 650px; background: gray; } .box_list { position: absolute; right: 10px; top: 50px; width: 490px; overflow: hidden; } .box.. 2020. 1. 15.
[CSS] 선택자(id선택자, class선택자, nth-child, nth-of-type, odd, even등..) CSS 기본속성 다음에 포스팅을 했어야되는데 생각나는대로 하다보니 이걸 뒤늦게야 올리는 뒤죽박죽 순서.. 선택자란? 특정 태그에 이름을 지정하여 해당태그의 폰트,색깔,크기등의 속성을 변경할수 있도록 하는 역할을 합니다. * -> 전체전택자 *{margin:0; padding:0; box-sizing:border-box;} 등등 reset.css 파일에 자주 쓰이는 선택자 입니다. id(#) -> id 선택자 한문서에 하나의 아이디만 사용할 수 있습니다. class(.) -> class 선택자 하나의 태그에 클래스 명을 여러개 줄수도 있고, 여러개의 태그에 동일한 클래스 명을 지정하여 하나의 그룹으로 묶을 수 있습니다. on sunday on sunday on sunday *{margin:0; paddin.. 2020. 1. 14.
[CSS] animation 여러가지효과 응용 연습! 저번에 했었던 transition과 animation을 응용한 연습해본 html/css입니다. animation효과 border on sunday_tistory .box{ position:relative; width:300px; height:300px; background:#fff; padding:25px; border:1px solid #ddd; border-radius:5px; } .box h2{ font-size:24px; color:#444; line-height:1.4; font-weight:bold; } .box p{ font-size:14px; color:#444; line-height:1.8; } .box p:nth-of-type(1){margin-top:20px;} .box p.view{.. 2020. 1. 13.
[CSS] animation 효과 (@keyframes) animation은 속성을 시간에 따라 변화를 줄 수 있도록 하는 효과이며, @keyframes와 함께 사용합니다. animation 속성 animation-name : 애니메이션 효과에 이름을 설정해야 @keyframes에 설정한 명령이 실행됩니다. animation-duration : 애니메이션 효과가 몇초동안 실행될지, 시작해서 끝날때까지 시간을 설정합니다. animation-delay : 애니메이션 효과가 몇초 지난 후 실행될지 설정합니다. animation-timingfunction : 애니메이션이 적용되는 속도를 설정합니다. animation-direaction : 애니메이션 진행방향을 설정합니다. animation-iteration-count : 애니메이션 반복 횟수를 설정합니다. anima.. 2020. 1. 8.
[CSS] transition 애니메이션과 같이 사용되는 transition 속성 전환 transition은 애니메이션 효과를 적용할 때 애니메이션 효과가 일정 시간에 걸쳐서 다양한 방법으로 진행 되도록 하는것 입니다. 기본 형식은 아래와 같습니다. transition : property duration timingfunction delay; transition 속성 transition-property : 원하는 애니메이션 시킬 속성을 입력합니다. (color, background-color, border-radius, position....) transition-duration : 애니메이션 효과가 몇초동안 실행될지, 시작해서 끝날때까지 시간을 밀리초(ms), 초(s)단위로 설정합니다. transition-timingfunction : 애니메이션이 적용되는 속도를 지정합니다.(linear.. 2020. 1. 7.
[CSS] transform속성 (translate,ratate,scale,skew) transform은 요소를 회전(rotate), 확대 축소(scale), 이동(translate), 찌그러뜨리기(skew)할 수 있습니다. 원래박스 transform:translate transform:rotate transform:scale transform:skew h1{width:350px; padding:5px 10px; margin-bottom:30px; border:3px solid #A0D9E2; background:#004680;} .tra{ transform:translate(20px,30px);} /*좌우, 위아래*/ /*박스를 오른쪽으로 20px, 아래로 30px이동*/ .rot{transform:rotate(30deg);} /*시계방향 기준으로 30도 회전시킴*/ .sca{trans.. 2020. 1. 6.
[CSS] word-break / word-wrap 속성 (box-sizing) word-break와 word-wrap의 속성 둘다 띄어쓰기 없이 길게 입력했을때 width값을 설정해도 바깥으로 튀어 나오게 되는데 이때 width값에 맞게 적당히 잘라 다음 줄로 내려오도록 하는 속성입니다. word-break - 아시아 언어를 제어합니다. normal - 기본값으로 자동으로 적당히 줄바꿈합니다. break-all - width값보다 글씨가 넘칠때 강제로 줄바꿈합니다 (단어가 중간에 끊기면서 줄바꿈이 일어남) keep-all - 줄바꿈을 할때 한단어에서는 줄바꿈이 일어나지 않고 단어와 단어사이(띄어쓰기한부분)에서 줄바꿈이 일어납니다. word-wrap - 비아시아 언어를 제어합니다. normal, break-word 공통 css에 추가 해놓으면 상속되는 속성이기 때문에 편리하게 사용할.. 2020. 1. 5.
[CSS] box-shadow / text-shadow 속성 box-shadow (선택영역에 그림자 효과를 주는 속성입니다.) 기본형 -> box-shadow: inset x축 y축 blur spread color inset - inset을 써주면 선택영역 안쪽으로 그림자가 생성됩니다. x축 - 가로로 밀리는 폭입니다 (음수값은 왼쪽으로 그림자가 생성됩니다) y축 - 세로로 밀리는 폭입니다(음수값은 위쪽으로 그림자가 생성됩니다) blur - 그림자가 퍼지는 정도입니다. spread - 그림자가 생기는 정도입니다(음수 값은 작아집니다.) color - 그림자 색을 선택할 수 있습니다. box-shadow:3px 3px; box-shadow:3px 3px 4px; box-shadow:3px 3px 4px 4px; box-shadow:3px 3px 4px 4px rgb.. 2020. 1. 4.
반응형

티스토리툴바