본문 바로가기

STUDY/HTML, CSS5

FreeCodeCamp: Button Style CSS3 Facebook Style Button Dark Button Light .facebook-style-btn { border-radius: 2px; font-size: 0.9rem; padding: 6px 12px; } .facebook-style-dark { -moz-outline-radius: inset 0 1px 0 0 #4d73bf; -webkit-box-shadow: inset 0 1px 0 0 #4d73bf; box-shadow: inset 0 1px 0 0 #4d73bf; background: #4267b2; border: solid 1px #4267b2; color: white; text-shadow: 0 1px 0 #3359a5; } .facebook-style-dark:hover { ba.. 2021. 5. 14.
CSS Flexbox 박스가 커지면 아이템들이 어떻게 커져야하는지 박스가 작아지면 아이템들이 어떻게 작아져서 배치되어야하는지 float: 이미지와 텍스트를 어떻게 배치할 것인지에 대한 정의 Flexbox가 생기면서 float는 원래의 목적에 맞게 사용하면 된다. Flexbox: 박스를 배치한다. (행, 열) container의 속성값, container안의 items 속성값으로 나뉜다. container 속성값: -display -flex-direction -flex-wrap -flex-flow -justify-content -align-items -align-content item 속성값: -order -flex-grow -flex-shrink -flex -align-self 수평축이 중심축이고, 수직축이 반대축이 된다. .. 2021. 2. 19.
CSS display, position ● display: 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다. - display-outside values: block: 인라인 요소를 블럭요소로 바꿔줄 때 사용한다. inline: 블럭 요소를 인라인으로 바꿔줄 때 사용한다.컨텐츠의 크기에 따라 사이즈가 달라지고 컨텐츠 자체만을 꾸며주는 역할을 한다. margin-top, margin-bottom을 쓸 수 없다. width, height를 쓸 수 없다. run-in display-inside values: flow flow-root table flex grid ruby - display-listitem - display-internal values: ta.. 2021. 1. 20.
CSS Basic ● CSS: Cascading Style Sheet 연속화, 연속해서 떨어지는, 작성자가 만든 스타일이 없으면 유저가 만들어 둔 스타일이나, 브라우저의 스타일로 반영된다. Author style → User style → Browser style ● !important: 다 필요없고, 내가 제일 중요해!라는 뜻. 가능하면 쓰지 않는다. ● selectors Universal: * type: Tag ID: #id Class: .calss State: : Attribute: [] developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors CSS selectors - CSS: Cascading Style Sheets | MDN CSS selectors define the.. 2021. 1. 20.
HTML Basic ● Website structure: header, nav, aside, main, footer - div로 나누면 안된다. - main 안에 여러 section으로 나눌 수 있다. - section안에 article로 나눌 수 있다. article은 여러 아이템들을 그룹화해서 재사용 가능한 것들이 모아져 있다. 텍스트나 버튼 등 똑같은 패턴을 그룹화 한 것(예: 게시판 리스트, 댓글 리스트) ● HTML은 BOX와 ITEM으로 구성되어 있다. - BOX: header, footer, nav, aside, main, section, article, nav, div, span, form - ITEM: a, button, label, img, video, map, canvas, table main > sec.. 2021. 1. 20.

티스토리툴바