본문 바로가기

제로베이스_정리

(17)

wiggle body> h1 class="wiggle">안녕하세요!h1>body>@keyframes wiggle { 0% { transform: rotate(0deg); color: red; } 25% { transform: rotate(10deg); color: blue; } 50% { transform: rotate(0deg); color: yellow; } 75% { transform: rotate(-10deg); color: aqua; } 100% { transform: rotate(0deg); color: oranges; } }..

modal 창 만들기 방법 1. html / css ui를 만든다2. css를 숨긴다 3. JS로 다시 나타나게 한다 body> h1>제목입니다h1> p>내용p> button>수정하기button>br> button>삭제하기button> div class="modalDiv"> div class="bg">div> div. class="modal"> p>정말 삭제하시겠습니까?p> button>취소button> button>삭제button> div> div>body>\body, p { margin:0px;}.modalDiv{ display: none;}.bg { width: 100vh; height: 100vw; background-color: rgba(0,0,0,..

색상과배경 표현방법-키워드사용 {blue, transparent (초기값, 투명)}-RGB 3차원 좌표계(# + 16진수 표기법 또는 rgb(), rgba() 의 함수형 표기법)-HSL 실리더형 좌표계 16진수표기법 (HEX)0~9 + A~F = 16가지를 이용0이 제일 작은숫자, F가 제일 큰 숫자 000000을 사용하게 되면 채도가 제일낮다 (검정색) FFFFFF를 사용하게 되면 채도가 제일 높다 (하얀색) background-color: #000000; background-color: rgb(0,0,0); 검정색 width: 100px; height: 100px; background-color: rgba(0,0,255,0.8)} rgba (0,0,255,0.8) 0.8은 80퍼센트 투명도(..

레이아웃 display를 통하여 inline 요소를 block 요소로, block 요소를 inline 요소로 바꿀 수 있음. -ex. span-영역의 크기가 내부 콘텐츠 크기로 정해짐.-margin, padding의 top과 bottom을 지정할 수 없음 (좌우여백은 가능)-여러 요소가 가로 배치가 된다. -ex. div-영역의 크기를 width와 height를 지정할 수 있음.-width를 지정하지 않으면 가로 전체를 차지한다-여러 요소가 세로 배치가 된다. -ex. input-영역의 크기를 width와 height를 지정할 수 있음.-여러 요소가 가로 배치가 된다. span>1span> span>2span> span>3span>span{ ..

박스모델 (Box Model) -content: 콘텐츠가 표시되는 영역(width, height를 가지고 정의할 수 있음) -padding: 콘텐츠와 테두리(border) 사이의 여백 -border: padding과 margin 사이의 테두리 (있을수도 있고 없을수도 있음 /설정하지 않으면 0이라 보이지 않음) -margin: 가장 바깥쪽 레이어로 콘텐츠의 패딩, 테두리를 둘러싸면서 해닥 박스와 다른 요소 사의 공백 역할 width height Lorem, ipsum dolor sit amet Lorem, ipsum dolor sit amet .block { width: 300px; height: 100px; background-color: wheat; } .inline { width: 300px; height: 100px; back..

단위와 값 상대길이 :기준점의 몇배 절대길이: 보여지는 자체로의 길이 (고정값) ->px 절대길이로 설정을 하게 되면 사용자가 개인적으로 설정한 값에 따르지 않기 떄문에 접근성 문제를 유발할 수 있다 (눈이 안좋거나 등등의 이유로) ---> font-size를 설정할땐 em, rem 등 상대길이를 선택하는것이 좋다. em 1em=>부모의 font-size 안녕! 안녕! div { border: 1px solid silver; padding: 1px; } .parent { color: blue; font-size: 24px; } .child { color:red; font-size: 0.5em; } 브라우저에 글자 크기가 16으로 저장되어있을 경우 .parent에 2em으로 설정하면 32px로 표현됨 rem 1rem..

폰트관련속성 div> p class="default"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci eaque ab nesciunt ducimus iste, laudantium maxime quam, blanditiis fuga facilis quaerat. Voluptas architecto suscipit voluptatibus reiciendis amet nulla voluptates et? p> p class="text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae facere hic lib..

selector (셀렉터) 1. type selector -특정 요소나 그룹을 선택하는것이 아니라 웹 전체적인 일관적이게 표현해야하는 것들이 있을때에만 사용 -상단에 작성하는 것이 좋음 2. ID selector-콕 찝어서 설명할 수 있는 유일한 이름표 (전체 html 중 딱 1개)- # ~~~ { } 3. class selector-ID와 다르게 중복 선택이 가능 - .~~~{ } head> link rel="stylesheet" href="styles/main.css"> title>csstitle> style> .title { font-size: 36px; color: red; font-weight: bold; } #heading { font-size: 36px; ..

이전 1 2 3 다음

티스토리툴바