본문 바로가기

전체 글

 (30)
flexbox 가로나 세로로 요소들을 정렬하기 위해 사용 바깥에 아이템들을 감싸고 있는 container가 존재 (부모자식관계가 성립해야함) flex container : 가장 바깥쪽 아이템을 감싸고 있는 부모 영역flex item 내부 정렬을 위한 아이템들 main axis 주축 (축에서 메인이 되는 축, 기본값일때 가로가 되는 축)  cross axis 교차축 (기본값일때 세로가 되는 축) ,  ---> 축방향은 바뀔 수 있음.  container - displaydisplay-outside 제일바깥쪽 있는 것들  inlinen, blockdisplay- inside 요소 내부의 아이템 container - flex- direction플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축(main axis, cros..
animation transition은 A에서 B로만 animation은 다수의 스타일을 전환하는 애니메이션 @keyframes개발자가 애니메이션 중간중간 특정 지점들을 거칠 수 있는 키프레임들을 설정함  div class="box">     하윙!  div>.box {  width:100px;  height: 100px;  border: 10px solid seagreen;  background-color: rgb(204,253,225);  border-radius: 30px;  animation: my-first-animation 2s infinite alternate;}@keyframes my-first-animation{  from {width: 100px;}  to {width: 300px;}}@keyframes..
transition A 상태가(css) ------> B 상태(css) 로 시간차를 두고 자연스럽게 전환된다.  transition-property (어떤요소)  특정 css만 바꾸겠다.      all: 모든 css를 바꾸겠다  none: 아무것도 바꾸지 않겠다      transition-duration (얼마만큼의 시간을 가지고) s, ms(밀리세컨 0.5s = 500ms)    div class="box">     Hover!.box {  width: 600px;  height: 80px;  border: 2px dashed teal;  background-color: darkslategray;  font-size: 50px;  color: white;  trandition-property:all;  transiti..
색상과배경 표현방법-키워드사용 {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..

티스토리툴바