IT업계 종사자의 블로그

- 주축(main axis)과 교차축(cross axis)                                      ㄴ교차축은 일반적으로 수직임 (바뀔 수도 있음) - justify-content: 주축에 적용됨- align-items: 교차축에 적용됨 (참고)100 vh : vh 는 viewport height 다 (viewport는 screen 이라고 생각해도 된다)==> 100 screen height는 화면 높이의 100%를 뜻함 DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 100vh; margin: 20px; display: flex; justify-content: space-bet..

flex box의 특징 1. 자식 엘리멘트에는 어떤 것도 적지 않아야 한다.   ㄴ부모 엘리먼트에만 명시해야 됨.  DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { margin: 20px; display: flex; } div { width: 300px; height: 300px; background-color: teal; } style> head> html>  결과오옷 옆으로 나열되는 block을 만들었닷!!

inline-block은 1. 브라우저가 block으로 인식함.2. 높이를 가질 수 있음.3. 사방에 margin도 가질 수 있음.4. 바로 옆에 다른 요소가 올 수도 있음.5. but, 반응형 디자인을 지원하지 않는다.DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { margin: 20px; } div { display: inline-block; width: 50px; height: 50px; background-color: teal; } style> head> body> body>html>     결과

공통적으로 적용되는 것을class 태그로 모으기DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { margin: 20px; } .btn { padding: 5px 10px; border-radius: 5px; } .teal { background-color: teal; } .tomato { background-color: tomato; color: white; } style> head> body> hello hello hello hello hello hello hello body>html>    결과오 버튼같아..!

Class명은 유일할 필요가 없다.그리고 여러 요소들을 같이 쓸 수 있고, 한 번에 여러 class가 쓰일 수 있다. DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { margin: 20px; } span { background-color: teal; } .tomato { background-color: tomato; } style> head> body> span>hellospan> hello span>hellospan> hello span>hellospan> hello span>hellospan> body>html>  결과칙칙폭폭 귀여운 기차같아

(복습) span은 inline 속성을 가진다.inline은 높이와 너비를 가질 수 없다. inline의 margin은 좌우로만 가질 수 있다. DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { margin: 20px; } span { background-color: teal; padding: 20px; margin: 30px; } style> head> body> hello hello body>html>   결과   결론1. inline은 높이와 너비를 가질 수 없다.2. 대표적인 inline 태그로는 span이 있다.3. span 에 margin을 적용하면 위 아래에는 적용이 되지 않고 좌우에만 적용된다.4. spa..

Style 속성을 이용해서 border가 어떻게 보일지 정할 수 있다.DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> * { border: 2px dashed black; } html { background-color: tomato; } body { margin: 20; padding: 20px; background-color: thistle; } div { padding: 20px; } #first { background-color: whitesmoke; width: 150px; height: 150px; } #second { background-color: teal; width: 100px; height: 100px; } #t..

1. 실선 테두리 넣어보기DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> html { background-color: tomato; } body { margin: 20; padding: 20px; background-color: thistle; } div { padding: 20px; border: 2px solid black; } #first { background-color: whitesmoke; width: 150px; height: 150px; } #second { background-color: teal; width: 100px; height: 100px; } #third { background-color: wheat; ..

1. DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> html { background-color: tomato; } body { margin: 20; padding: 20px; background-color: thistle; } div { height: 150px; width: 150px; padding: 10px; } #first { background-color: whitesmoke; } #second { background-color: teal; } #third { background-color: wheat; } #fourth { background-color: blanchedalmond; } style> head> body..

padding (패딩) 이란?경계(border)로 부터 안쪽 공간이다. DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> html { background-color: tomato; } body { margin: 0; padding: 20px; background-color: thistle; } div { height: 150px; width: 150px; background-color: whitesmoke; } style> head> body> div>div> body>html>   결과