HTML,CSS
-
Bootstrap의 UtilitiesHTML,CSS 2022. 1. 22. 00:33
자주 쓸 것 같은 utilities만 모아보았다. Display d-inline inline-block을 선언하는 class d-block block을 선언하는 class Flex d-flex flex를 선언하는 class flex-row 가로로 늘어지는 flex flex-column 세로로 늘어지는 flex Sizing w-25,h-25(50,75,100) width와 height를 25% (50,75,100)로 조정하는 class Spacing m-(0부터5까지가능) margin을 주는 class p-(0부터5까지가능) padding을 주는 class top은 t bottom은 b left는 s (start) right는 e (end) 으로 mt-3, mb-3 이렇게 특정 위치만 부여할 수도 있음 B..
-
transition과 overflowHTML,CSS 2022. 1. 21. 22:58
overflow 속성은 박스의 폭이 높이를 초과하는 내부요소를 처리하기 위해 쓰인다. .box { overflow: hidden; //넘친 부분을 숨김 overflow: scroll; //넘친 부분을 보기 위해 스크롤바가 생김 overflow: visible; //넘치는 부분을 그대로 보여줌 } transition 속성은 css 속성을 서서히 변화시킨다. .box { opacity : 0; //여기서 opacity는 투명도 이며 0부터 1까지 있음 transition : all 1s; } 위와 같이 쓰며, ".box 클래스의 모든 것을 1초동안 변화시켜라" 라는 뜻이다. all이 아니라 opacity처럼 써서 하나만 변화시킬 수도 있다. transition에는 여러가지 속성이 있다. 아래처럼 세부조정도 ..
-
media query와 단위HTML,CSS 2022. 1. 21. 22:25
.box { width : 16px; /* 기본 px 단위 */ width : 1.5rem; /* html태그(기본 16px) 혹은 기본 폰트사이즈의 1.5배 */ width : 2em; /* 내 폰트사이즈 혹은 상위요소 폰트사이즈의 2배 */ width : 50vw; /* 브라우저(viewport) 화면 폭의 50% */ width : 50vh; /* 브라우저(viewport) 화면 높이의 50% */ } 웹에서 사용하는 단위들이다. rem단위는 보통 전체 글꼴 크기를 키울 때 다른 레이아웃이 비율로 같이 커지게 하기 위해서 사용한다. 그리고 모바일에서도 반응형 레이아웃을 만들려면 이 들어가 있어야 한다. 본격적으로, media query에 대해 알아보자. @media screen and (max-wi..
-
pseudo-classHTML,CSS 2022. 1. 18. 18:27
.btn:hover { background : chocolate; /*마우스를 올려놓을 때*/ } .btn:focus { background : red; /*클릭 후 계속 포커스 상태일 때*/ } .btn:active { background : brown; /*클릭 중일 때*/ } 위와 같이 class뒤에 :뭐시기 를 적어서 상태에 따라 스타일을 줄 수도 있다. 위처럼 세개의 pseudo-class를 같이 쓰려면 hover-focus-active 순서로 사용해야 한다. :any-link /*방문 전, 방문 후 링크 한번에 선택할 때*/ :playing /*동영상, 음성이 재생중일 때*/ :paused /*동영상, 음성이 정지시*/ :autofill /*input의 자동채우기 스타일*/ :disabled ..
-
TableHTML,CSS 2022. 1. 17. 10:07
내용 내용 내용 내용 table 태그의 기본 구성이다. thead 태그는 table의 헤드영역, tbody 태그는 table의 바디영역이다. tr은 row (가로) td는 column (세로)를 나타낸다. (th로 기본으로 굵게 되어있어서 헤드영역에 쓰이는 태그도 존재) colspan 태그와 rowspan 태그로 셀병합도 가능한대, colspan은 세로의 줄을 합치며, rowspan은 가로의 줄을 합친다. colspan의 예제 rowspan의 예제 위처럼 table 태그에 bgcolor를 주면 테이블의 색, bordercolor을 주면 경계선의 색이 된다. border-collapse: separate | collapse | initial | inherit 테이블의 경계선들이 불편하면 border-col..
-
Form & input태그HTML,CSS 2022. 1. 13. 13:01
Form태그는 정보를 서버에 알리기 위해 사용된다. Form태그의 속성으론 name, action, method, target 등이 있으며, name은 전송될 데이터의 이름 action은 전송되는 서버의 URL target은 현재 창이 아닌 다른 창에서 열게 끔 하기 method는 서버로 데이터를 전송하는 방식 (GET or POST) 등이 있다. 정보 이름 : 이메일 : 위와 같이 로그인 페이지를 만들 수 있는데 fieldset 태그로 전송할 데이터를 감싸주고 legend 태그로 이름을 짓고, input 태그로 정보를 입력하게끔 한다. 전송 전송 버튼도 button태그와 input태그의 type으로 만들 수 있다. 이름 이런식으로 label 태그의 for 값과 input 태그의 id 값을 맞추면 "이름..
-
PositionHTML,CSS 2022. 1. 12. 10:08
position: static 보통 상태임 왼 → 오 , 위 → 아래로 쌓임 (자기 부피에 따라서) position: relative static 일 때 위치를 기준으로 top, right, bottom, left 방향으로 움직일 수 있음 예를 들어, position: relative; top: 10px; 은 위에서부터 아래로 10px만큼 움직인 것 (top: -10px; 하면 위로 움직임) position: absolute position: static 속성을 가지고 있지 않은 부모를 기준으로 움직임 (아무것도 포지션이 없다면 body 기준) 보통 부모 요소에 position: relative; 부여 부모 요소를 기준으로 움직이기 때문에 크기도 부모요소의 크기에 맞춰짐 position: fixed 뷰포..